Framer and Shopify: What Actually Works (and What Happens If You Export)

"Framer Shopify" turns up two different questions, and most answers only cover one. First: can Framer talk to a Shopify store at all? Second: if you later convert or export that Framer site, does the Shopify part keep working?

There's no native Shopify integration in Framer

Framer doesn't have a first-party Shopify app the way it has native CMS Collections. The common workarounds people actually use:

• Shopify's Buy Button. Shopify lets you generate an embeddable JavaScript snippet for a single product or a small catalog — you drop it into Framer's Embed/Code component and it renders a self-contained add-to-cart widget that talks directly to your Shopify store's API.
• Linking out. Keep the marketing site on Framer and the actual store on a separate shop.yourdomain.com running Shopify natively — simplest option if you don't need product listings inline on marketing pages.
• Framer's own e-commerce blocks. Framer has its own lightweight commerce components for simple stores, which is a different, Framer-native system — not Shopify at all, and out of scope here.

For anything beyond a handful of products, the Buy Button embed is what most people end up with, since it's the one path that keeps your existing Shopify inventory, checkout, and payment processing untouched.

What happens when you convert a Framer site with a Shopify embed

This is the part most people can't find an answer to, so here's what actually happens based on how the conversion pipeline works: a Shopify Buy Button embed is a plain, self-hosted <script> tag rendering into a container element — not part of Framer's own compiled runtime. Both conversion modes here specifically target Framer's own bundle:

• Hybrid mode strips <script type="module"> and Framer's own data-framer-bundle scripts, plus a short list of named analytics trackers (Google Analytics, GTM, Hotjar, Meta Pixel, and similar). A Shopify embed script doesn't match either of those — it isn't Framer's runtime and it isn't a tracker — so it isn't targeted for removal.
• Pure Next.js mode keeps Framer's runtime fully intact by design, so nothing in that pipeline touches third-party embeds either.

In practice, that means a Shopify Buy Button embedded via Framer's Embed component should keep functioning after conversion in both modes, since neither pipeline does a blanket "remove all third-party scripts" pass — only Framer's own bundle (Hybrid) or nothing at all (Pure Next.js). We haven't run every possible Shopify embed configuration through the pipeline, so if yours does something unusual (a custom checkout redirect, a script that depends on Framer's own JS being present, etc.), test the converted output before you fully cut over — the live preview lets you check this before downloading or deploying anything.

The honest tradeoff

If your Shopify integration is central to the site — a real catalog, cart, and checkout, not just a couple of embedded buttons — converting away from Framer doesn't remove that complexity, it just moves where it lives. The Shopify side of things works the same regardless of what serves your HTML. What conversion actually changes is everything around the embed: page weight, Lighthouse scores, and whether you're paying an ongoing Framer plan fee to serve pages that don't need Framer's runtime at all.

See the Hybrid vs Pure Next.js breakdown for which mode fits your setup, or convert a site now to check your specific Shopify embed in the live preview before committing to anything.