Prerequisites

A Shopify store containing products, a Framer project, and a Shopiframe account with one available Store Credit.

1. Install Headless

In Shopify Admin, open Apps, search for Headless, and install the app. Open it and create a storefront. If you already have one, choose Add storefront and give the new storefront a recognizable name.

2. Review Storefront permissions

Open the storefront’s Storefront API section and select Manage. Edit the Storefront API permissions and enable the permissions required by Shopiframe. For inventory displays, include unauthenticated_read_product_inventory. Save the changes before copying a token.

3. Copy the public token and domain

Return to the Storefront API screen and copy Public access token. In Shopify Settings → Domains, find the .myshopify.com domain. Copy only the domain, without https:// or a trailing slash. Do not use an Admin API token or private Headless token.

4. Connect in Framer

Open Shopiframe in your project. Choose Your Shopify Store during onboarding, or open Store Configuration if the Demo Store is active. Sign in, confirm an available Store Credit, and enter Storefront Domain and Storefront Access Token. Select Connect to Shopify.

5. Prepare the product CMS

After Shopiframe verifies the connection, create or update the managed product collection and sync products. Shopiframe saves configuration to the project and adds the Custom Code its components need. Keep this project configuration intact.

Check your work

Confirm that the intended store is connected and that a synced product matches Shopify. Check both its title and image before designing additional pages.

Troubleshooting

If the connection fails, recheck the domain format, public token, permissions, and available Store Credit. A successful connection with no products is a separate publishing issue: enable the product for your Headless storefront in Shopify, then sync again.

Resources

Connect your Shopify store