5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T859,

Shopify Connect - Build a Shopify storefront in Framer

Shopify Connect brings your Shopify store into Framer and lets you build a complete, fully custom storefront without leaving the design tool. Sync your catalog into the Framer CMS in one click, or pull products live via API, then assemble product pages, listings, cart, and checkout with ready-made, drag-and-drop components. No themes, no code. Built on Framer Plugins 3.0 and free to use.

How it works

Connect your store with your shop domain and a Storefront API access token.
Sync products into a Framer CMS collection, or fetch live by handle in API mode.
Drag components onto the canvas. They auto wire to your store and render real data.
Shoppers add to cart and check out through Shopify's secure hosted checkout.

Storefront Components

Product Page, Product Listing (search, sort, pagination), Variant Selector (pills, swatches, image switch), Add to Cart, Buy It Now, Quantity, Cart Drawer, Cart Page, Cart Icon, Mobile Sticky Cart, Price, Price Discount, SKU, Inventory Label and Counter, Tabs, Related Products, Share, and more. Changing a variant updates price, SKU, stock, and image everywhere on the page.

Two data modes

CMS mode syncs products into Framer CMS with no API calls required. API mode fetches live data on demand. Switch anytime.

Designed for designers

Toggleable animations (scroll reveal, tab cross fade, hover zoom), deep styling controls, sale badges, light and dark mode, and full responsiveness across desktop, tablet, and phone.

Secure by design

Your Storefront token is never embedded in your published site. It is stored locally and used server-side through a secure proxy, with PCI handled by Shopify checkout.

Setup requires a Shopify Storefront API access token (public token). In Shopify admin: Sales channels, Headless, Manage API access, Storefront API, Public access token.

5a:[["$","$L5d",null,{"post":{"id":"019eff2d-7c19-76e8-b184-d4aa1a79788e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7e63332c-77d2-4e00-a6ca-d9c98c3d7dcf","name":"FeCommerce","slug":"fecommerce","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1522163/avatar-O3mD0A25QB3hEFuyWMXPGD4iqS1Dlf.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"1309","resolved":true,"title":"ShopifyConnect","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Shopify Connect - Build a Shopify storefront in Framer","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Shopify Connect brings your Shopify store into Framer and lets you build a complete, fully custom storefront without leaving the design tool. Sync your catalog into the Framer CMS in one click, or pull products live via API, then assemble product pages, listings, cart, and checkout with ready-made, drag-and-drop components. No themes, no code. Built on Framer Plugins 3.0 and free to use."}]},{"type":"customHeading","content":[{"type":"text","text":"How it works","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Connect your store with your shop domain and a Storefront API access token."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Sync products into a Framer CMS collection, or fetch live by handle in API mode."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag components onto the canvas. They auto wire to your store and render real data."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shoppers add to cart and check out through Shopify's secure hosted checkout."}]}]}],"attrs":{"type":null,"start":1}},{"type":"customHeading","content":[{"type":"text","text":"Storefront Components","marks":[{"type":"bold"}]},{"type":"text","text":" "}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Product Page, Product Listing (search, sort, pagination), Variant Selector (pills, swatches, image switch), Add to Cart, Buy It Now, Quantity, Cart Drawer, Cart Page, Cart Icon, Mobile Sticky Cart, Price, Price Discount, SKU, Inventory Label and Counter, Tabs, Related Products, Share, and more. Changing a variant updates price, SKU, stock, and image everywhere on the page."}]},{"type":"customHeading","content":[{"type":"text","text":"Two data modes","marks":[{"type":"bold"}]},{"type":"text","text":" "}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"CMS mode syncs products into Framer CMS with no API calls required. API mode fetches live data on demand. Switch anytime."}]},{"type":"customHeading","content":[{"type":"text","text":"Designed for designers ","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Toggleable animations (scroll reveal, tab cross fade, hover zoom), deep styling controls, sale badges, light and dark mode, and full responsiveness across desktop, tablet, and phone."}]},{"type":"customHeading","content":[{"type":"text","text":"Secure by design","marks":[{"type":"bold"}]},{"type":"text","text":" "}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Your Storefront token is never embedded in your published site. It is stored locally and used server-side through a secure proxy, with PCI handled by Shopify checkout."}]},{"type":"paragraph","content":[{"type":"text","text":"Setup requires a Shopify Storefront API access token (public token). In Shopify admin: Sales channels, Headless, Manage API access, Storefront API, Public access token."}]}]},"introduction":"Connect Framer to Shopify","slug":"shopifyconnect","author":{"framerUserId":"7e63332c-77d2-4e00-a6ca-d9c98c3d7dcf","name":"FeCommerce","slug":"fecommerce","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1522163/avatar-O3mD0A25QB3hEFuyWMXPGD4iqS1Dlf.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7e63332c-77d2-4e00-a6ca-d9c98c3d7dcf/4d20gpdp","metadata":{"tint":{"h":160,"s":75,"l":13},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7e63332c-77d2-4e00-a6ca-d9c98c3d7dcf/r1hmk495","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7e63332c-77d2-4e00-a6ca-d9c98c3d7dcf/dwzrgqqv","metadata":{"tint":{"h":180,"s":50,"l":6},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7e63332c-77d2-4e00-a6ca-d9c98c3d7dcf/gytjszb9","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-25T14:27:11.479Z","updatedAt":"2026-09-29T10:40:05.660Z","publishedAt":"2026-09-29T10:40:05.601Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"63os6qkygakve6yv9z9lph0ed","paid":false,"categories":[{"id":"c4868181-e303-4aac-8074-bd683d4debe8","name":"Ecommerce","slug":"ecommerce"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":46,"liked":false},"comments":{"count":5},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-25T14:27:11.515Z","updatedAt":"2026-06-25T14:27:11.515Z","reported":false}}],"$L5f"]

Suggested for you