---
title: "Framer Shopify Integration: Setup Guide (2026) | FrameStoreKit"
canonical_url: "https://framestorekit.com/framer-shopify-integration"
last_updated: "2026-10-21T15:06:28.912Z"
meta:
  description: "Connect Shopify to Framer in minutes: connect the store, sync products to Framer CMS, add cart components and sell with Shopify checkout. Step by step."
  "og:description": "Connect Shopify to Framer in minutes: connect the store, sync products to Framer CMS, add cart components and sell with Shopify checkout. Step by step."
  "og:title": "Framer Shopify Integration: Setup Guide (2026) | FrameStoreKit"
---

FrameStoreKit home

# **Framer Shopify integration: connect Shopify to Framer**

How to connect a Shopify store to a Framer site, sync the catalog into Framer CMS and sell with Shopify checkout, step by step.

by FrameStoreKit teamUpdated October 10, 2026

**Connect Shopify**

**Store domain**linen-and-co.myshopify.com

**Storefront API token**••••••••••••••••••••a91f

**Connected · all required scopes on **

**Products**

**Synced 2 min ago **

**Linen Overshirt**$68.00

**Wool Beanie**$32.00

**Canvas Tote**$45.00

**Merino Crew**$94.00

**Components**

40+

Search components

Product Card

Variant Picker

Cart Drawer

Quantity Breaks

****Short answer: ****Install the FrameStoreKit plugin in Framer, connect your Shopify store in the onboarding wizard (about 5 minutes), sync products into Framer CMS with one click, then remix a template or drag cart and product components onto your pages. Checkout runs on Shopify.

## What you need

- A Shopify store on any plan, with products.
- A Framer project (any paid plan to publish on a custom domain).
- The FrameStoreKit plugin from the Framer Marketplace. Free covers up to 15 products. New to it? Read [what FrameStoreKit is](https://framestorekit.com/what-is-framestorekit).

## Connect Shopify to Framer in 5 steps

### 1. Connect your Shopify store

Open the plugin in Framer and follow the onboarding wizard. It checks every setting and tells you exactly what’s missing.

### 2. Sync your catalog

Choose all products or specific collections and click Sync. Products, variants, images and collections appear as Framer CMS collections.

### 3. Build or remix the pages

Start with the $49 Cossaire template, or drag Product Card, Variant Selector, Add To Cart and Cart Drawer onto your own pages.

### 4. Style the components

Set fonts or text styles, colors, spacing and states in each component’s property controls.

### 5. Publish and test checkout

Publish the site, add a product to the cart and complete a test order on Shopify’s checkout.

The Shopify-side settings for step 1 are covered with screenshots in [Connect your store](https://framestorekit.com/docs/shopify/connect-store).

## How the integration works

Your Shopify store stays the source of truth. FrameStoreKit reads the catalog into Framer CMS collections so you can design product and collection pages with Framer’s CMS. On the live site, components read prices, stock and the cart straight from Shopify in the shopper’s browser, then hand off to Shopify’s hosted checkout for payment, tax and shipping.

| Lives in Shopify | Lives in Framer |
| --- | --- |
| Products, inventory, prices, discounts | Page design, layout, text styles |
| Checkout, payments, tax, shipping | Cart, product and account components |
| Orders, customers, fulfillment | CMS pages built from the synced catalog |

## How long it takes

Connecting a store that already has products takes about 5 minutes. Sync is one click; large catalogs take a little longer. Remixing a template and publishing takes about 5 more minutes, and building your own product and collection pages takes about 30.

## What to know before you start

- Automatic sync: sync is one click, whenever you want
- One-click upsells after payment (Shopify limits them to theme stores)
- Run Shopify theme apps on your Framer site
- Bundles as one cart line (coming soon, via Shopify’s Bundles app)
- Customer file uploads on product options (planned)
- Several projects on one license (that’s the Enterprise plan)
- Shop Pay wallet on the Framer canvas preview (works on the published site)

See the full list in [what FrameStoreKit can and can’t do](https://framestorekit.com/what-it-can-and-cant-do).

## Integration questions

Still unsure? [**~~Email us~~**](https://framestorekit.com/contact) and a Framer + Shopify person will reply, usually the same day.

###

Yes. With the FrameStoreKit plugin, Framer reads your Shopify catalog into CMS and uses Shopify’s cart and checkout, so you sell from a Framer site.

###

###

## **Say yes to the next Shopify project**

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

[Start building free](https://framestorekit.com/signup)

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.