Support docs
Get started
Setting up your file
Get started
Setting up your file
Open the link sent to your email account after your purchase and duplicate the Framer project file to your account.
If you're using our unstyled library file, you can follow the instructions to copy and paste the components into another Framer file, or build directly off of it.
Connecting Shopify API to Framer
From the sidebar of the file you're building off of, choose the Assets tab and select the “Framer Commerce / shopifyWrapper” component
Navigate to the Layers tab and select the FcShopifyShell layer. You will now see 2 fields that need to be filled out in order to connect to the Shopify APIs.
Login to your Shopify dashboard and click on the Apps menu in the left sidebar
Click on App and sales channel settings
Navigate to the Domains tab in the sidebar on the left
It is recommended to use a subdomain for your Shopify site. To do this, add your subdomain and set it as your Primary Domain.
Alternatively, you can simply copy the ".myshopify.com" domain that's listed on the page
Paste either your subdomain or myshopify domain into the FcShopifyShell.
Login to your shopify dashboard and click on the Apps menu in the left sidebar
Click on App and sales channel settings
Click on the Develop apps tab
Click on the Create an app button
Choose a name for your application (i.e. "Framer") and press Create app
Click Configure Storefront API scopes
Mark scopes shown in the screenshot below, and click Save
Click the Install app button on the top right of the screen
Navigate to API credentials tab and copy the API access token
Importing your Shopify products into Framer CMS
From the top-left section of your Framer project, click on the CMS tab.
If you're building off one of our templates, delete all the demo items inside your CMS Shop collection by right clicking on each item and clicking "Delete". We suggest having a look around to see how everything's configured before deleting. Make sure you don't delete the Shop collection itself.
Go to framercommerce.com/magic-import and enter your Shopify Domain & Access Token (instructions above). Hit Generate and download the CSV file.
Now go back to Framer CMS, click the Import tab from the top-left, and upload your CSV file.
You’re done! All your Shopify content should now be populated in your Framer CMS. Feel free to delete any extra fields in the Variables list if you don't plan on using them.
If your CSV is showing up blank, there might be a bug with your products and the Shopify API. Deleting the items and recreating them often fixes this, but get in touch with us if you need further help.
Adding new items after initial import
Add the product in Shopify as you typically would. You only need to populate the content that is necessary for the shop backend – title, price, variants, inventory, etc.
With Magic Import
Export your items from Shopify via the Magic Import as you did on your initial setup. Once you import your file into the Framer CMS, it will automatically add any new items it finds.
If you made any updates to existing items, Framer will ask you if you want to import the changes or skip them for each item (you can also select Apply to all).
Manual population
Open the Framer CMS, make a new entry and populate the Shopify product ID – you can find this at the end of the URL on the product page in the Shopify dashboard. For example, https://admin.shopify.com/store/d2d580/products/8521122775334.
Connecting custom domains
For this example, let's say you have a website called claro.com.
Connect your primary domain to Framer
On Framer, connect your top-level domain –– claro.com –– to Framer.
If using a popular domain host like GoDaddy, this can be done automatically, and should create 2 A-records pointing your domain to Framer.
Create a subdomain on your domain hosting provider
Why use a subdomain?
This will be the URL displayed on the Shopify checkout screen
This will be the URL that Shopify will always link to on your behalf, such as automated emails to your customers
This will also appear on your native Shopify site if you are hosting anything and/or directing people there.
How do I setup a subdomain?
These instructions vary per hosting provider, but the general instructions are:
Go to DNS settings
Add a new CNAME record
For the name, type in the part of the URL you want to be displayed before your main domain (i.e. "shop" would turn into "shop.claro.com")
For the Data, use shops.myshopify.com to point to Shopify. If your provider requires an IP address, use 23.227.38.65.
For the TTL, set it to 1 hour.
Connect your subdomain to Shopify
Open your Shopify dashboard
Navigate to the Domains tab in the sidebar on the left
Add your subdomain and set it as your Primary Domain.
Connect your subdomain to Framer
Open the FCShopifyShell component
Enter your subdomain into the Domain field
Add a redirect to your Framer site
Since Shopify always links to your primary domain on Shopify (for example, clicking on the logo from the checkout screen, or a button in an email), you'll want to set a redirect to always go to your Framer website.
On Shopify, go to your active theme and edit your theme.liquid file add the following code before the end of the </head> tag. Make sure you replace all domains with your URLs.
Set another subdomain for customer accounts
On Shopify, if you are using the New Customer Accounts feature, you can set your accounts domain to another subdomain directly in the Settings screen (for example, account.claro.com)
Connecting a Meta (Facebook) Pixel
Instructions
Create & configure your Meta Pixel and connect it to Shopify. More instructions
Open the FcShopifyShell component and populate the "Meta Pixel" field with your unique Pixel ID.
Shopify Customer Accounts
The New Customer Accounts feature on Shopify is a new, standardized customer account management dashboard similar to their Checkout screen. If you opt to use the New Customer Accounts feature, you can easily link to the dashboard from your Framer site for a seamless experience.
Turn on New Customer Accounts feature
Add your custom domain (i.e. account.claro.com)
Add a link to the custom domain from your Framer site
