Shopify + Framer: Storefront Theme + Marketing Site Architecture

A Shopify-plus-Framer architecture uses Shopify for what it is genuinely good at — checkout, inventory, orders, and product pages — and Framer for what it is genuinely good at: fast-shipping marketing pages, campaign landing pages, and a brand site that does not have to route every content change through a theme editor. The split works well when the two properties share a domain strategy, a consistent design language, and a single source of truth for analytics. It works badly when teams treat it as two unrelated websites that happen to link to each other.

This guide walks through when the split makes sense, how to divide pages between the two systems, the domain and linking setup that keeps it feeling like one brand, and the tracking and design details that most teams get wrong the first time.

Why Split a Storefront From a Marketing Site At All

Shopify themes are optimized for commerce mechanics: cart state, variant selection, shipping calculation, discount codes, and checkout. That is real, hard-won functionality, and Shopify's Online Store 2.0 architecture (Liquid sections, JSON templates, app blocks) is a mature system for building product and collection pages quickly. But that same architecture is a comparatively heavy way to build a fast-moving marketing site — a homepage that changes weekly for a campaign, a set of comparison landing pages for paid acquisition, or a brand story page with unusual layout needs. Editing sections in the Shopify theme editor for that kind of content works, but it is slower to iterate on than a visual-first builder, and every marketing experiment risks touching the same theme codebase that runs checkout.

Framer, by contrast, is built around exactly the opposite priorities: fast visual editing, real CMS collections for blog and landing-page content, built-in animation and interaction primitives, and a publish flow that does not require a developer for most content changes. It has no concept of a cart or checkout, and it should not try to have one. The two tools are not competitors so much as they are specialists — which is precisely why splitting responsibilities along those lines, rather than picking one tool and forcing it to do both jobs, tends to produce a faster site overall.

This is not a new pattern. Composable and headless commerce architectures have separated "content" from "commerce" for years — that is the whole premise behind headless setups that pair a commerce engine with a dedicated frontend or page builder. A Shopify-plus-Framer split is a lightweight, no-code-friendly version of the same idea: instead of a custom Next.js frontend consuming the Shopify Storefront API, you keep Shopify's own hosted storefront for commerce pages and use Framer purely for the pages that do not need commerce logic at all.

Step 1: Decide Which Pages Live Where

The single most important decision in this architecture is where the boundary sits. Get this wrong and you end up either duplicating commerce logic in Framer (a bad idea — Framer has no reliable way to run a real cart or checkout) or dragging every marketing experiment through Shopify's theme editor (slow, and risky for a system that also runs live checkout).

• Keep on Shopify: home page if it needs live product data, all product detail pages, all collection/category pages, cart, checkout, account/order-history pages, and any page that reads inventory or pricing in real time.
• Move to Framer: top-of-funnel landing pages for ad campaigns, comparison and "best X" content pages, brand/about/story pages, careers pages, press pages, and — if your Shopify blog is not serving you well — a CMS-driven blog with more flexible layout than Shopify's native blog templates.
• Judgment calls: the marketing homepage. Many stores keep the homepage on Shopify because it is the highest-value place to show live bestsellers and inventory-aware banners; others run a Framer homepage that hard-links into Shopify collections and accept that "shop now" is one click deeper than the domain root.

A useful test: if a page needs to reflect real-time inventory, pricing, or a cart state, it belongs on Shopify. If a page's job is entirely about persuasion, storytelling, or SEO content and its calls to action simply point at Shopify pages, it is a strong candidate for Framer.

Step 2: Domain and Subdomain Strategy

The most common setup is to keep the root domain on Framer for the marketing site, and point a subdomain — typically shop.yourdomain.com — at the Shopify storefront. This keeps the marketing site fast and flexible at the domain root (good for SEO on brand and informational content) while giving commerce its own clearly namespaced home. The alternative — root domain on Shopify, marketing pages on a subdomain like site.yourdomain.com or pages.yourdomain.com — also works, and tends to fit stores where the storefront itself is the primary entry point and marketing content is secondary.

Whichever direction you choose, be deliberate about it early, because retrofitting a subdomain split after a site has been indexed for months means dealing with redirects and a temporary ranking dip. Set up 301 redirects for any URL that moves between the two systems, and make sure both DNS records and each platform's domain-verification settings (SSL, primary domain settings in Shopify, custom domain settings in Framer) are configured before you cut over, not after.

Cross-domain or cross-subdomain sessions are the other detail people miss. If your Framer marketing site is going to run first-party analytics and attribution, and Shopify checkout completes the funnel, you need consistent UTM parameter passthrough and a shared analytics identity across the domain boundary — more on that below.

Step 3: Keep the Design System Actually Shared

The fastest way to make a Shopify-plus-Framer split feel like two different companies is to let the two properties drift on typography, spacing, color, and component style. Treat this the same way you would treat a design system spanning any two codebases: define the tokens once — brand colors, type scale, spacing scale, button and card styles — and apply them consistently in both the Shopify theme's settings/CSS and the Framer project's style presets. Framer's shared style and component library features make this easier than it sounds; the discipline is making sure whoever owns each property actually pulls from the same source rather than eyeballing a match.

This is also where starting from a well-structured Shopify theme pays off on the commerce side of the split. A theme built around clear section variants and a disciplined color and type system is much easier to keep visually aligned with a separate marketing site than a theme that has accumulated ad hoc customizations. If you are building or rebuilding the Shopify side of this architecture, it is worth starting from a theme designed with that discipline in mind rather than retrofitting consistency onto something patched together over time — see our Shopify theme catalog for examples of themes built around a clean, consistent section and token system.

Step 4: Wire Up Navigation and Calls to Action Correctly

Every "Shop now" button on the Framer marketing site should link directly to the correct Shopify collection or product page, not to a generic homepage that makes the shopper hunt for what brought them there. If a landing page is built around a specific product line, link straight into that collection with any relevant filters pre-applied. Conversely, if the Shopify storefront has a footer or header link back to marketing content (a "Our Story" or "Blog" link, for instance), make sure that points at the Framer domain and that the visual transition — header, footer, color scheme — does not create a jarring "did I leave the site" moment.

Global navigation is the trickiest part to get right, because you are effectively maintaining the same header and footer in two different systems. Some teams accept minor drift here and keep navigation simple on both sides; others build the header as a lightweight embed or keep it deliberately minimal on the Framer side (logo, a handful of links, a prominent shop CTA) precisely so there is less surface area to keep in sync.

Step 5: Unify Tracking and Attribution

Splitting the frontend across two platforms only becomes a problem for measurement if you let it. Install the same analytics tool (GA4, a product analytics tool, or a marketing pixel) on both properties, and make sure UTM parameters and any first-party click IDs survive the handoff from Framer to Shopify — most ad platforms' pixels will fire correctly on both sides as long as the base pixel snippet is installed on each, but session-level attribution (which landing page drove which sale) depends on your analytics tool correctly stitching a visitor across the domain or subdomain boundary. Test this explicitly: click through from a Framer landing page to a Shopify product page and confirm your analytics tool shows one continuous session rather than two disconnected ones.

Also confirm that conversion tracking pixels (ad platform pixels, in particular) are configured correctly on the Shopify checkout and order-confirmation pages specifically — this is standard Shopify pixel setup and is unaffected by the marketing site living elsewhere, but it is worth double-checking after any domain change, since a moved root domain can occasionally require re-verifying pixel domain settings on some ad platforms.

Where This Architecture Breaks Down

The split is not free, and it is worth being honest about the costs before committing to it. You now maintain two publishing workflows, two sets of design tokens to keep synchronized, and two places content editors need training on. For a small store with a simple brand story and a handful of marketing pages, running everything inside a well-built Shopify theme is often genuinely simpler — there is no domain-boundary complexity, no attribution stitching to verify, and one team can own the whole site. The Shopify-plus-Framer split earns its complexity when the marketing surface is large or fast-moving enough (frequent campaign pages, a heavily-published blog, a content team that wants to publish without touching theme code) that the iteration speed gain outweighs the coordination cost.

It is also worth being clear-eyed about SEO. Splitting a domain into a root marketing site and a shop subdomain (or vice versa) does not hurt SEO by itself — search engines handle subdomains and well-implemented redirects fine — but a poorly executed migration, with broken internal links or missing redirects, absolutely can. Plan the URL structure before launch, not after.

A Note on Where This Is Heading

The Shopify-plus-Framer pattern sits on a spectrum. At one end is a single Shopify theme doing everything. At the other end is a fully headless build — a custom Next.js frontend consuming the Shopify Storefront API for commerce data, with total control over rendering, performance, and design at the cost of needing an engineering team to build and maintain it. Framer-plus-Shopify is a practical middle point: most of the design flexibility and publishing speed of a headless build, without the engineering lift, because you are using two mature hosted products rather than building a custom frontend from scratch. As AI-assisted, design-to-code tooling matures, expect that middle ground to keep getting easier to occupy — turning a Figma design directly into production-ready sections is already a realistic workflow, and it is part of why we build our Figma UI kits (see our Figma kit catalog) as thorough, developer-ready source files rather than static mockups: they hold up whether the destination is a Shopify theme, a Framer site, or eventually a custom frontend.

Frequently Asked Questions

Should the root domain be Shopify or Framer?

Either works. Put the marketing site at the root domain if brand and content pages are your primary SEO and acquisition surface; put the storefront at the root domain if the shop itself is the main entry point and marketing content is secondary. Decide early — moving it later means managing redirects and a temporary ranking dip.

Can Framer handle checkout or cart functionality?

Not reliably, and it should not be asked to. Framer is a marketing and content publishing tool, not a commerce engine. Keep cart, checkout, and any page that reads live inventory or pricing on Shopify, and use Framer purely for pages whose job is persuasion, storytelling, or SEO content.

Will splitting the frontend hurt SEO?

Not inherently. Search engines handle subdomains and cross-domain link structures without penalty. The risk is entirely in execution — missing redirects, broken internal links, or duplicate content across the two properties during a migration. Plan the URL and redirect structure before launch.

Is this the same thing as headless commerce?

Not quite. True headless commerce means a custom frontend (often Next.js) consuming Shopify's Storefront API directly, with full control over every page's rendering. A Shopify-plus-Framer split keeps Shopify's own hosted storefront for commerce and simply adds a separate, purpose-built tool for marketing pages — it is a lighter-weight way to get some of headless commerce's flexibility without the engineering investment of a fully custom build.