Landing Page + Store: Pairing a Framer Site with Your Shopify Theme

The best way to run a landing page for a Shopify store is to split the job in two: build the marketing front end — the page that has to look sharp, load instantly, and convert cold traffic — in Framer, and let Shopify handle everything that touches money, inventory, and checkout. The two systems meet at a small, deliberate handoff: a Buy or Shop Now action on the Framer page that sends the visitor into Shopify's cart or checkout flow, or a product embed that pulls live price and availability from Shopify onto the Framer canvas. Get that handoff right and you get the best of both tools; get it wrong and you end up maintaining two half-built stores instead of one good one.

This guide walks through why this pairing works, the concrete integration options (Buy Buttons, product embeds, and full custom checkout links), the tracking and pixel setup you need so attribution survives the domain jump, and the decision points — like when a landing page belongs on Framer at all, versus when it should just be a fast page inside your Shopify theme itself.

Why Split a Landing Page From the Store in the First Place

Shopify themes are optimized for being a store: product pages, collections, cart, checkout, and the operational plumbing (taxes, shipping, discounts, inventory sync) that a marketing tool was never built to handle. Framer, by contrast, is optimized for being a page: fast visual iteration, pixel-precise layout, animation and interaction design, and a publishing workflow built for a designer to ship changes without touching code. Trying to make one tool do both jobs well is where most teams get stuck.

A Shopify theme's homepage or a custom template can absolutely serve as a landing page, and for a lot of stores that is the right call — one domain, one cart context, no handoff to manage. But there are recurring cases where a separate Framer front end earns its keep: a paid-traffic campaign landing page that needs to iterate daily without a developer, a pre-launch or waitlist page that exists before the store is even live, a brand or content site that sits in front of several products or even several stores, or a design team that wants full creative control over a hero section and interaction design that a Liquid theme's section schema was never built to express. If none of those apply, don't build a second system — just build the page well inside the theme, and lean on section-based customization rather than a wholesale platform split.

The Three Integration Patterns, in Order of Commitment

There is no single "connect Framer to Shopify" button — the right integration depends on how much of the buying decision you want to happen before the shopper ever leaves the landing page. In practice there are three patterns, and most stores land on the first or second.

1. The deep-linked Buy Button (lowest lift, most common)

The simplest and most durable pattern is a plain link or button on the Framer page that points to a Shopify cart permalink — a URL of the form your-store.myshopify.com/cart/{variant_id}:{quantity}, or, for multiple items, a comma-separated list of variant-id:quantity pairs. Clicking it drops the specified variants straight into the shopper's cart and lands them on the cart page, ready to check out. This requires zero apps, zero embedded scripts, and no iframe — it's just a link, which means it is also the pattern least likely to break when either platform ships an update. The tradeoff is that the shopper leaves the Framer domain immediately; there's no "add to cart, stay on this page" moment.

Variant IDs are visible in the Shopify admin (Products → variant → the ID in the URL) or via the Storefront API if you want to generate links dynamically. For a landing page selling one product with a couple of variants, hand-building two or three of these links is often genuinely the fastest path to launch — faster than installing and configuring an embed widget.

2. Embedded product data via the Storefront API

When the landing page needs to show live price, live availability, or a variant picker (color, size) directly on the Framer canvas — rather than sending shoppers to a Shopify product page to pick options — the next step up is pulling that data from Shopify's Storefront API (GraphQL) into a custom Framer code component. This is more setup: you need a Storefront API access token scoped read-only to products, a small fetch call inside a Framer code component, and a bit of state to hold the selected variant before firing the same cart-permalink redirect (or a Cart API mutation, for a true single-page add-to-cart). It's the right call when the landing page's whole job is to sell one hero product and you don't want a jarring jump to a differently-styled product page to finish that decision.

Keep the scope narrow. Don't try to replicate your full product catalog inside Framer — that duplicates a job Shopify already does well (variant logic, inventory, tax-inclusive pricing per region) and turns into a maintenance burden the moment you add a new variant or run out of stock. Use this pattern for a single hero SKU or a tight bundle, and send everything else — browsing, filtering, cross-sell — back to the Shopify theme.

3. Headless checkout via the Cart/Checkout APIs

The most involved pattern skips Shopify's hosted cart page entirely and drives the whole flow — add to cart, update quantity, apply a discount code, hand off to checkout — through Shopify's Cart API from custom code running inside Framer. This gets you a fully custom, on-brand cart experience with no visual seam, but it also means you now own state management, error handling (out-of-stock, invalid discount, currency selection) and edge cases that a theme's built-in cart drawer already solved for you. This is the right investment for a brand that's running paid traffic at real volume and where every visual break between ad and buy box measurably costs conversions — not the default choice for a first landing page. Most stores get 90% of the conversion benefit from pattern 1 or 2 at a fraction of the engineering cost.

Domains, Subdomains, and Why the Handoff Feels Seamless or Doesn't

A landing page that lives on a separate marketing domain (framer.app, or a vanity subdomain) and then redirects to checkout.yourstore.com will always create a visible domain change in the browser's address bar — that's expected and not a red flag to shoppers, since Shopify's own checkout has run on a distinct subdomain for years. What actually matters for trust and conversion is visual continuity: matching fonts, matching color tokens, and a matching header/logo treatment between the Framer page and the first thing the shopper sees after the click. If your Shopify theme's cart or checkout still shows default styling while the landing page is fully custom, that mismatch reads as unfinished, even if functionally everything works.

The cleanest setup, when your DNS allows it, is putting the Framer site on the store's root domain (yourstore.com) and Shopify on a shop or checkout. subdomain, or vice versa, so the whole experience feels like one property rather than a marketing site bolted onto a separate store. Framer's custom domain support and Shopify's domain settings both handle this without much friction — the main thing to get right is making sure SSL and DNS propagate before you point paid traffic at either domain.

Don't Lose Attribution in the Handoff

The single most common mistake in this setup isn't visual — it's tracking. The moment a shopper's browser navigates from a Framer domain to a Shopify domain, first-party cookies set on the Framer side don't automatically travel with them, and UTM parameters silently disappear unless you deliberately pass them through. If you're running paid acquisition into a Framer landing page, do these three things before launch, not after you notice a reporting gap:

• Append UTM parameters to every outbound link and cart permalink — Framer's own analytics won't tell Shopify (or your ad platform) which campaign drove a purchase unless the parameters ride along in the URL to checkout.
• Install the same conversion pixels on both properties — a Meta or Google Ads pixel firing only on the Framer landing page will register page views and clicks but never see the actual purchase event, which happens on Shopify's checkout and order-status pages.
• Use server-side or first-party tracking where you can — Shopify's own Web Pixels and checkout-extensibility APIs are the more durable path for capturing purchase events now that browser cookie restrictions keep tightening; don't rely solely on client-side pixels sitting on a different domain than the conversion event.

Test the full loop — ad click through to a completed test order — before you spend real budget on it. It's a fast way to catch a broken UTM chain or a pixel that never fires, and it's much cheaper to catch in a five-minute test order than in a week of unattributed ad spend.

Where This Is Headed: AI Design-to-Code and the Fading Line Between "Page Builder" and "Storefront"

Tools like Framer already compile visual design into real, deployable front-end code rather than a proprietary rendering format, which is part of why pairing it with Shopify works as well as it does — the output is closer to standard web infrastructure than a walled-garden page builder. That direction is accelerating: AI design-to-code tooling is getting good enough that the gap between "a designer builds a landing page in a visual tool" and "a developer hand-codes a Next.js page from a Figma file" is narrowing fast, and increasingly the same design source can plausibly drive both. Headless commerce architectures — a decoupled front end (Next.js or otherwise) talking to Shopify or Medusa purely through APIs — are the logical next step past a Framer-to-Shopify handoff for teams that want full control over every pixel and every interaction without giving up commerce infrastructure that already works.

We build in that direction at Polo Themes today mainly through design, not code: our Figma UI kits are built as clean, componentized source files that translate well whether the end target is a Shopify theme, a Framer rebuild, or a fully custom front end down the line. If your team is exploring a Framer landing page now and a more custom headless build later, starting from a well-structured design system — rather than a one-off Framer layout with no reusable component logic behind it — will save real time on that eventual migration, whatever front end you land on.

A Practical Checklist Before You Launch

Before sending paid traffic or a launch announcement at a Framer-to-Shopify landing page, run through this list. Most conversion problems in this setup come from one of these being skipped, not from the tools themselves.

1. Confirm variant IDs in your cart permalinks are correct and haven't drifted after a product edit — a mismatched ID silently adds the wrong item, or nothing, to the cart.
2. Match typography, spacing, and color tokens between the Framer page and the Shopify cart/checkout so the handoff doesn't feel like two different brands.
3. Pass UTM parameters through every outbound link, not just the primary CTA — footer links and secondary buttons leak attribution just as easily.
4. Install and test conversion pixels on both domains, and place a real test order to confirm the purchase event actually fires.
5. Set up a custom domain (or matching subdomain scheme) so the URL change at handoff reads as one property rather than a redirect to somewhere else entirely.
6. Confirm mobile behavior specifically — test the full flow on an actual phone, since animation-heavy Framer pages and Shopify's mobile checkout each have their own performance quirks that don't always show up on desktop.
7. Decide up front whether out-of-stock and sold-out states are handled — a Buy Button linking to a variant that just went out of stock needs a fallback, not a broken cart add.

Frequently Asked Questions

Do I need a Shopify app to connect Framer to my store?

No. The simplest and most durable integration — a cart permalink Buy Button — is just a link and requires no app at all. Pulling live product data onto the Framer canvas uses Shopify's Storefront API directly, which also doesn't require a listed app, just an API access token generated from your store admin.

Will shoppers notice the domain change from Framer to Shopify?

Technically yes, but it rarely hurts conversion on its own — Shopify's checkout has run on a distinct subdomain for essentially every store for years, and shoppers are used to it. What matters more is visual consistency: matching fonts, colors, and branding across the handoff so it reads as one experience rather than two disconnected sites.

Should my landing page live in Framer or just be a custom template in my Shopify theme?

If you already have a Shopify theme with flexible, section-based customization, a fast in-theme landing page is often simpler — one domain, one cart, no handoff to maintain. Reach for a separate Framer build when you need rapid, no-developer iteration for paid campaigns, a pre-launch or waitlist page ahead of the store going live, or design control beyond what a theme's section schema supports.

How do I stop losing ad attribution when shoppers cross from Framer to Shopify?

Append UTM parameters to every outbound link and cart permalink, install the same conversion pixels on both domains, and lean on Shopify's native Web Pixels or checkout-extensibility tracking rather than relying only on client-side pixels sitting on the Framer domain. Always place a real test order end to end before trusting the setup with ad spend.