How to Connect Shopify to Framer

Framer is one of the best places to design a website. Shopify is one of the best places to run a store. For a long time, using both meant choosing which one to compromise on. Framerlink removes the choice: it lets you connect Shopify to Framer and keep your catalog in sync, so you design in Framer and sell on Shopify without copying anything by hand.

This guide walks through the full framer Shopify integration end to end — what it is, and the exact steps to link a store to a Framer project.

What the integration actually is

Framerlink is two pieces working together:

• A Shopify app, installed on your store, that reads your catalog and pushes changes.
• A Framer plugin, opened inside your Framer project, that places commerce components and mirrors products into the Framer CMS.

Neither piece asks you to edit theme code, copy API keys by hand, or stand up a server. The Shopify app holds the connection to your store; the plugin holds the connection to your project; a short pairing step introduces the two. Once they're paired, your Shopify catalog is available in Framer as real data.

Step 1 — Install the Shopify app

Add Framerlink to your store from the Shopify App Store. After it installs, the app's home page in your Shopify admin shows an onboarding checklist that mirrors the steps below, so you can always see what's left.

Step 2 — Start a subscription

Open the app's Plan page and choose a billing interval. A subscription is required before you can pair a store — Framerlink is a single Pro plan, billed through Shopify, so the charge lands on your regular Shopify invoice with no separate account to manage. See pricing for the details.

Step 3 — Generate a pairing code

Pairing is how the plugin proves it's allowed to talk to your store, and it's deliberately simple. In the Shopify admin, open Apps → Framerlink, go to Pairing Setup, copy your store name exactly as shown, and click Generate Pairing Code.

Two things to know about the code:

• It expires 15 minutes after you generate it, so paste it into Framer promptly.
• It can be used once. Generating a new code revokes the previous key, which is how you rotate access if you ever need to.

Your Shopify credentials never travel through the browser or get stored in Framer — the plugin only ever holds a private, per-store key it receives during pairing. The full flow, including edge cases, lives in Pairing your store.

Step 4 — Pair the plugin in Framer

In your Framer project, open Plugins → Framerlink. You'll land on the Connect to Framerlink screen with two fields. Paste in the store name and the pairing code, then press Login.

On success, the plugin stores its key, loads your product catalog, and unlocks its home screen: Components, Brand and the CMS sync tools. That's the connection made — the rest is building.

Step 5 — Add a component and import your catalog

With the store connected, you can start using live data two ways:

• Drop in a component. Open Components, find Product Card, and drag it onto the canvas. It lands as a real Framer code component, already wired to your store. Browse the full set in the component reference.
• Import your catalog into the CMS. Open the CMS panel, choose Framerlink as the source, review the defaults, and click Import Products. This creates managed Shopify Products and Shopify Collections collections you can bind CMS pages to. More in Importing products.

If you want the CMS to stay current on its own after that, turn on Auto-Sync so every Shopify edit flows into Framer automatically. And if you're weighing why to run the storefront this way at all, building a Shopify storefront in Framer makes the case.

Common connection errors

Most pairing problems come down to one of a few causes:

• "Store name or pairing code is wrong." Usually a typo, or the code was already used. Re-check both values and generate a fresh code if needed.
• "Pairing code expired." More than 15 minutes passed. Generate a new one in the Shopify admin.
• "No active subscription." Pairing needs an active plan — subscribe from the app's Plan page, then log in again.
• "Couldn't reach Framerlink." Usually a network hiccup rather than a credential problem; check your connection and retry.

If a project that was already paired suddenly drops back to the login screen, it typically means a new code was generated or the app was reinstalled — your placed components and CMS collections stay untouched either way. The troubleshooting guide covers each state in detail.

What "connected" gets you

Once Shopify and Framer are linked, your catalog is no longer something you maintain in two places. Titles, prices, variants, inventory and imagery live in Shopify and appear in Framer — in components on the canvas and as entries in the CMS. Design freely; the data keeps up. For the fastest path from zero to a working storefront, follow the quickstart.