Shopify + Framer: The Hybrid Setup That Actually Works

Shopify is excellent at commerce and mediocre at brand storytelling. Framer is the reverse. The hybrid setup — Framer on the marketing surface, Shopify handling catalogue and checkout — works genuinely well, but only if you are disciplined about which system owns what. Most failures of this architecture are ownership failures, not technical ones.

TL;DR

• Framer owns the brand and content surface. Shopify owns catalogue, cart, and checkout.

• Never duplicate product data into Framer's CMS. Link out, or pull it — do not maintain it twice.

• Decide your domain split early: subdomain (shop.brand.com) is simplest, subdirectory needs a proxy.

• Analytics and consent need deliberate wiring across two domains or you will lose attribution at the handoff.

• This setup is wrong for you if the store is the site. Then just use Shopify well.

What each system should own

The line that works in practice is transactional versus narrative. Anything that touches inventory, price, variants, cart state, or payment belongs to Shopify — it is a system of record and it should be the only one. Anything that explains, persuades, or ranks belongs to Framer: homepage, brand story, editorial content, lookbooks, landing pages for campaigns, and the collection-level storytelling that Shopify themes handle poorly.

The grey area is product pages. My default is that they stay on Shopify, because product data changes constantly and duplication is how sites end up showing a price that no longer exists.

The duplication trap

The tempting move is to rebuild product pages in Framer for design control, pulling product data in manually or on a schedule. This works beautifully for two months and then someone changes a price in Shopify and forgets the Framer side. Now your marketing site advertises a price your checkout will not honour, which is a customer service problem and, in some jurisdictions, a legal one.

If you genuinely need designed product pages, pull the data live from the Shopify Storefront API through a code component rather than copying it. One source of truth, always.

In practice, "pull it live" means a sync plugin like Framer Commerce or Frameship, not a hand-rolled API call — Framer has no built-in Shopify connector. Worth knowing before you rely on one: these plugins sync on a manual trigger, not continuously. You choose which fields to sync, click Sync, and Framer's CMS updates. If you delete a product in Shopify, it stays visible in your Framer CMS until the next Sync — it does not disappear the moment you delete it upstream. Live inventory and variant counts update automatically between syncs, but the product list itself does not. Build your process around that: someone needs to own hitting Sync after a catalogue change, or your marketing site will show a product that no longer exists for however long the gap is.

Domain architecture: subdomain or subdirectory

Subdomain — shop.brand.com

Framer serves brand.com, Shopify serves shop.brand.com. Simple, robust, and no proxy required. The cost is that the two are separate origins for analytics and cookies, so cross-domain tracking needs explicit setup. For most businesses this is the right trade.

Subdirectory — brand.com/shop

Better for SEO consolidation in theory, but Shopify does not natively serve from a subdirectory of a domain it does not control. You need a reverse proxy in front of both, which means an engineer and an ongoing operational dependency. Worth it at scale, overkill for most.

Wiring analytics across the handoff

The failure mode is that a visitor reads three Framer pages, clicks through to Shopify, buys, and the conversion gets attributed to "direct". Fix it deliberately:

• Configure cross-domain measurement so the client ID persists across the handoff.

• Make sure your consent state carries across too, or you will gate tracking on one side and not the other.

• Tag outbound links from Framer to Shopify so you can see the handoff volume separately from organic entries to the store.

• Check the checkout side specifically — Shopify's own analytics and your GA4 property will disagree, and you need to know by how much.

SEO considerations

Two properties means two sets of technical decisions. Keep canonicals honest — if a product is described on both sides, one of them is canonical and it is almost always Shopify. Submit both sitemaps. And be deliberate about which system owns category-level content: a Framer collection page that ranks and links into Shopify collections usually outperforms letting Shopify's thin collection pages fight for the term.

When not to do this

If your business is the store — a hundred SKUs, most traffic landing on product pages, marketing content minimal — the hybrid adds complexity for nothing. Use Shopify with a good theme and spend the saved effort on product photography. The hybrid earns its keep when the brand surface is doing real acquisition work that Shopify themes cannot support.

What to do next

Decide the ownership line and the domain split before anyone designs anything, because both are expensive to change later. The Shopify marketing site page covers how I set these up, or book a call and we can work out whether the hybrid is actually right for your catalogue.