Your Shopify catalog, live in Framer CMS

Products, variants, images, prices and collections sync into Framer CMS collections you bind to any page. Shopify stays the source of truth; refresh with one click. No CSV exports, no code.

Start building freeRead the docs

What you can build with catalog sync

Products, variants, images and collections in Framer CMS. One click to refresh.

01

Your catalog becomes Framer CMS

Products, variants, images and collections land as CMS items. Bind them to pages, lists and detail templates like any other collection.

  • Variants and options
  • Every product image
  • Shopify collections
02

Prices and stock stay live

The CMS holds the catalog for fast pages. Price and availability are read from Shopify in the browser, so a page never shows a stale price.

  • Live price and compare-at
  • Live stock status
  • No re-sync for price changes
03

Your fields survive every sync

Add Framer-only fields for editorial content: care guides, badges, fit notes. Syncing updates Shopify data and leaves yours alone.

  • Custom CMS fields
  • Kept on every sync
  • Edited in Framer

The 4 components

Open the FrameStoreKit plugin, drag one onto the canvas and style it in the right panel. Shopify data flows in.

All components
  • Shopify CollectionProShopifyShopifyCollectionConnects a Framer CMS collection to Shopify product filtering.
  • Product Category CountProShopifyProductCategoryCountShows the current product category with its matching product count.
  • Product CardFreeShopifyProductCardDisplays product media, title, price and an add-to-cart action.
  • Product PriceFreeShopifyProductPriceShows live price, compare-at sale state and currency.

Set up in 4 steps

The onboarding wizard walks you through it. The docs cover every Shopify setting with screenshots.

Catalog sync guide
  1. 1Connect your storeThe onboarding wizard checks your store settings and tells you what’s missing.
  2. 2Pick what to syncSync everything, or only the collections this site sells.
  3. 3Bind CMS fieldsUse product fields in Framer CMS pages and lists like any other collection.
  4. 4Refresh any timeOne click pulls new products, prices and images. Fields you add in Framer are kept.

Good to know

One click, not automaticSync runs when you press it. Prices and stock on the page still come live from Shopify.
Framer-only fields surviveAdd your own CMS fields for editorial content; syncing won’t overwrite them.
Free plan: 15 productsPrototype and pitch on Free. Pro removes the product cap.

Catalog sync questions

Still unsure? Email us and a Framer + Shopify person will reply, usually the same day.

No. Sync only reads your catalog. Orders, payments and inventory stay in Shopify.

Related features

Design controlFonts, colors, spacing and states on every component.Cart & checkoutCart drawer, discount codes, Shopify checkout and Shop Pay.Filters & searchFacets, search, sort and pagination.

Say yes to the next Shopify project

Start free with 15 products. Upgrade when the client signs.

Start building free