By Mehdi Hassan
Can you use Shopify with Framer or Webflow?
You can use Shopify with Framer or Webflow by building marketing and campaign pages in the visual builder and linking or embedding products from your Shopify store. Shopify stays in charge of products, cart, checkout and apps. The builder handles pages where design freedom and launch speed matter more than commerce features.
This is the lightest way to get beyond theme limits. It doesn't replace your storefront, which is what full headless does, and it doesn't move your brand site, which is the bigger step covered in our guide to moving a brand site from Shopify to Webflow. It adds a fast lane for campaign pages next to a store that keeps working as it does today. Our hub on whether headless Shopify is worth it explains where this fits among the options.
Why do DTC brands build landing pages outside the Shopify theme?
DTC brands build landing pages outside the theme because campaigns move faster than theme development. A product launch, a creator collaboration or a paid social test often needs a page that looks nothing like the standard product template, and it needs it this week.
- Design freedom. Long-form story pages, scroll-driven launches and custom layouts are much easier in a visual builder than in theme sections.
- No developer queue. Marketers or designers publish pages themselves without touching the live theme.
- Safer experiments. A broken test page on a subdomain can't break the store or checkout.
- Cleaner paid traffic pages. Landing pages can drop the full store navigation, so the visitor sees one offer and one action.
The trade-off is a second platform to pay for and keep on-brand. If you launch one campaign a year, a custom theme template is simpler.
How does Shopify with Framer work in practice?
Shopify with Framer works through three connections: the domain, the path to cart, and tracking. Get those right and the shopper barely notices they've moved between two platforms.
Pick the domain
Point a subdomain such as go.brand.com or launch.brand.com at Framer or Webflow, and keep the store on your main domain in Shopify.
Match the brand
Recreate the store's header, fonts, colors and buttons in the builder, so the landing page and product page feel like one site.
Connect to the cart
Link calls to action to Shopify product pages, or embed Shopify's Buy Button so the page adds items to the real Shopify cart.
Wire up tracking
Use the same analytics property and ad pixels on both, enable cross-domain tracking and check that UTM parameters survive the click into Shopify.
Decide on indexing
Let evergreen pages be indexed. Set short-lived ad variants to noindex so they don't compete with your product pages in search.
Test the full journey
Click from an ad link to a completed test order on mobile, and confirm analytics records one session and one purchase.
Which hybrid setup should you choose?
Choose a subdomain unless you have a specific reason not to. It's the simplest setup to configure and the least fragile over time. The table compares the common options.
Setup | Effort | Good for | Trade-off |
|---|---|---|---|
Subdomain for campaign pages | Low | Most DTC brands | Pages live on a separate hostname |
Separate campaign domain | Low | One-off launches or collaborations | Builds no authority for your main domain |
Same domain via reverse proxy | High | Teams with engineering support | Complex, and fragile when either platform changes |
Theme landing template instead | Medium | Rare campaigns | Limited by theme sections |
Webflow and Framer can also sit side by side on one domain, though the same proxy caveats apply. For paid traffic, the subdomain's SEO trade-off barely matters, since those pages are judged on conversion rather than rankings.
Should you use Framer or Webflow for Shopify landing pages?
Use Framer if speed of design and launch is the priority and a small team builds the pages; use Webflow if you need a structured CMS for many similar pages and several editors. Both connect to Shopify the same way.
Pros
- Framer: very fast to design and publish, with strong animation tools
- Framer: a natural fit if your team already designs in Figma
- Webflow: a mature CMS for collections of campaign or product story pages
- Webflow: fine-grained control over classes, interactions and structure
Cons
- Framer: a lighter CMS with limits that matter for large page libraries
- Framer: per-locale and seat pricing to check if you sell in many markets
- Webflow: a steeper learning curve for marketers
- Webflow: plan and seat changes that are worth checking before you commit
Our comparison of the best landing page builders for SaaS covers Unbounce, Instapage, Framer and Webflow in more depth, and most of its reasoning applies to DTC campaign pages. If you're moving existing pages from Unbounce or Instapage, see our guide to moving landing pages to Framer or Webflow.
Hypothetical example: a skincare launch page
For example, suppose a skincare brand launches a new serum with a creator. The team designs a scroll-led story page in Figma, builds it in Framer on launch.brand.com, and embeds a Shopify Buy Button for the serum and a bundle. A second, shorter variant goes to paid social traffic and is set to noindex.
Shopify handles checkout, subscriptions and the reviews app as usual. After the campaign, the evergreen story page stays live and links to the product page, and the ad variant is retired with a redirect to the product.
How do you make hybrid landing pages convert?
Hybrid landing pages convert when they do one job: take a visitor from one ad or link to one product decision. The builder gives you freedom, but the basics of a strong landing page still decide the result.
- Match the headline to the ad or post that sent the visitor.
- Show the product, the price and the main proof early on the page.
- Keep one primary action, such as add to cart or shop the bundle, repeated down the page.
- Remove the full store navigation on paid traffic pages, and keep a small link back to the store.
- Watch page speed: heavy video and animation hurt mobile visitors most. Our guide to Core Web Vitals on Framer, Webflow and Next.js has the fixes.
Then test. Our guide to A/B testing landing pages explains how to run tests that produce real answers rather than noise. If your design starts in Figma, our guide to Figma to website builds covers the handoff to each builder.
When is the hybrid setup the wrong choice?
The hybrid setup is the wrong choice when your problem is the store itself, or when you rarely run campaigns. If product and collection pages are underperforming, a separate landing page builder won't fix them; a stronger theme and better product page copy will.
It's also the wrong choice when your team can't keep two platforms on-brand. Pages drift: an old campaign page with last year's logo hurts more than it helps. If your home page is the real issue, our guide to a homepage-only redesign may be a better starting point.
