Shopify to Headless Next.js Migration in India: When It's Worth It, What It Costs, and the 8 Things You Lose

Every six months, a founder pings us asking some version of the same question: "Our Shopify store is doing ₹4-15Cr ARR, the theme is held together with Liquid duct tape, page speed is awful, and conversion has plateaued. Should we go headless?" The honest answer in 2026 is: maybe — but probably not as soon as you think, and definitely not as cheaply as the LinkedIn thought-leaders make it sound.

We run a Noida-based web development agency that has shipped headless Shopify migrations to Next.js for D2C brands across India. This is the founder-honest version of what migration actually involves — the gains, the eight specific things you lose, the realistic 2026 pricing, and the questions to ask before signing any contract.

Why founders migrate off Shopify themes in the first place

Shopify's default Liquid + Online Store 2.0 theme stack is genuinely excellent for the first ₹0-3Cr of ARR. Past that, the same things that made Shopify fast to launch start working against you. Most teams hit one of these walls before they consider headless:

• <strong>LCP and INP stuck above Google&apos;s thresholds.</strong> Even with Dawn theme + a fast host, third-party apps (reviews, upsell, popups, analytics, chat) pile up to 60-90 render-blocking scripts. LCP sits at 3.5-5s on mobile. INP regularly hits 300-500ms. Core Web Vitals fails. SEO suffers.
• <strong>Theme customization debt.</strong> Three years of Liquid edits by five different freelancers means nobody knows what breaks if you touch anything. Sections are duplicated. Snippets reference deleted apps. A &quot;simple&quot; redesign quote comes back at ₹3L because the dev has to untangle the theme first.
• <strong>International / multi-currency at scale.</strong> Shopify Markets handles the basics but breaks down for India-specific cases — GST on Indian orders, USD pricing for international, AED for Gulf NRIs, region-specific product visibility. Markets&apos; default UX is also subpar for stores serving 5+ regions.
• <strong>Checkout customization impossible on standard plans.</strong> Shopify Plus unlocks Checkout Extensibility (₹2L+/month), but on Basic/Advanced/Shopify plans, checkout is a black box. No custom fields, no conditional logic, no upsell logic, no B2B pricing tiers.
• <strong>B2B / wholesale workflows are clunky.</strong> Shopify B2B exists on Plus only. Below that, wholesale means tagged customer groups + a Shopify app + Liquid hacks. Brands selling to both D2C and B2B usually run two separate stores — wasteful.
• <strong>Conversion rate has hit a ceiling.</strong> When you&apos;ve done all the obvious CRO inside Shopify and CR is still stuck at 1.2%, sometimes the problem is the theme architecture itself — render-blocking scripts, layout shifts, slow product image loads.

What &quot;headless Shopify&quot; actually means in 2026

Headless Shopify is a specific architecture, not a vague buzzword. Concretely: your storefront — the part customers see — becomes a Next.js application hosted on Vercel or Cloudflare. Shopify becomes a pure backend, accessed via the Storefront API (GraphQL) for product/collection/cart data. Shopify still handles cart logic, checkout, payments, orders, fulfillment, inventory, and Shopify Admin. You don&apos;t replace Shopify — you replace the theme layer.

What changes concretely: your .liquid theme files become React components. Your theme.liquid becomes a Next.js layout.tsx. Product templates become React Server Components fetching from productByHandle GraphQL queries. Cart state is managed in React (or Zustand/Jotai) and synced via Storefront API mutations. Checkout still lives on checkout.shopify.com (or your custom checkout subdomain on Plus). Hosting moves from Shopify CDN to Vercel/Cloudflare with ISR caching for product and collection pages.

Theme Editor — the drag-and-drop interface your marketing team uses — is replaced by either: (a) a headless CMS like Sanity, Contentful, or Storyblok for landing pages and content blocks, or (b) Git-based content edits via Vercel deploys. For most teams, option (a) is mandatory — non-technical staff can&apos;t deploy via Vercel comfortably.

When migration is actually worth it (and when it isn&apos;t)

Migrate when:

• <strong>You do &gt;50K monthly visitors</strong> and the performance gains (15-30% CR uplift in case studies) will pay back the migration cost within 6-9 months.
• <strong>Conversion rate is the bottleneck</strong>, not traffic or pricing. Headless wins are mostly performance + UX-driven, so they show up in CR.
• <strong>You&apos;re expanding internationally</strong> and need custom logic for region/currency/language/pricing that Shopify Markets can&apos;t handle cleanly.
• <strong>You need custom product configurators</strong> — jewellery customization, made-to-order furniture, B2B quote builders. Liquid can&apos;t do this well; React absolutely can.
• <strong>You have a B2B / wholesale side</strong> alongside D2C, and you&apos;re below Shopify Plus pricing.
• <strong>A mobile app is on the roadmap.</strong> Same Storefront API serves both web (Next.js) and mobile (React Native / Flutter) — significant code reuse.

Do NOT migrate when:

• <strong>You&apos;re below 10,000 monthly visitors.</strong> The math doesn&apos;t work. Spend the migration budget on traffic and CRO instead.
• <strong>Your team has no JS / React skills</strong> and you have no plan to hire or partner long-term. Headless is permanent dev dependency.
• <strong>Your budget is below ₹3L.</strong> Anyone quoting under ₹2.5L for a real migration is either inexperienced or cutting catastrophic corners.
• <strong>Your current Shopify theme runs fine</strong> (LCP &lt; 2.5s, CLS &lt; 0.1) and CR is healthy. Don&apos;t fix what isn&apos;t broken.
• <strong>You&apos;re launching in &lt;6 weeks.</strong> Migrate after launch, not at it.

What you GAIN from going headless

• <strong>Core Web Vitals you control absolutely.</strong> Realistic targets after migration: LCP 1.4-1.8s, CLS 0.01-0.05, INP 60-120ms. Compare to a typical loaded Shopify theme: LCP 3.5-5s, INP 250-500ms.
• <strong>Real conversion uplifts.</strong> Industry reports + our own client data show 15-30% CR lift after well-executed migrations. Not magic — it&apos;s the compound effect of faster pages, no layout shift, cleaner UX, and zero render-blocking app scripts.
• <strong>Custom component libraries you own.</strong> Atomic React components — Button, ProductCard, AddToCart, MiniCart, FilterBar — that scale across landing pages, campaigns, and mobile app.
• <strong>Vercel preview deploys for every PR.</strong> Marketing wants to test a new hero? Designer opens a PR, gets a preview URL, founder approves, merge ships to prod. Way faster than Shopify staging themes.
• <strong>Code-level control over every render.</strong> No more &quot;why is this script loading?&quot; The codebase tells you exactly what runs and when.
• <strong>Built-in A/B testing without 3rd-party tools.</strong> Vercel Edge Middleware + cookie-based variant splits. No Convert, no VWO, no script-injection layout shift.
• <strong>SEO improvements from CWV.</strong> Google has been weighting Core Web Vitals in ranking since 2021. Pages with 1.5s LCP rank better than 4.5s LCP pages, holding content equal.

The 8 things you LOSE — every single one is a real cost

This is the section every headless evangelist skips. The trade-offs are real. If your team can&apos;t absorb these, you&apos;ll regret the migration.

1. Shopify Theme Editor is gone

No more drag-and-drop section ordering. No more &quot;let me just tweak the homepage banner&quot; by marketing at 11pm. Every content change goes through code OR through a headless CMS like Sanity. Your marketing team needs new skills or a developer in the loop for any change.

2. Shopify app storefront integrations break

The hundreds of apps that auto-inject scripts into your theme (reviews, popups, upsell widgets, chat) don&apos;t work out of the box. Each one needs custom Storefront API or webhook integration. Some apps publish headless SDKs (Judge.me, Klaviyo, Yotpo); many don&apos;t. Budget ₹15-50K per critical app for re-integration.

3. Shopify Admin app installs need manual integration

Install a new Shopify app via Admin — for a headless store, the storefront-side work doesn&apos;t happen automatically. You install, then your developer manually wires it into Next.js. This slows down marketing-led tool adoption significantly.

4. Polaris design system is gone

Shopify&apos;s theme components — buttons, forms, accordions, image galleries — that you got for free in Liquid? You rebuild all of them in React. Good news: it&apos;s a one-time cost. Bad news: it&apos;s included in the migration budget, not free.

5. Shopify Markets cross-domain selling needs custom routing

Multi-region (yourbrand.in, yourbrand.com, yourbrand.ae) requires custom Next.js middleware for IP-based routing, region detection, and currency switching. Shopify Markets does this server-side for default themes — you replicate that logic in your Next.js edge functions.

6. Backend-driven content changes disappear

Changes that were one-click in Theme Editor — color swap, font change, section reorder, image replacement — become Vercel deploys. Even with a headless CMS, structural changes need code. Plan for 1-2 day turnaround for &quot;simple&quot; changes that used to be 10 minutes.

7. Marketing team needs to learn a headless CMS

Sanity Studio, Contentful, Storyblok — all of these have learning curves. Sanity is the most flexible but the most technical. Contentful is more user-friendly but locks you in. Storyblok has visual editing closest to Shopify&apos;s feel. Budget 2-3 weeks of training for your marketing team during the migration.

8. Hosting cost is added on top of Shopify

You still pay Shopify (Basic ₹2.4K/mo to Plus ₹2L+/mo). Now ADD Vercel: $20/mo (Pro, low traffic) to $500+/mo (high-traffic stores with heavy ISR). Plus a CMS ($0-$500/mo depending on plan). Net hosting bill goes up ₹2K-50K/month.

Real 2026 migration pricing in India

Basic migration — ₹2-4L

Small store, 20-50 products, single region, no B2B. Standard Storefront API queries, basic Sanity CMS setup, 5-10 landing page templates, checkout passthrough, 301 redirects. Timeline: 8-12 weeks. Suitable for: D2C brands at ₹50L-2Cr ARR who want a foundation to scale.

Mid-tier migration — ₹4-8L

100-500 products, multi-collection navigation, faceted search, wishlist, customer accounts, basic multi-currency, custom hero/banner system in Sanity, 15-25 page templates. Timeline: 12-16 weeks. Suitable for: established D2C at ₹2-10Cr ARR.

Complex migration — ₹8-20L+

1000+ SKU, B2B + D2C parallel storefronts, Shopify Markets across 3+ regions, custom product configurator, headless CMS with content modeling, custom checkout (Plus only), mobile app sharing the same backend, deep app integrations (5+ critical apps). Timeline: 16-24 weeks. Suitable for: scaling D2C at ₹10Cr+ ARR or any B2B operation.

These rates are for agencies like ours in India. For the same work, US/UK agencies charge $50K-$300K+ (₹40L-₹2.5Cr). Top Indian agencies deliver equivalent quality at 25-35% of US prices — the talent floor for senior Next.js + Shopify devs in Noida, Bangalore, and Mumbai is genuinely high.

Stack choices — Hydrogen vs Next.js vs Remix

Shopify launched Hydrogen as their official React framework for headless commerce. It&apos;s built on Remix, deeply integrated with Shopify, deployed on Oxygen (Shopify&apos;s hosting). Sounds perfect — but for most Indian agencies and brands, Next.js is still the better default.

Pick Next.js when:

• Your dev team already knows Next.js (most React devs in India do).
• You need non-commerce features alongside the store — blog, magazine, community, app marketing pages, member portal.
• You want the bigger ecosystem — middleware, edge functions, Vercel Analytics, Vercel Postgres, integrations with every Indian payment/logistics vendor.
• You may move OFF Shopify eventually (Next.js is portable; Hydrogen is Shopify-locked).
• You want the latest React Server Components patterns — Next.js 16 leads here.

Pick Hydrogen when:

• Your store is pure ecommerce with no content/blog/community needs.
• You&apos;re Shopify Plus and committed long-term.
• Your dev team has Remix experience.
• You want first-class Shopify Markets, B2B, and Customer Account API integrations out of the box.

Our recommendation for 95% of Indian D2C brands considering headless: Next.js 16 + App Router + React Server Components + Shopify Storefront API + Sanity (or Contentful). The ecosystem is bigger, hiring is easier, and you keep optionality.

The 5-phase migration playbook we use

Phase 1 — Inventory and audit (1-2 weeks)

List every theme customization. Document every Shopify app installed + which ones inject scripts on the storefront. Map every URL pattern (product, collection, blog, pages) for the 301 redirect plan. Audit current Core Web Vitals as a baseline. Identify content owned by Theme Editor that needs to move to CMS.

Phase 2 — Design system extraction (2-3 weeks)

Build atomic React components — Button, Input, Card, ProductCard, AddToCart, MiniCart, Modal, Drawer — in isolation (Storybook or similar). Match existing brand visual language. This is where your headless store&apos;s long-term DX is determined.

Phase 3 — Data layer (3-5 weeks)

Storefront API queries for products, collections, search, customer accounts, cart. ISR caching strategy: product pages revalidate every 60s, collection pages every 5 min, homepage every 10 min. Webhooks from Shopify Admin to trigger on-demand revalidation when inventory or pricing changes. Sanity (or Contentful) content modeling for landing pages, hero banners, blog, FAQs.

Phase 4 — Checkout integration (1-2 weeks)

Cart state syncs to Shopify Storefront API via cartCreate and cartLinesAdd mutations. Checkout link goes to Shopify-hosted checkout (or custom on Plus). Test every payment method — Razorpay, UPI, COD, Cards — in staging mode.

Phase 5 — DNS cutover + 301 redirects (1 week)

Schedule cutover for low-traffic window (typically 2-5am IST). Reduce DNS TTL to 60s a week before. 301 redirects for every old URL pattern → new URL pattern. Submit new sitemap to Search Console. Monitor 404s for the first 72 hours. Plan for 5-15 minutes of partial unavailability during the cutover itself.

SEO preservation during migration — the make-or-break section

We&apos;ve seen migrations tank organic traffic by 40-70% because SEO was treated as an afterthought. Done right, headless migrations IMPROVE SEO (because of Core Web Vitals gains). Done wrong, they nuke it. The checklist:

• <strong>1:1 URL mapping.</strong> Every /products/foo stays at /products/foo. Every /collections/bar stays. Blog URLs preserved. If you MUST change a URL, 301 redirect it.
• <strong>Sitemap parity.</strong> Generate sitemap.xml from Storefront API. Ensure every product, collection, blog post, and landing page is indexed.
• <strong>Structured data preserved.</strong> Product schema (Offer, AggregateRating, Review), Organization, BreadcrumbList. Shopify&apos;s default theme adds these — your Next.js version must explicitly add them via JSON-LD.
• <strong>Meta tags ported.</strong> Existing meta titles, descriptions, OG tags must carry over. Shopify Admin&apos;s SEO fields stay the source of truth; Next.js reads them via Storefront API.
• <strong>Internal linking restored.</strong> If you had collection navigation, &quot;related products&quot; sections, footer links — rebuild them. Internal linking is half of on-page SEO.
• <strong>Core Web Vitals improvement.</strong> Set hard targets: LCP &lt; 2s, INP &lt; 200ms, CLS &lt; 0.05. Test on real devices, not just Lighthouse.
• <strong>Search Console monitoring.</strong> Submit new sitemap. Monitor coverage report daily for first 30 days. Watch impressions and clicks in GSC — sharp drops indicate redirect or indexing issues.

We bundle technical SEO into every headless migration — losing your hard-won rankings to save 2 weeks of careful redirect planning is the worst trade we&apos;ve seen founders make.

Multi-currency and international expansion

If you&apos;re going headless partly to handle international better, here&apos;s the realistic 2026 setup. Shopify Markets handles currency conversion, regional pricing rules, and tax compliance at the Shopify level. Your Next.js storefront reads the active market from a cookie (set by IP geolocation on first visit) and queries Storefront API with the corresponding country and language parameters.

Practical setup for an Indian D2C brand selling globally: India (INR, GST), Gulf NRIs (AED), US (USD), UK (GBP), Europe (EUR). Shopify Markets handles pricing + tax. Your Next.js middleware handles IP detection, cookie-based override (so users can manually switch), and currency display. Regional product visibility (e.g., hide certain SKUs in EU due to compliance) is handled via collection tagging in Shopify Admin and filtered at the Storefront API query.

Performance benchmarks — realistic before/after

Real numbers from our recent migrations (D2C brands, 200-800 products, India + international). Your mileage will vary based on starting condition.

• <strong>LCP (mobile):</strong> Shopify theme 4.5s → Headless Next.js 1.8s (60% improvement)
• <strong>INP:</strong> 350ms → 80ms (77% improvement)
• <strong>CLS:</strong> 0.18 → 0.02 (89% improvement)
• <strong>Lighthouse Performance:</strong> 42 → 94 (mobile)
• <strong>Time to Interactive:</strong> 6.2s → 2.1s (66% improvement)
• <strong>Conversion rate:</strong> 1.4% → 1.9% (35% lift, measured over 90 days post-cutover)
• <strong>Organic traffic at month 3 post-migration:</strong> +22% (driven by CWV ranking improvements)

What can go wrong (and how to mitigate)

• <strong>Lost orders during DNS cutover.</strong> Mitigation: cutover at 2-5am IST, lower DNS TTL to 60s a week before, communicate to customers via banner, expect 5-15 min of partial unavailability — not 0.
• <strong>Broken third-party app integrations post-launch.</strong> Mitigation: list every app that has storefront-side functionality, plan re-integration upfront, budget ₹15-50K per critical app, NEVER skip Klaviyo, Judge.me, Gorgias, or your analytics suite.
• <strong>Marketing team can&apos;t update content without dev help.</strong> Mitigation: invest in headless CMS training during migration, build a robust Sanity content model that covers 80% of common changes, set up a Slack channel for the remaining 20%.
• <strong>Search Console traffic drop.</strong> Mitigation: 1:1 URL mapping, validate every 301 redirect, monitor GSC coverage report daily for 30 days.
• <strong>Cart abandonment spike due to checkout friction.</strong> Mitigation: test cart-to-checkout transition with real users before cutover; on Plus, customize checkout to match the new storefront visual language.
• <strong>Cost overrun.</strong> Mitigation: fixed-scope contract with clear deliverables, change-order process for additions, 15-20% contingency buffer.

Realistic timeline — week by week for a typical mid-tier migration

• <strong>Week 1-2:</strong> Inventory, audit, CWV baseline, app inventory, content audit, design discovery.
• <strong>Week 3-5:</strong> Design system + atomic React components, Storybook setup, brand visual language extraction.
• <strong>Week 6-9:</strong> Storefront API integration, product/collection/cart logic, ISR caching, webhook setup.
• <strong>Week 10-11:</strong> Sanity CMS setup, content modeling, marketing team training begins.
• <strong>Week 12-13:</strong> Checkout integration, payment testing, customer accounts.
• <strong>Week 14:</strong> SEO migration prep — sitemap, 301 redirects, structured data, meta tag porting.
• <strong>Week 15:</strong> Staging environment QA, marketing team UAT, performance tuning.
• <strong>Week 16:</strong> DNS cutover, monitoring, hotfix window. First-week metrics review.

8 questions to ask any developer before signing the migration contract

1. <strong>How many Shopify Storefront API + Next.js migrations have you actually shipped?</strong> Not generic &quot;React experience&quot; — specifically headless Shopify on Next.js. Senior agencies will name brands and link to live sites.
2. <strong>What&apos;s your plan for re-integrating my Shopify apps?</strong> They should ask for your app list before answering. The honest answer: &quot;Some have headless SDKs we&apos;ll wire in, some need custom Storefront API integration, some don&apos;t work in headless and need replacing — here&apos;s our triage approach.&quot;
3. <strong>Which headless CMS do you recommend and why?</strong> Sanity, Contentful, Storyblok, or Strapi — all valid. The wrong answer is &quot;whichever you prefer&quot; without context. The right answer references your team&apos;s technical level and content complexity.
4. <strong>What hosting do you recommend — Vercel, Cloudflare, or self-hosted?</strong> Vercel is the default for Next.js. Cloudflare Workers/Pages is cheaper at scale but requires more expertise. Anyone recommending &quot;we&apos;ll set up our own server on AWS&quot; is overcomplicating it.
5. <strong>Show me your 301 redirect strategy for my exact URL patterns.</strong> They should look at your sitemap before answering. Specifics matter — &quot;we&apos;ll redirect everything&quot; is not a plan.
6. <strong>What Core Web Vitals targets will you commit to in the contract?</strong> Concrete numbers: LCP &lt; 2s, INP &lt; 200ms, CLS &lt; 0.05. If they hedge, they don&apos;t know how to achieve them.
7. <strong>What&apos;s your training and handover plan for our marketing team?</strong> 2-3 weeks of Sanity training, documented playbook, recorded screencasts, Slack support for 60 days post-launch — at minimum.
8. <strong>What&apos;s the post-launch maintenance retainer and what does it include?</strong> Expect ₹40K-1.5L/month for ongoing dev support — security updates, Next.js version upgrades, bug fixes, feature additions, monitoring.

FAQ

Do I need Shopify Plus to go headless?

No. Storefront API is available on Basic, Shopify, and Advanced plans. Plus unlocks Checkout Extensibility, B2B Suite, Customer Account API extensions, and higher API rate limits — useful for complex migrations, but not required for basic headless. Most of our ₹2-8L migrations are on Shopify or Advanced plans, not Plus.

Headless vs PWA — which approach is better in 2026?

Headless. PWA (Progressive Web App) was the 2018-2021 approach — convert Shopify theme to a PWA shell using tools like Shogun or PWA Studio. It&apos;s been largely abandoned in 2026 because results were inconsistent and the trade-offs (offline-first complexity, app-store distribution) didn&apos;t pay off for most ecommerce. Headless Next.js on Vercel gives better performance with less complexity.

Can I build a mobile app simultaneously using the same backend?

Yes — this is one of the strongest reasons to go headless. Your Storefront API serves both the Next.js web storefront and a React Native (or Flutter) mobile app. Shared customer accounts, shared cart sync (via Storefront API mutations), shared product catalog. Budget ₹4-12L for the mobile app on top of the migration.

Does headless work for B2B / wholesale workflows?

Yes, well. Custom pricing tiers, customer-specific catalogs, net-30 payment terms, quote requests, bulk order forms — all easier in React than in Liquid. If you&apos;re on Shopify Plus, the B2B Suite + Customer Account API gives you native customer groups + pricing. Below Plus, you&apos;ll roll your own logic — still easier in headless than in a Liquid theme.

How does Shopify Markets work with headless?

Shopify Markets continues to manage regional pricing, currency, tax, and product publishing at the Shopify backend level. Your Next.js storefront reads the active market via the country parameter in Storefront API queries. Multi-domain setup (e.g., .in, .com, .ae) requires custom Next.js middleware for IP-based routing — Shopify Markets doesn&apos;t handle this for headless out of the box.

What if I want to leave Shopify entirely later?

Headless makes this easier — your storefront is already decoupled. You replace Shopify Storefront API calls with whatever new backend you choose (Medusa, Commerce.js, Saleor, custom). The frontend layer stays. This is a major advantage over Hydrogen, which is tightly coupled to Shopify.

Final word — should you migrate this quarter?

If you&apos;re a ₹3-15Cr ARR D2C brand stuck on a slow Shopify theme with conversion plateaued and international expansion ahead — yes, headless Next.js migration probably pays back within 6-9 months. If you&apos;re below ₹2Cr ARR or your Shopify theme is performing fine — focus on traffic and CRO instead. The migration is a leveraged decision, not a default choice.

We&apos;ve covered the Next.js vs Shopify decision at a higher level and the reality of running Next.js in production elsewhere on this blog. If you&apos;re still in Shopify-build mode and not migrating yet, our guide to building a Shopify store in India is the better starting point. And if you&apos;re evaluating partners across Indian cities — Noida, Mumbai, Bangalore — we&apos;re happy to give you an honest second opinion even if you don&apos;t hire us.