Syncing Shopify Products into the Framer CMS
CMS-driven pages — product grids, collection pages, anything that repeats a layout across many items — need their data in the Framer CMS. Framerlink puts your Shopify catalog there and keeps it accurate. This is how the Framer CMS sync works: what lands in the CMS, the two ways to keep it current, and what happens when your catalog changes.
Two ways to sync
There are two modes, and most stores use both.
- Manual import is a one-click mirror. Open the CMS panel in Framer, choose Framerlink, review the options, and click Import Products. The button reports progress live as items land. Imports are safe to repeat — products are upserted, removed products are reconciled away, and your selected fields stay authoritative. Full details in Importing products.
- Auto-Sync is the same import, made continuous. With it on, every change in Shopify flows into your Framer CMS in near real time, with no clicking Import. Set it up once as described in Auto-Sync.
A common rhythm is to import manually while you're setting up and designing, then enable Auto-Sync before launch so the live site stays current on its own.
What lands in the CMS
An import creates managed collections in your Framer project:
| CMS collection | Contents |
|---|---|
| Shopify Products | Every synced product, with the fields you selected |
| Shopify Collections | One entry per Shopify collection — title, handle, image, description |
| Per-collection tables | Optional — a separate CMS table for each Shopify collection you choose |
These are managed: Framerlink owns their schema and contents and keeps them consistent with Shopify. The synced data itself covers what a storefront needs — titles, prices (including compare-at pricing), variants, inventory availability, imagery and collections. Bind your components and CMS pages to these fields and they render your real catalog.
One safeguard worth knowing: if your project already has a collection named Shopify Products that Framerlink doesn't manage, the sync stops rather than touching your data, and the plugin explains the conflict so you can rename or remove the existing collection first.
Choose exactly what syncs
You're not stuck with whatever Shopify sends. Under Standard Fields in the CMS panel you toggle which product fields sync — the defaults cover most storefronts, and there are All / None shortcuts. You can also pull in any Shopify metafield by entering it as namespace.key (for example custom.material) and picking its type; it becomes its own CMS field on every product.
There's also room for data that's yours, not Shopify's. Editable Fields are CMS fields you add for hand-written copy, badges or curation flags — Framerlink never writes to them, so neither imports nor Auto-Sync will overwrite your edits. The full breakdown, including how collections map to the productCollections field, is in Fields & metafields.
Crucially, your field selection is shared by both sync modes. Deselect a field and it's removed going forward — a webhook update can never sneak it back in.
What happens when your catalog changes
This is where Auto-Sync earns its place. Shopify notifies Framerlink's backend the moment your catalog changes, and each change is queued per store and written into your CMS using the same field selection as your manual imports. There's no webhook setup on your end — installing the Shopify app wired all of it.
Take a price change as the canonical example. Edit a product's price in the Shopify admin, and Shopify fires the change to Framerlink, which refreshes that product's entry in Shopify Products — usually within moments of the edit. The new price shows up wherever you've bound a price component or CMS field, without anyone opening Framer. The same holds for the rest of the catalog:
| Change in Shopify | Result in Framer CMS |
|---|---|
| Product created, updated or deleted | Entry upserted or removed in Shopify Products |
| Variant, image or option changed | The product's entry refreshed |
| Collection created, updated or deleted | Shopify Collections and per-collection tables updated |
Changes are applied in order, per store, and the Shopify admin's app home page shows a sync activity feed with per-event success or error detail — so "did it sync?" is a question you can actually answer.
Near-real-time, not instant magic
It's worth being precise about latency. Auto-Sync is event-driven and typically lands changes within moments, but it's near-real-time, not a live database read: changes flow as Shopify emits them and Framerlink processes the queue. For most storefronts that's indistinguishable from instant. If you ever want a guaranteed full refresh — after a big bulk edit, say — a manual import is always there and reconciles everything against your current field selection.
Getting started
If you haven't linked a store yet, start with how to connect Shopify to Framer, then follow the quickstart to run your first import. Once the catalog is in the CMS, building a Shopify storefront in Framer covers turning that data into the pages shoppers see.