Getting Started

Connect a headless Shopify store to Framer, sync your catalog into Framer CMS, and design every storefront page with components that inherit your Framer text styles. Shopify keeps running orders, payments, taxes, and checkout.

Public Storefront tokennotAn Admin app

This guide assumes you have access to your Shopify admin and a Framer project. Data goes directly from the browser to Shopify's Storefront API — no Admin app, no private token.

Add components with the plugin

Use the FrameStoreKit plugin to browse components and insert them directly into your Framer canvas after connecting your Shopify store and syncing products. Manage licenses and connected stores from your account.

Step 1: Connect your Shopify store

Connect over the public Storefront API — no Admin app required:

In your Shopify admin, add the Headless sales channel and create a storefront
Copy the public Storefront API token and your myshopify.com domain
Open FrameStoreKit in Framer, sign in, and paste the domain and token
Connected! The plugin validates the token and flags Admin/private tokens pasted by mistake

Scopes: two scopes are off by default — enable unauthenticated_read_product_inventory for stock components and unauthenticated_read_bundles for bundle blocks. The plugin detects missing scopes and guides you.

Connect walkthrough video coming soon

Step 2: Sync your catalog to Framer CMS

Pull products and collections into Framer Managed Collections:

Open the Sync tab - Pick the collections or products to sync (sync-all is the default)
Run the first sync - Products, variants, prices, stock, and images flow into Framer CMS
Keep your own fields - Framer-only fields you add (story copy, lookbook layout) survive every re-sync

🔄 What syncs

Products & variants: title, price, compare-at, options, availability
Collections: grouped product listings
Manual sync ships in v1; Auto-Sync via Shopify webhooks is on the roadmap

Sync setup video coming soon

Optional: Set up customer login

Customer Account setup is optional and available on Pro or Lifetime for the connected Shopify store. Choose Skip for now in onboarding if you only need the storefront.

To enable login, enter a public Customer Account Client ID and your published Framer HTTPS site URL. Register the callback, JavaScript origin, and logout URI shown in the form in Shopify Headless, then create an /account page with Account View or Auth Callback.

Follow the Customer Account setup guide. You can return to Manage → Customer accounts after onboarding to update or clear these settings.

Step 3: Insert storefront components

Drop in product, cart, accounts, AOV, Markets, and analytics components:

Open the Components tab - Browse 30+ components; Pro ones are badged
Insert onto the canvas - Product card, gallery, variant selector, cart drawer, checkout button, and more
Bind to your CMS - Components read the synced product/collection data automatically

📦 Product & Cart

Free, the storefront essentials

• Card, gallery, price, stock
• Variant selector, quantity, add-to-cart
• Cart drawer, totals, discount code

📈 AOV & revenue

Pro, front-end, no extra app

• Quantity breaks, Buy X Get Y (BOGO)
• Product options + paid add-ons
• FBT, cart + post-ATC upsell, free-ship bar
• Low-stock counter, sticky ATC · bundles soon

🌍 Deep Shopify

Pro, native to Shopify

• Customer accounts + order history
• Subscriptions (selling plans)
• Markets multi-currency, Shop Pay

Components walkthrough video coming soon

Plugin-inserted components use auto connection fields to follow your saved site settings. For an older instance, change explicit connection values to auto if it should follow future updates.

Storefront filters, search, sort, and favorites are deferred to a later release. See the components catalog for what ships today.

Step 4: Style to match your design

Every component uses Framer's standard styling controls — and inherits your text styles:

🎨 Your text styles, not a widget's

Every text-bearing component uses your project's text styles, so typography is yours. Colors, spacing, and borders work exactly like native Framer components — style in the property panel.

Typography: components inherit your Framer text styles
Colors: background, text, borders, hover states
Layout: padding, margins, spacing, alignment
Effects: shadows, blur, borders, corner radius

Styling walkthrough video coming soon

🚀 Quick start with a starter project

Want to see it working immediately? Start from a wired-up storefront:

⚡ Instant setup

Open the Components tab - Find the "Starter projects" section
Insert a starter - A full product page or storefront, already wired
Connect your store - Point it at your synced catalog
Restyle it - Or strip it for parts

🛍️ Storefront starter

Collection and cart flows wired to your Shopify catalog, ready to restyle

Perfect for: full stores, design-led brands, agencies

📄 Product page starter

Gallery, variant selector, price, stock, and add-to-cart already in place

Perfect for: single products, landing pages, drops

Starter projects give you a working storefront to learn from. Insert one, connect your synced catalog, then make it your own.

✅ You're done!

Publish your Framer site and check the flow end to end:

✅ Products and collections render from Framer CMS

✅ Add-to-cart updates the cart drawer

✅ Checkout hands off to Shopify-hosted checkout

✅ Everything looks good on mobile

✅ If customer login is configured, sign-in returns to your account page

Update tokens and site settings later

Open Manage → Connection to update the public Storefront API token and select Save changes.
Open Manage → Customer accounts to change the Client ID or published site URL and select Save customer accounts.
Check Manage → Domains & runtime. If Framer denied the script write, reopen from the canvas and select Retry site script update. Enable disabled snippets in Site Settings → Code.
Publish your Framer site to apply the saved changes.

Each save replaces the existing FramerHub site script without adding duplicates. Unrelated custom code is preserved. See the connection and token update guide for details.

Free stores display a Powered by FrameStoreKit button on the published site. Applying a Pro or Lifetime license to the connected store removes it after the site script updates and you publish again.

🎉 Your Shopify storefront is live in Framer!

A real headless Shopify store that looks like your Framer design — with Shopify still running orders, payments, taxes, and checkout.