Shopify to Webflow: Migrating Your Marketing Site Without Touching Ecommerce

A growing number of B2B SaaS and DTC brands are running into the same structural problem. Their Shopify store handles commerce perfectly well, but their marketing site, the homepage, the about page, the blog, the product feature pages, the SEO content hub, was either built inside Shopify or bolted onto it as an afterthought. The result is a marketing experience constrained by a platform that was never designed for it.

The Shopify to Webflow migration pattern this article covers is not a full-store migration. It is a surgical split: extract the marketing layer from Shopify, rebuild it in Webflow, preserve every SEO signal in the process, and keep the Shopify store running without interruption. If you have been putting this off because it feels technically risky, this guide walks through the architecture, the sequencing, and the precise steps required to do it correctly.

‍

Shopify to Webflow: Why Marketing Teams Outgrow Shopify's Content Infrastructure

Shopify was built to sell products. Its CMS, templating system, and page editor reflect that priority. For brands in their early growth stage, housing the marketing site inside Shopify makes practical sense: one platform, one deployment, one DNS record. But at scale, the limitations compound.

Content teams cannot build flexible landing pages without developer intervention or third-party apps like PageFly. Blog infrastructure is minimal and structurally weak for topical SEO. Schema markup, custom components, conditional visibility, and structured content relationships, all standard in Webflow, require workarounds in Shopify that accumulate technical debt over time.

More critically, Shopify's Liquid templating is not designed for the kind of performance-optimized, conversion-tested marketing experiences that CMOs at growth-stage SaaS and DTC companies expect from their site. When the marketing site becomes the primary growth channel and the store is simply the transaction layer, Shopify's architecture works against the team running it.

The pattern that emerges is consistent: brands want Webflow for the marketing surface and want to keep Shopify for the commerce surface. The question is how to execute the split without losing rankings, breaking integrations, or creating a confusing dual-platform maintenance burden.

‍

The Core Architecture Decision: Subdomain vs. Subdirectory

Before a single page is moved, the most consequential decision in this migration is where the two platforms will live relative to each other. There are two viable options, and neither is universally correct.

Subdomain Architecture

In subdomain architecture, the Webflow marketing site lives at www.yourdomain.com (or yourdomain.com), and the Shopify store is served from a subdomain such as store.yourdomain.com or shop.yourdomain.com.

This is the cleanest technical separation. Webflow handles DNS for the root domain. Shopify gets its own subdomain with its own SSL certificate and routing. There is no routing logic required to direct traffic between platforms because they exist at structurally separate URLs.

The tradeoff is subdomain authority consolidation. Google treats subdomains as distinct entities from the root domain in some contexts, though the practical impact on well-established domains with strong link profiles is typically minimal. For brands where the store has historically received significant backlinks at yourdomain.com/collections/, moving those paths to store.yourdomain.com/collections/ without proper redirect planning can disrupt link equity.

Subdirectory Architecture (Reverse Proxy)

In subdirectory architecture, the Webflow site lives at yourdomain.com and the Shopify store is served from a subdirectory path such as yourdomain.com/shop/ or yourdomain.com/store/, using a reverse proxy layer (typically via Cloudflare or a custom edge configuration) to route requests transparently.

This preserves root-domain authority consolidation and is preferred from a pure SEO standpoint for established stores with significant organic traffic at non-root URLs. However, it introduces meaningful operational complexity. Reverse proxy configurations require careful handling of cookies, session tokens, and checkout flow headers. Errors at the proxy layer can create checkout failures, authentication bugs, or content duplication that is difficult to diagnose in production.

Comparison Table: Subdomain vs. Subdirectory for Shopify + Webflow Split

‍

‍

For the majority of B2B SaaS brands and most DTC companies that built their marketing site inside Shopify, the subdomain approach is the correct default. It is faster to implement, lower risk at the infrastructure level, and sufficient from an SEO standpoint provided redirects are handled correctly.

‍

How to Execute the Shopify to Webflow Migration Step by Step

How to Split a Shopify Marketing Site and Move It to Webflow? A Shopify to Webflow marketing site migration involves four phases: auditing which pages belong to the marketing layer versus the store, rebuilding those pages in Webflow with structural and semantic parity, configuring DNS to serve the Webflow site at the root domain while routing the Shopify store to a subdomain, and implementing 301 redirects for any URL paths that change in the process. The Shopify store continues operating without interruption throughout, provided the subdomain or reverse proxy is configured before the DNS cutover.

The execution sequence matters more than most teams expect. Doing these steps out of order is the primary reason migrations cause ranking drops or store downtime.

1. Audit the Shopify marketing layer. Crawl the current Shopify site using a tool like Screaming Frog or Semrush Site Audit. Identify every URL that belongs to the marketing surface: homepage, about, features/solutions pages, blog posts, landing pages, and any content that does not require the Shopify cart or checkout. Export the full URL list alongside indexed status, inbound internal links, and any pages with external backlinks.
2. Identify store-only URLs and exclude them. Any URL under /collections/, /products/, /cart/, /checkout/, and /account/ stays on Shopify. These are not being migrated. Flag them clearly so they are excluded from the redirect mapping.
3. Build the Webflow site in staging. Rebuild the marketing layer in Webflow on a staging subdomain (Webflow provides .webflow.io domains for staging). Maintain URL structure parity wherever possible. If the blog was at yourdomain.com/blogs/news/post-slug in Shopify, evaluate whether to maintain that path or consolidate to yourdomain.com/blog/post-slug, and map redirects accordingly if the path changes.
4. Set up the subdomain on Shopify. Before touching DNS, configure the Shopify store to serve from store.yourdomain.com. In Shopify Admin, add the custom domain store.yourdomain.com and verify DNS records. Test that the store is fully functional at the subdomain before making any changes to the root domain.
5. Configure Webflow DNS for the root domain. Once the Shopify store is confirmed functional at its subdomain, point the root domain to Webflow's servers. DNS propagation typically completes within 24–48 hours.
6. Implement 301 redirects for changed URL paths. For any marketing page URL that changed structure during the rebuild, configure 301 redirects in Webflow's Redirect Manager. Every redirect must be verified post-go-live. According to Google Search Central, 301 redirects pass link signals to the destination URL, making proper redirect mapping essential for preserving accumulated page authority.
7. Update internal links throughout the Webflow site. After go-live, audit all internal links across both the Webflow marketing site and the Shopify store. Store pages should link to the marketing site at yourdomain.com, and any marketing content linking to the store should point to store.yourdomain.com/collections/ or the appropriate subdomain path.
8. Submit updated sitemaps to Google Search Console. Submit a new XML sitemap from Webflow to Google Search Console and request indexing for the key marketing pages. Monitor coverage errors and any unexpected 404s in the days following go-live.

‍

Preserving SEO During the Marketing Site Handoff

SEO preservation during a platform migration is not passive. It requires deliberate action at each phase.

The pages most at risk are those with accumulated backlinks and organic rankings on the current Shopify domain. Homepages, core feature pages, and blog posts with aged content tend to carry the most link equity. Any structural change to those URLs without a corresponding 301 redirect will result in ranking loss.

Beyond redirect mapping, there are several elements that Shopify's default templating often fails to expose correctly and that must be explicitly configured in Webflow:

• Canonical tags: Shopify occasionally generates duplicate canonical URLs, particularly for collection pages and paginated content. Webflow gives you direct control over canonical tag values at the page level.
• Meta robots: Shopify's theme architecture can inadvertently noindex pages. Audit this during the migration and configure indexing rules explicitly in Webflow's page settings.
• Structured data / schema markup: Shopify has limited native schema support outside of product schema. Webflow allows custom JSON-LD injection at both the site level and the page level, enabling proper implementation of Organization, Article, BreadcrumbList, and FAQPage schema on marketing pages.
• Page speed and Core Web Vitals: Webflow generates clean, optimized HTML and CSS by default. Marketing pages rebuilt in Webflow typically show measurable improvements in Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) versus their Shopify equivalents, particularly for pages that relied on third-party page builder apps.

For brands with an active content program, the blog migration requires particular care. Preserving publish dates, author metadata, and structured article schema in Webflow ensures that accumulated content signals transfer correctly. This is covered in detail in the Broworks 2026 Migration to Webflow Playbook, which includes a content migration checklist for high-volume blog transfers.

‍

Reconnecting HubSpot and Marketing Tools in Webflow

For B2B SaaS brands in particular, the marketing site is rarely just a content surface. It is an instrumented layer connected to HubSpot (or a comparable CRM/MAP), Google Tag Manager, analytics platforms, and often live chat or ABM tools like Clearbit, Segment, or 6sense.

Each of these integrations needs to be rebuilt or reconfigured in Webflow. The good news is that Webflow handles third-party script injection cleanly through its Project Settings > Custom Code section, as well as at the page level for scripts that should only load on specific pages.

The integrations that require the most attention in a Shopify to Webflow migration:

• HubSpot forms and tracking: HubSpot's tracking code installs cleanly in Webflow's global header. HubSpot native forms can either be embedded via the HubSpot embed code or, for more design control, replaced with Webflow's native forms connected to HubSpot via a Make.com or Zapier workflow, or through HubSpot's Forms API. Both approaches are production-grade. The native embed approach is faster to implement; the API-connected approach gives full design control over form styling and behavior within Webflow.
• Google Analytics 4 and Tag Manager: GTM installs in the <head> and <body> via Webflow's custom code settings. All existing triggers and tags configured in GTM remain functional without modification. Verify that GA4 data streams are correctly attributed to the new domain after DNS cutover, and confirm that cross-domain tracking is configured if you want session continuity tracked as users move from the marketing site to the Shopify store subdomain.
• Conversion tracking: Any conversion events that were firing on Shopify marketing pages (form submissions, demo bookings, CTA clicks) need to be remapped in GTM or the relevant ad platforms. Do not assume GTM tags will fire correctly after migration without testing each trigger against the new Webflow page structure.

How HubSpot Works After a Shopify to Webflow Migration? HubSpot integrates with Webflow through two primary methods: the HubSpot tracking code installed in Webflow's global custom code settings, and form data sent to HubSpot via native embed or API-connected workflows. After a Shopify to Webflow migration, HubSpot tracking continues without interruption once the tracking script is correctly placed in the Webflow site header. Forms that were previously handling lead capture on Shopify marketing pages need to be rebuilt or re-embedded in Webflow, with form submission notifications and CRM field mappings reconfigured in HubSpot to match the new form identifiers.

The Broworks Webflow development service includes integration architecture planning as part of migration engagements, covering HubSpot, analytics stacks, and marketing automation tooling.

‍

ROI and What Changes After the Split

The business case for this migration is not theoretical. It comes down to what the marketing team can now do independently that they could not do before.

In Webflow, a marketing director can:

• Build and publish a new landing page without developer involvement
• A/B test page layouts using Webflow's native CMS and Optimize integrations
• Update CMS-driven content (case studies, blog posts, feature comparisons) through Webflow's Editor without touching the codebase
• Implement schema markup changes for AEO optimization without a developer pushing a Liquid template update
• Operate independently from commerce sprints, platform updates, and Shopify app conflicts

The operational independence alone tends to justify the migration cost within the first two quarters for brands running active campaign programs. Beyond operational velocity, the structural improvements to Core Web Vitals on marketing pages translate to measurable improvements in organic click-through rates and Quality Score for paid campaigns, reducing cost per acquisition on performance channels.

For teams investing in LLM and AI search visibility, Webflow's clean semantic HTML, flexible JSON-LD injection, and AEO-ready content structure create a materially stronger foundation than Shopify's marketing layer, where schema and entity structure are significantly constrained by the platform.

‍

Common Mistakes That Break This Migration

Understanding where this pattern fails is as important as understanding how to execute it correctly.

• Cutting over DNS before the Shopify subdomain is confirmed live: This is the most common cause of store downtime during this migration. The Shopify store must be fully operational on its new subdomain before the root domain is pointed to Webflow.
• Migrating blog content without mapping redirects: Blog posts with changed URL slugs that are not redirected correctly will lose their indexed status and any backlinks pointing to the old URL. This is recoverable but takes three to six months for rankings to restabilize.
• Forgetting to update the Shopify store's internal links: After the split, the Shopify store's header navigation, footer links, and any blog content that lived in Shopify and linked to marketing pages need to point to the new subdomain-aware URLs.
• Not configuring cross-domain tracking in GA4: Sessions that flow from yourdomain.com (Webflow) to store.yourdomain.com (Shopify) will be tracked as separate sessions unless cross-domain measurement is configured explicitly in GA4. This breaks attribution reporting for any campaigns that use the marketing site as a landing page and the store as the conversion point.
• Rebuilding pages without auditing canonical and noindex states first: Shopify pages that were noindexed or had non-canonical tags should not be migrated and indexed in Webflow unless the intent is to deliberately activate those pages. Always confirm which Shopify marketing pages are currently indexed before the migration begins.

What Are the Biggest SEO Risks in a Shopify to Webflow Marketing Site Migration? The primary SEO risks in a Shopify to Webflow marketing site migration are URL structure changes without 301 redirects, DNS cutover sequencing errors that cause temporary downtime, and failure to preserve meta tags, canonical configurations, and structured data on migrated pages. Brands with active blog programs face additional risk from post slug changes that break inbound links. These risks are manageable with a structured pre-migration audit, a complete redirect map, and a staged go-live sequence that keeps the Shopify store on its subdomain before the root domain DNS is transferred to Webflow.

For a structured approach to migration risk management, the Broworks WordPress to Webflow migration methodology and the Webflow migration resource library apply directly to Shopify-origin migrations at the SEO preservation and redirect strategy layers.