Connect your Shopify store
Connect a real Shopify store when you are ready to work with your own products, markets, inventory, cart, and checkout.
What you need
• A Shopify store with products
The free Shopify Headless app
A public Storefront API access token
Your permanent
.myshopify.comstore domainA Shopiframe account with one unused Store Credit
Important: Use the public Storefront API token created by the Headless app. Do not paste an Admin API token, private app secret, or Shopify account password into Shopiframe.
Install Shopify Headless
Sign in to the Shopify admin for the store you want to connect.
Open the Shopify Headless app listing.
Click Install and approve the installation for the correct store.
Create a storefront
Open Headless from Shopify Admin.
Click Add storefront or Create storefront.
Give the storefront a clear name, such as
Shopiframe.In the Storefront API section, click Manage.
Configure Storefront API permissions
Next to Storefront API permissions, click the edit or pencil icon.
Enable the permissions requested by the Shopiframe setup helper.
Make sure product catalog and inventory read access are enabled. Inventory-aware components require
unauthenticated_read_product_inventory.If you sell subscriptions, enable the selling-plan permissions required by Shopify and later enable Selling plans (Subscription) in Shopiframe’s Store Configuration.
Click Save.
Shopify may change the names or grouping of these permissions. Select the equivalent product, inventory, cart, market, and selling-plan permissions needed by your storefront.
For Shopify’s current interface and permission behavior, see Manage the Headless channel and Shopify API access scopes.
Copy the public access token
After saving the permissions:
Return to the storefront’s Storefront API screen.
Find Public access token.
Click the copy icon.
Paste it directly into Shopiframe or keep it somewhere secure temporarily.
Find your Shopify domain
Shopiframe needs the permanent domain that identifies your Shopify store.
In Shopify Admin, open Settings.
Select Domains.
Find the domain ending in
.myshopify.com.Copy the domain without
https://or a trailing slash.
Example:
your-store.myshopify.com
Use the .myshopify.com domain even if customers visit a custom domain. It is stable and avoids conflicts with the Framer domain used by your public storefront.
Connect the store in Shopiframe
Open your Framer project.
Open Plugins, search for Shopiframe, and launch it.
Choose Your Shopify Store during onboarding, or open Store Configuration if you already use the Demo Store.
Sign in using the email connected to your Shopiframe purchase.
Make sure one unused Store Credit is available. One Store Credit connects one Shopiframe project to one real Shopify store.
Paste the
.myshopify.comdomain into Storefront Domain.Paste the Headless public token into Storefront Access Token.
Click Connect to Shopify.
Shopiframe validates the credentials before connecting. After a successful connection, it stores the active configuration in the Framer project and installs the required project-level Custom Code for Shopiframe components.
If you see Unable to verify your Shopify store, check that:
The domain is the correct
.myshopify.comdomain.The token is the public token from the same Headless storefront.
The token has the required Storefront API permissions.
The values do not include extra spaces.
Make products available to the storefront
Products must be published to the sales channel used by the Headless storefront.
In Shopify Admin, open Headless and select your storefront.
Open Sales channels.
Add Storefront if it is not already present.
Publish the products you want to use to that storefront.
If no products are available to the channel, Shopiframe will connect successfully but the CMS sync will return no products.
Sync the CMS
After connecting the store:
Click Create Shopiframe CMS if this is a new project, or Open Shopiframe CMS if the collection already exists.
Configure the product fields you want.
Click Sync Products.
Return to the plugin and confirm that the sync is complete.
About the public token
Public Storefront API tokens are designed for client-side storefronts and are not equivalent to Admin API secrets. Their permissions control which storefront data can be accessed.
Shopiframe only needs the public token and your store domain; it never needs your Shopify password, a private Headless token, or an Admin API access token. Do not expose any private credential in screenshots, documentation, or support messages.