Thank you for choosing ShopiFrame to integrate your Shopify store with Framer. This guide will help you get started quickly and easily.
Before you begin, ensure you have the following:
Active Shopify store
Framer account
Open the links sent to your email after your purchase
Duplicate the ShopiFrame Integration project and Onyxo template into your Framer account
First, you need to add some products in your Shopify admin.
Then, create a Storefront Access Token by following these steps:
Open the Settings menu from Shopify Admin
Click on Apps and sales channels
Click on the Develop apps tab
Click on the Create an app button and choose a name for your application, like ShopiFrame
Select Configure Storefront API scopes and mark these scopes,
then click save:
unauthenticated_write_checkouts
unauthenticated_read_checkouts
unauthenticated_read_content
unauthenticated_read_product_listings
unauthenticated_read_product_inventory
unauthenticated_read_product_tags
At the top right of the screen, click on the Install app button
Finally, go to the API credentials tab and copy your API access token
Open the ShopiFrame project in Framer
Open the ShopiFrame_Config component and select the child with red color errors
Copy the Storefront Access Token from the previous step and paste it into the component
Copy your Store Domain from Shopify Admin settings and paste it into the Config component
Copy the ShopiFrame_Config component and paste it into all of your Framer eCommerce project pages
Set the position to
absolutewith a top position of-1000pxbecause this is not a visual component, but it is needed on every page
From your Framer project, click on the CMS tab
(You can skip the next two steps if you use our premade template. Simply delete our data from the CMS.)
Create a new collection for your products
Create these fields with exactly these titles:
title (required)
slug (required)
productID (required)
collection
vendor
productType
tags
featuredImage (required, must be an image)
description
After configuring our integration correctly from the previous steps, click on the Preview button (with the Play icon) in our integration project
Scroll to the Download Products CSV button and click on it to download the CSV file
Go back to your Framer project CMS, click the Import tab at the top, and upload your CSV file
Your product static data will now be imported into your Framer project.
If there are any issues with importing data into the Framer CMS, first ensure you created the fields correctly, then repeat the steps.
Import all ShopiFrame components into your Framer eCommerce project
Customize the components to match your theme
Publish your store and enjoy!
FAQ
ShopiFrame