Setup the Framer plugin
Learn how to set up the Framer Commerce plugin.
If you are still using v1 and haven't moved to the plugin yet, you will need to do so before April 1, 2025.
If you are still using v1 and haven't moved to the plugin yet, you will need to do so before April 1, 2025.
If you are still using v1 and haven't moved to the plugin yet, you will need to do so before April 1, 2025.
In this doc, we will:
Open the plugin
You can visit our plugin page on the Framer Marketplace and select the project you'd like to open it in from the dropdown, or follow the instructions below to open it directly from Framer.
Open the plugin
You can visit our plugin page on the Framer Marketplace and select the project you'd like to open it in from the dropdown, or follow the instructions below to open it directly from Framer.
Open the plugin
You can visit our plugin page on the Framer Marketplace and select the project you'd like to open it in from the dropdown, or follow the instructions below to open it directly from Framer.
1
Open the Framer file you want to connect to Shopify
This can be one of our templates, one of your existing sites, or a blank file.
1
Open the Framer file you want to connect to Shopify
This can be one of our templates, one of your existing sites, or a blank file.
1
Open the Framer file you want to connect to Shopify
This can be one of our templates, one of your existing sites, or a blank file.
2
Click on the "Plugins" button at the top
2
Click on the "Plugins" button at the top
2
Click on the "Plugins" button at the top
3
Search for "Framer Commerce" and hit Enter
3
Search for "Framer Commerce" and hit Enter
3
Search for "Framer Commerce" and hit Enter
Choose your store
Once you have the plugin open, you can login with your account and select the store you wish to connect to the Framer project file you have open.
Choose your store
Once you have the plugin open, you can login with your account and select the store you wish to connect to the Framer project file you have open.
Choose your store
Once you have the plugin open, you can login with your account and select the store you wish to connect to the Framer project file you have open.
1
Login
Using the credentials you used to sign up for Framer Commerce.
1
Login
Using the credentials you used to sign up for Framer Commerce.
1
Login
Using the credentials you used to sign up for Framer Commerce.
2
Choose your store
Select the store you wish to connect to your open Framer project file. If you don't see your store listed, you can refresh the list. By default, every account will have access to a Demo Store which you can use to play around with.
2
Choose your store
Select the store you wish to connect to your open Framer project file. If you don't see your store listed, you can refresh the list. By default, every account will have access to a Demo Store which you can use to play around with.
2
Choose your store
Select the store you wish to connect to your open Framer project file. If you don't see your store listed, you can refresh the list. By default, every account will have access to a Demo Store which you can use to play around with.
3
Confirm the script has been added
As soon as you connect your store, you should see a toast at the bottom of your project reading "Framer Commerce has added a script to your website." At this point, your Framer project file is now fully connected to your Shopify store.
3
Confirm the script has been added
As soon as you connect your store, you should see a toast at the bottom of your project reading "Framer Commerce has added a script to your website." At this point, your Framer project file is now fully connected to your Shopify store.
3
Confirm the script has been added
As soon as you connect your store, you should see a toast at the bottom of your project reading "Framer Commerce has added a script to your website." At this point, your Framer project file is now fully connected to your Shopify store.
Adjust store settings
If you'd like, you can go to the store settings screen to:
Adjust store settings
If you'd like, you can go to the store settings screen to:
Adjust store settings
If you'd like, you can go to the store settings screen to:
Set your default market
Select your default Country/Currency based on available markets configured on your Shopify dashboard.
Set your default market
Select your default Country/Currency based on available markets configured on your Shopify dashboard.
Set your default market
Select your default Country/Currency based on available markets configured on your Shopify dashboard.
Change the default checkout locale
If you are using Framer locales, the checkout button will send the user to the Shopify checkout screen in their selected language. If your site is not English, be sure to set your default language.
Change the default checkout locale
If you are using Framer locales, the checkout button will send the user to the Shopify checkout screen in their selected language. If your site is not English, be sure to set your default language.
Change the default checkout locale
If you are using Framer locales, the checkout button will send the user to the Shopify checkout screen in their selected language. If your site is not English, be sure to set your default language.
Add your Facebook / Meta Pixel ID
Track user interactions, create targeted audiences, and measure conversions across Facebook, Instagram and WhatsApp.
Add your Facebook / Meta Pixel ID
Track user interactions, create targeted audiences, and measure conversions across Facebook, Instagram and WhatsApp.
Add your Facebook / Meta Pixel ID
Track user interactions, create targeted audiences, and measure conversions across Facebook, Instagram and WhatsApp.
Add your Google Analytics ID
Track user interactions, analyze website performance, and measure conversions across Search, Display, and YouTube .
Add your Google Analytics ID
Track user interactions, analyze website performance, and measure conversions across Search, Display, and YouTube .
Add your Google Analytics ID
Track user interactions, analyze website performance, and measure conversions across Search, Display, and YouTube .
Stay updated
Release notes, promos, & more
© Copyright Butter Supply Inc. 2025
Stay updated
Release notes, promos, & more
© Copyright Butter Supply Inc. 2025
Stay updated
Release notes, promos, & more
© Copyright Butter Supply Inc. 2025