Support docs
Get started
Get started
Part 1: 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.
At any point, you can always remix the project again for reference of how it was set up.
Part 2: 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 for the template to be able to use 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, and copy the “.myshopify.com” domain that’s listed on that page
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
Make sure that the shopifyWrapper component lives on every page of your Framer site
Part 3: 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.
We use Collections to filter content in the template, but we also import productType and tags from Shopify. We don't do anything with those elements in the template – we import them in case you want to use them. Feel free to delete whatever you don't use.
Part 4: 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.
