Set up FrameStoreKit

2. Prepare your Shopify store

In Shopify admin, add the Headless sales channel and create a storefront. Copy the public Storefront API token and your myshopify.com domain.

1. Install Shopify HeadlessFrom Shopify admin, add the Headless sales channel and create a storefront.
2. Enable Storefront scopesOpen Storefront API → Manage permissions and enable product inventory and product bundles.
3. Copy access detailsCopy the public Storefront API token and your permanent myshopify.com domain.

3. Connect Shopify

Paste the store domain and public token into the plugin. A green Connected state confirms the Storefront API is ready.

For the full connection procedure and later token changes, see Connect and manage your Shopify store.

4. Create the Products collection

Open Framer CMS and let the plugin create the managed Products collection with the fields required by the components.

5. Run your first product sync

Choose all products or selected Shopify collections, then start the sync. Products, variants, pricing, inventory, and images are written to Framer CMS.

Optional: Enable customer accounts

Pro and Lifetime users can add customer login during onboarding or later in Manage → Customer accounts. Choose Skip for now to finish setup without login.

You'll need a public Customer Account Client ID and your published Framer HTTPS site URL. Follow the Customer Account setup guide to register the callback, JavaScript origin, and logout URI in Shopify and create your account page.

6. Manage syncs and components

Use incremental sync for routine catalog updates, or sync from scratch when you need a clean rebuild. Your custom Framer fields remain untouched.

After onboarding, use Manage → Connection to update your public Storefront token and Manage → Customer accounts to change or clear the Client ID and site URL. Each save replaces the existing FramerHub site script without duplicates and preserves unrelated custom code.

Check the script status in Manage → Domains & runtime, retry from the canvas if needed, and publish your Framer site to apply saved changes. Components with auto connection fields follow the shared settings; older explicit values can be changed to auto.

Free stores display the Powered by FrameStoreKit site button. A Pro or Lifetime license assigned to the store removes it after the site code updates and you publish again.