Support docs

Get started

Setting up your file

  1. Open the link sent to your email account after your purchase and duplicate the Framer project file to your account.

  1. 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.

At any point, you can always remix the project again for reference of how it was set up.

At any point, you can always remix the project again for reference of how it was set up.

Connecting Shopify API to Framer

  1. From the sidebar of the file you're building off of, choose the Assets tab and select the “Framer Commerce / shopifyWrapper” component

  1. 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.

  1. Login to your Shopify dashboard and click on the Apps menu in the left sidebar

  1. Click on App and sales channel settings

  1. 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.

For more info and instructions on custom domains, jump to the Connect domains to Shopify section.

For more info and instructions on custom domains, jump to the Connect domains to Shopify section.

For more info and instructions on custom domains, jump to the Connect domains to Shopify section.

  1. Login to your shopify dashboard and click on the Apps menu in the left sidebar

  1. Click on App and sales channel settings

  1. Click on the Develop apps tab

  1. Click on the Create an app button

  1. Choose a name for your application (i.e. "Framer") and press Create app

  1. Click Configure Storefront API scopes

  1. Mark scopes shown in the screenshot below, and click Save

  1. Click the Install app button on the top right of the screen

  1. 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

Make sure that the shopifyWrapper component lives on every page of your Framer site

Make sure that the shopifyWrapper component lives on every page of your Framer site

Importing your Shopify products into Framer CMS

  1. From the top-left section of your Framer project, click on the CMS tab.

  1. 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.

  1. Go to framercommerce.com/magic-import and enter your Shopify Domain & Access Token (instructions above). Hit Generate and download the CSV file.

  1. Now go back to Framer CMS, click the Import tab from the top-left, and upload your CSV file.

  1. 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.

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.

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.

Adding new items after initial import

  1. 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

  1. 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.

  1. 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

  1. 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

Make sure the domain in your FcShopifyShell component always matches your primary domain on Shopify. If these are different, your site will not be connected to Shopify.

Make sure the domain in your FcShopifyShell component always matches your primary domain on Shopify. If these are different, your site will not be connected to Shopify.

Make sure the domain in your FcShopifyShell component always matches your primary domain on Shopify. If these are different, your site will not be connected to Shopify.

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.

{% if request.host == 'yourshopifydomain.com' and request.path == '/' %}<style>#redirect-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: white;z-index: 9999;}</style><div id="redirect-overlay"></div><script>document.addEventListener('DOMContentLoaded', function() {window.location.href = 'https://yourframerdomain.com';});</script>{

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

Using a Meta (formerly Facebook) Pixel in e-commerce helps track customer interactions and conversions, enabling better targeted advertising and data-driven marketing decisions.

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.

Update your components to ensure you have access to the latest versions and features!

Update your components to ensure you have access to the latest versions and features!

Update your components to ensure you have access to the latest versions and features!

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