Before you start
Butter Commerce is the next chapter of Framer Commerce. It's been rebuilt from the ground up around the Shopify app, CMS sync, Recipes, and improvements & additions to what is now over 100 Framer components.
Since there are so many changes, we decided to launch Butter as a separate Framer plugin in order to allow our customers to make the upgrade at their own pace and reduce the risk of things breaking.
Upgrading isn't one migration you run; it's a sequence of independent moves, laid out below in the order most stores follow. You can pace yourself across days or do it in one sitting — nothing here touches your live site until you actually publish.
What changes
Butter Commerce is a new plugin
You can find the new plugin on the Framer Marketplace. This means you'll have to create new CMS collections for your Products (and now Collections and Reviews can be synced directly from Shopify).
Butter Commerce components are new
You'll have to do a mass component swap. How product components bind to your CMS has also changed (through a Butter Data variable instead of a raw Product ID), and a small list of components that are full rebuilds rather than swaps.
For the most part, Butter components expose the same layouts and style controls, so swapping them should retain how you've already styled them. However, some components have been refactored on our end, and may need to be re-styled.
Butter Commerce now connects via Shopify app
This unlocks a ton of new powerful features using the Admin API, easier store setups, and allows store owners to pay for Butter directly on Shopify, adding to their monthly bill with one-click.
Using AI agents
We know this sounds like a lot, but fortunately we can leverage AI – Framer Agents and External Agents can take care of a lot of the tedious heavy lifting.
Note: Framer Agents use credits included in your Framer plan, and External Agents require an external AI subscription such as Claude, Codex/ChatGPT, etc. and will also use credits.
This article covers the steps required to migrate your store and have it function properly, but does not cover any of the dozens of new features and enhancements that come with Butter Commerce.
If you ever need help, feel free to join our Slack channel to get direct support.
Step 1: Prep your Framer file
Open the Framer project you want to update
That's the one already connected with Framer Commerce.
Create a new branch (suggested, but optional)
We suggest doing the whole migration on a branch so your live site is never at risk — this requires Framer Pro or higher. Alternatively, duplicate your project as a backup. If you don't have branches, turn on your Staging environment so you can test without pushing to production.
Export your existing CMS data (optional)
Only needed if your existing collection holds any metafields or custom fields you don't want to lose. Open your Product CMS collection managed by the Framer Commerce plugin, click the Settings icon, then at the bottom of the modal, click Export Collection Data.
Step 2: Connect Shopify Admin API
How you connect depends on where Butter's rollout is when you start:
In Beta (custom app / Admin API key)
Your existing store is already connected to Shopify, but you'll need to add Admin API access. Go to your custom legacy app that you originally created in Shopify to connect to Framer Commerce. Open Admin API, select the required scopes below and copy the Admin API token — it's only ever shown once, so save it somewhere safe immediately.
Admin API Permissions | |
|---|---|
|
|
|
|
|
|
|
|
Once the public Shopify app is available
On your Shopify dashboard, install the Butter Commerce app.
Log in with your original Framer Commerce credentials.
If you're using email + password, create a new password.
If you have multiple existing stores, click Connect on the one you want to migrate — otherwise it auto-connects.
Step 3: Swap collections & components
Open the Butter plugin in the main Framer canvas, log in & select your store.
If you're in early access:
If you're using email and password to login, you'll have to create a new password.
Click Configure beside your store name. Paste in your Admin API key and custom domain that your Framer site will live on and click Save.
Tip: press
Cmd(Mac) orCtrl(PC) +/and search "Butter Commerce."
Create a new Products collection
Open the Framer CMS and click Add… then Import Collection and select Butter Commerce. Choose the Products collection type. If you exported your CMS data earlier, click Import Legacy.
Your products will get imported and you can then enable specific fields, metafields, and custom fields.
Swap all Framer Commerce → Butter CMS collections
Since Butter uses a new CMS collection, every collection reference on your canvas that still points at the old one needs repointing.
Using AI agents (Framer or external)
Swap all CMS Collections
Replaces every legacy FC collection
Copy prompt
Manual: Swap CMS Product Page
Open the layers panel (on the left).
Right click on your Product CMS Page.
Click Swap Collection > select your new Butter Products Collection.
Manual: Swap CMS Collections in static pages
Click on the CMS collection in the Layers panel (on the left).
On the right control panel, under Content, click the Source dropdown and select your new Products collection.
Tip: If you open the CMS and try to delete your Framer Commerce Product collection, it will warn you if there are any instances left on the site, which you can use to locate them. You can delete the collection now or wait until later, up to you.
Swap all Framer Commerce → Butter components
You'll need to swap all your old Framer Commerce components (starting with FC_) with their new Butter Commerce components (starting with Butter_) and connect the Butter Data variable to the CMS.
Using AI agents (Framer or external)
Identify FC components in use
Find all legacy components starting with FC_
Copy prompt
Replace them all with Butter components
Butter components start with Butter_
Copy prompt
Connect Butter Data variables
The "Butter Data" variable must be connected to the CMS
Copy prompt
Clean up unused files
Delete legacy Framer Commerce components
Copy prompt
Manual
You can copy this component URL and paste it into a new Framer page. It will add every Butter component that has a legacy counterpart (it excludes new components).
In the Assets panel, right click on a component, click Find, and in the canvas right click on the component and click Replace All Instances With… and select the corresponding Butter component. Then connect the Butter Data variable to the Products CMS (and create a variable inside the component if needed to send up to the main page).
Rebuild your storefront components (as necessary)
Most components are an easy swap, but some details can get lost in translation, and some unlock controls Framer Commerce never had. Go through each one and confirm it's properly connected and styled.
Go live
Add your custom domain
Open the plugin, click on Settings > Domains and add your site's Framer domain (i.e. www.mywebsite.com).
Switch to your Butter plan — at your current price
In the Settings screen, you'll see a callout to make the switch to Butter. Click the Make the switch button and follow the steps on Shopify to migrate your plan.
Delete the Framer Commerce plugin head script
Open the Framer Commerce plugin one last time, click your store name, then Disconnect from project — this removes the two custom code snippets from the head.
Delete your Framer Commerce collection
Open the CMS, click the three dots beside the old Framer Commerce collection, then Delete. If it won't let you, you probably missed an instance — recheck the CMS-collection swap above.
Test & publish
Thoroughly test your store in browser (on a branch or staging environment). Once everything's good to go, Publish your site.