Shopify to Headless Migration: Next.js, Hydrogen & Remix Guide

Migrating a Shopify store to headless commerce means keeping Shopify's backend for products, inventory, and checkout. You replace the Liquid storefront with a custom frontend built on the Storefront API. Next.js suits complex content needs. Hydrogen suits teams who want Shopify's native tooling. React Router 7 suits teams already using that ecosystem.

Key takeaways

• Choose Next.js for complex content needs and CMS pairing, Hydrogen for native Shopify tooling and Oxygen hosting, or React Router 7 if your team already works in that ecosystem.
• Map every webhook, cart rule, and metafield before writing code. Cart logic and app replacements cause most missed budgets and timelines.
• Protect SEO with a full URL mapping, 301 redirects, structured data on every page type, and an updated sitemap submitted to Search Console at launch.
• Zero-downtime cutover works through blue-green DNS switching or a gradual reverse-proxy rollout. The proxy approach suits higher-revenue stores.
• Expect 8-32 weeks and $20,000-$300,000+ in build cost depending on store complexity, plus ongoing Shopify Plus, hosting, and CMS fees.

Updated 15 August 2026: sources added, experience claims checked against our project record, summary added.

Why Migrate from Shopify to Headless?

Standard Shopify works well for most stores. If you do under $2M a year in revenue and your theme covers your needs, headless is rarely worth the cost.

But there are good reasons to go headless:

• Performance ceiling: Liquid themes hit a rendering bottleneck. Even with Online Store 2.0 and Dawn, you're limited by Shopify's server-side rendering pipeline. Headless stores often load much faster on Largest Contentful Paint when built with edge caching and static generation.
• Custom experiences: Product configurators, AR try-ons, complex filtering, and personalization engines are hard to build in Liquid.
• Multi-storefront: One backend can power your DTC site, wholesale portal, mobile app, and international stores.
• Content-rich brands: If your brand relies on editorial content, lookbooks, and storytelling, pairing a headless CMS with Shopify's commerce engine gives you the best of both.
• Developer experience: Your team wants to work in React and TypeScript, not Liquid. This matters more than people admit.

The performance gains are real and measurable. Google's Core Web Vitals directly affect search rankings. Headless setups usually improve Largest Contentful Paint and Total Blocking Time over Liquid themes, since server components and edge caching cut render-blocking work. Faster pages also tend to convert better across ecommerce overall.

Headless Shopify Architecture Explained

"Headless Shopify" means splitting the frontend (what customers see) from the backend (Shopify's commerce engine). You keep Shopify for products, inventory, orders, checkout, and payments. You build a custom frontend that talks to Shopify through the Storefront API.

Here's the typical setup:

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│   Custom Frontend│────▶│  Storefront API   │────▶│  Shopify Backend │
│  (Next.js/H2/Remix)│   │  (GraphQL)        │     │  (Products, Cart, │
│                 │     │                  │     │   Orders, etc.)  │
└─────────────────┘     └──────────────────┘     └─────────────────┘
        │
        ▼
┌─────────────────┐
│  Headless CMS    │
│  (Sanity, Contentful,│
│   Storyblok)     │
└─────────────────┘

Shopify Plus merchants can use the Checkout Extensibility API, which lets you customize checkout without redirecting to Shopify's hosted checkout. Non-Plus stores still send customers to checkout.shopify.com to buy. That's not a bad experience, but it does break the flow.

The Storefront API

Everything runs through Shopify's Storefront API, a GraphQL endpoint that handles:

• Product queries and collections
• Cart management (create, update, remove line items)
• Customer authentication
• Content (metafields, metaobjects)
• Shop localization and currency

The API has rate limits: 50 cost points per second for a single app. This rarely causes trouble if you cache well, but it can hurt during flash sales if you haven't planned for it.

## Example: Fetching a product with variants
query ProductQuery($handle: String!) {
  product(handle: $handle) {
    id
    title
    descriptionHtml
    priceRange {
      minVariantPrice {
        amount
        currencyCode
      }
    }
    variants(first: 100) {
      edges {
        node {
          id
          title
          availableForSale
          price {
            amount
          }
          selectedOptions {
            name
            value
          }
        }
      }
    }
    images(first: 10) {
      edges {
        node {
          url
          altText
          width
          height
        }
      }
    }
  }
}

Choosing Your Frontend: Next.js vs Hydrogen vs Remix

This is where most teams get stuck. Here's a simple guide to when each framework fits.

Feature	Next.js 15	Hydrogen 2026	Remix (Shopify)
Framework maturity	Very mature, massive ecosystem	Maturing, Shopify-specific	Mature (merged into React Router 7)
Shopify integration	Manual via Storefront API	First-party, built-in hooks	Good via Hydrogen UI
Hosting	Vercel, Netlify, self-hosted	Oxygen (Shopify) or self-hosted	Anywhere, but optimized for Oxygen
Learning curve	Moderate	Moderate-High	Moderate
Community/hiring	Massive	Small but growing	Medium
SSR/SSG flexibility	Excellent (App Router)	SSR-focused (streaming)	SSR-focused (loaders)
Caching control	ISR, on-demand revalidation	Oxygen sub-request caching	Standard HTTP caching
Best for	Teams with React experience, complex content needs	Shopify-native teams, simple-to-medium stores	Teams wanting Shopify's recommended path

Next.js: The Safe Bet

Next.js is what we recommend for most teams, especially if you pair Shopify with a headless CMS like Sanity or Contentful. The ecosystem is huge, hiring is easier, and the App Router's server components give you great flexibility.

The catch? You have to wire up the Shopify integration yourself. Shopify has no official SDK for Next.js, though community packages like @shopify/hydrogen-react give you cart hooks and other tools. Expect to spend more time on setup work.

Next.js is our top pick for headless Shopify builds that pair commerce with a content platform. See our Next.js development approach for how we structure these projects.

Hydrogen: Shopify's Own Framework

Hydrogen is Shopify's official headless framework. It's built on Remix (now React Router 7). It comes with ready-made components for products, carts, and SEO, plus tight ties to Oxygen, Shopify's edge hosting platform.

The appeal is clear: less setup work, Shopify-optimized caching, and a deploy process that just works on Oxygen. Recent updates have brought better TypeScript support and optimistic UI updates for cart actions, as noted in Shopify's Hydrogen docs.

The downsides? A smaller community, fewer resources when you get stuck, and more lock-in to Shopify's ecosystem. If you ever want to switch commerce backends, you'll rewrite much more code than with Next.js.

Remix / React Router 7

Here's the confusing part: Remix has merged into React Router 7. Hydrogen is built on Remix. So "Remix for Shopify" usually just means Hydrogen.

If you want React Router 7 without Hydrogen's Shopify-specific tools, you can use it. You'll get the same loader and action patterns, the same streaming SSR, and full control over your Shopify setup. This fits teams already using Remix who want more flexibility.

Our Recommendation

For content-heavy brands with complex page layouts: Next.js + headless CMS. For simple DTC stores that want the fastest path to launch: Hydrogen on Oxygen. For teams already using the Remix ecosystem: React Router 7 with Hydrogen UI components.

The Migration Process Step by Step

Here's a standard process for these migrations. It's methodical, and that's the point.

Phase 1: Audit and Planning (2-3 weeks)

1. Crawl the existing site. Use Screaming Frog or Sitebulb to list every URL, redirect, canonical tag, and structured data block. Export this. You'll need it later.
2. Document all integrations. Klaviyo, Yotpo reviews, loyalty programs, subscription apps (Recharge, Loop), payment gateways. List every one.
3. Map URL structures. Will your new URLs match the old ones? Shopify uses /products/product-handle and /collections/collection-handle. If you change these, you need redirects.
4. Identify custom functionality. List anything beyond standard browse-and-buy: gift cards, bundles, wholesale pricing, multi-currency, B2B.
5. Choose your stack. Pick your frontend framework, CMS, hosting, and CDN.

Phase 2: Build the Frontend (6-12 weeks)

This is where the real development happens. Key areas:

• Product pages with variant selection, image galleries, reviews integration
• Collection pages with filtering, sorting, pagination
• Cart with real-time inventory checks and upsells
• Search: Shopify's Predictive Search API or a third-party tool like Algolia
• Customer accounts: login, order history, address management
• CMS-driven pages: homepage, about, landing pages
• Checkout redirect: handling the handoff to Shopify checkout

// Example: Next.js product page with ISR
import { getProduct } from '@/lib/shopify'
import { ProductDetails } from '@/components/product-details'

export async function generateStaticParams() {
  const products = await getAllProductHandles()
  return products.map((handle) => ({ handle }))
}

export default async function ProductPage({ 
  params 
}: { 
  params: { handle: string } 
}) {
  const product = await getProduct(params.handle)
  
  if (!product) notFound()

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(generateProductJsonLd(product)),
        }}
      />
      <ProductDetails product={product} />
    </>
  )
}

export const revalidate = 60 // ISR: revalidate every 60 seconds

Phase 3: Integration and QA (2-4 weeks)

Connect all third-party services. Test everything, and we mean everything:

• Place test orders across all payment methods
• Test discount codes, gift cards, automatic discounts
• Check analytics tracking (GA4, Meta Pixel, TikTok Pixel)
• Load test the Storefront API calls under expected traffic
• Test on real devices, not just Chrome DevTools

Phase 4: Cutover (1-2 days)

The actual switch. More on this in the zero-downtime section below.

SEO Preservation During Migration

This is where migrations go wrong. Missing or wrong URL redirects are the top cause of lost organic traffic after a platform migration. Don't let that happen to you.

URL Mapping

Build a full URL mapping document before writing a single redirect rule. Every URL on the old site needs a destination on the new site.

OLD: /collections/summer-2024
NEW: /collections/summer-2024  ← Same? Great, no redirect needed.

OLD: /blogs/news/our-story
NEW: /journal/our-story  ← Different? 301 redirect required.

OLD: /pages/about-us
NEW: /about  ← Different? 301 redirect required.

Structured Data

Shopify themes include basic structured data. When you go headless, you must build it yourself. At minimum, include:

• Product schema with offers, aggregateRating
• BreadcrumbList for navigation
• Organization for your brand
• WebSite with SearchAction for sitelinks search
• FAQPage where it fits

Meta Tags and Canonicals

Every page needs a proper <title>, <meta description>, canonical URL, and Open Graph tags. In Next.js, use the Metadata API:

export async function generateMetadata({ params }): Promise<Metadata> {
  const product = await getProduct(params.handle)
  
  return {
    title: product.seo.title || product.title,
    description: product.seo.description || product.description,
    openGraph: {
      images: [product.featuredImage?.url],
    },
    alternates: {
      canonical: `https://yourstore.com/products/${params.handle}`,
    },
  }
}

XML Sitemap

Build your sitemap dynamically from Shopify's data. Include products, collections, and CMS pages. Submit it to Google Search Console right after launch.

Pre-Migration SEO Checklist

• Complete URL mapping document
• 301 redirects configured and tested
• Structured data implemented and validated
• Meta tags pulling from Shopify SEO fields
• XML sitemap generated dynamically
• robots.txt configured correctly
• Google Search Console notified of domain change (if applicable)
• Internal links updated to new URL structure
• Image alt texts preserved from Shopify

Zero Downtime Migration Strategy

Zero downtime isn't magic. It comes down to DNS management and prep work.

The Blue-Green Deployment Approach

1. Build and deploy the new site on a staging domain (e.g., new.yourstore.com)
2. Run both sites at once for at least a week, testing the new site fully
3. Set up your CDN/DNS to support instant switching (Cloudflare, Vercel, or Netlify all support this)
4. Switch DNS to point to the new frontend. Set TTL to 60 seconds well in advance.
5. Monitor everything: error rates, 404s, conversion rates, Core Web Vitals

The Proxy Approach (Even Safer)

For stores doing over $1M a month in revenue, a proxy-based migration is usually the safer choice:

1. Put a reverse proxy (Cloudflare Workers, Vercel Edge Middleware) in front of both the old and new sites
2. Route traffic page by page. Start with a low-risk page like /about.
3. Move pages to the new frontend gradually over 2-4 weeks
4. Check each page's performance before moving the next batch
5. Move product and collection pages last, since they carry the most revenue risk

This approach adds complexity but lets you catch issues before they hit your whole store.

// Vercel Edge Middleware example for gradual migration
import { NextResponse } from 'next/server'

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl
  
  // Pages already migrated to new frontend
  const migratedPaths = ['/about', '/contact', '/journal']
  
  if (migratedPaths.some(path => pathname.startsWith(path))) {
    return NextResponse.next() // Serve from new frontend
  }
  
  // Everything else proxies to old Shopify store
  return NextResponse.rewrite(
    new URL(pathname, 'https://old-store.myshopify.com')
  )
}

Pricing and Timeline Breakdown

Here are realistic numbers for 2026, covering everything from simple DTC stores to complex multi-market operations.

Store Complexity	Timeline	Agency Cost	Freelancer Cost
Simple (< 50 products, basic pages, standard checkout)	8-12 weeks	$40,000 - $75,000	$20,000 - $40,000
Medium (50-500 products, CMS, subscriptions, multi-currency)	12-20 weeks	$75,000 - $150,000	$40,000 - $80,000
Complex (500+ products, B2B+DTC, custom checkout, multiple integrations)	20-32 weeks	$150,000 - $300,000+	$80,000 - $150,000

Ongoing Costs

Don't forget the recurring costs:

• Shopify Plus: $2,300/month (required for checkout extensibility, recommended for headless)
• Hosting: $20-500/month (Vercel Pro is $20/user, Oxygen is included with Shopify)
• Headless CMS: $0-500/month (Sanity, Contentful, Storyblok all have free tiers)
• Search: $0-500/month if using Algolia or similar
• Maintenance: Budget 10-15% of initial build cost each year

If you're weighing what a headless Shopify migration would cost for your store, see our pricing approach here. We're also happy to talk it through on a quick call.

Common Migration Pitfalls

1. Underestimating the Cart

The cart looks simple until you factor in discount codes, automatic discounts, gift cards, line item properties, cart notes, estimated shipping, tax rules, and cart-level metafields. Budget twice the time you think you need for cart work.

2. Forgetting About Apps

That Shopify app ecosystem you rely on mostly injects JavaScript into your Liquid theme. Going headless means you need API-based alternatives or custom builds for reviews, wishlists, loyalty programs, and more.

3. Checkout Customization

Without Shopify Plus ($2,300/month), you can't customize checkout. Customers get redirected to Shopify's hosted checkout, which breaks the visual flow. Plus merchants can use Checkout Extensibility, but it's still more limited than a fully custom checkout.

4. Not Performance Testing Early

The Storefront API adds latency. If you make 8 API calls to render a product page, you'll feel it. Cache aggressively, use GraphQL fragments to avoid over-fetching, and use streaming SSR where you can.

5. Ignoring the Content Team

Your marketing team used to manage content in Shopify's admin. Now they need a headless CMS. Budget time for training and for building a content editing setup that's actually easy to use. This is where headless CMS development expertise really matters.

When Headless Isn't the Right Move

Headless Shopify isn't for everyone. Don't migrate if:

• Your store does under $1M/year and you don't have complex customization needs
• You don't have budget for ongoing development and maintenance
• Your team doesn't have React developers (or budget to hire or contract them)
• You're happy with your current theme's performance and features
• You want a "cool tech" story more than a fix for real business problems

Shopify's Online Store 2.0 theme setup, when well optimized, can score high on Lighthouse performance audits. Sometimes the right move is to optimize what you have instead of rebuilding from scratch.

If you're unsure, try a hybrid approach: keep your Shopify theme but build a few high-impact pages, like your homepage or landing pages, as headless. You can use Shopify's Storefront API alongside your existing theme. This lets you prove the value before you commit to a full migration.

FAQ

How long does it take to migrate from Shopify to headless?

For a typical medium-complexity store, expect 12-20 weeks from kickoff to launch. Simple stores with fewer products and basic features can ship in 8-12 weeks. Complex multi-market stores with custom checkout, B2B pricing, and many integrations often take 20-32 weeks. The audit and planning phase alone should take 2-3 weeks. Don't skip it.

Will I lose my SEO rankings when migrating to headless Shopify?

Not if you keep your URL structure, add structured data, keep meta tags and canonical URLs intact, and submit an updated sitemap to Google Search Console right after launch. Rankings often dip for one to two weeks after migration, then recover as Google reindexes the site and picks up on better Core Web Vitals.

Do I need Shopify Plus for headless?

Technically, no. The Storefront API is on every Shopify plan, from Basic to Plus. But Shopify Plus gives you Checkout Extensibility, higher API rate limits, and access to Oxygen hosting. For serious headless projects, Plus at $2,300/month is almost always worth it.

What's the difference between Hydrogen and using Next.js with Shopify?

Hydrogen is Shopify's official headless framework, built on Remix and React Router 7. It ships with Shopify-specific components, hooks, and tools, plus optimized deployment on Oxygen. Next.js needs you to build the Shopify integration yourself, but gives you a bigger ecosystem, more hosting options, and better support for complex content setups.

Can I migrate to headless Shopify with zero downtime?

Yes, with either a blue-green deployment (DNS switch) or a gradual proxy-based migration. The blue-green approach switches all traffic at once through DNS. The proxy approach moves pages over in stages over weeks. Both work. The proxy approach is safer for high-revenue stores but adds more complexity.

How much does a headless Shopify migration cost?

Agency costs typically run from $40,000 for a simple store to $300,000+ for complex multi-market setups. Freelancer rates run about 50-60% of agency costs but may come with less project management and fewer specialists. Ongoing costs include Shopify Plus ($2,300/month), hosting ($20-500/month), CMS ($0-500/month), and maintenance (10-15% of build cost each year).

Should I use Astro instead of Next.js or Hydrogen for headless Shopify?

Astro works well for content-heavy Shopify frontends that only need small bits of interactivity for cart and account features. Our Astro development work includes production builds like the bdManagedIT migration, which pairs Astro with a headless CMS for a mostly static, near-zero-JS site. That pattern fits catalog-style stores where most pages are static and you only need React, Svelte, or Vue for interactive parts like the cart. For stores with heavy client-side interactivity, like real-time inventory or instant search, Next.js or Hydrogen's full React runtime usually fits better.

What happens to my Shopify apps after migrating to headless?

Most Shopify apps that inject frontend code, like popups, wishlist widgets, or review displays, won't work as-is. You'll need to call the app's API directly, find a headless-compatible alternative, or build a custom version. Apps that only run on the backend, like inventory management or ERP integrations, usually keep working without changes. Always audit your app stack during the planning phase.

Key takeaway:

Use Hydrogen for native Shopify integrations. Next.js wins for complex content needs.