// Insights / Architecture

Headless Shopify and Hydrogen: When to Go Headless

Tim Sullivan · Sonder, Melbourne · Published 26 July 2026

Every quarter, at least two brands come to us mid-crisis. They spent $200K+ on a headless build. The agency that sold it is gone. The site is slower than the Liquid theme it replaced. Nobody on the team can update a landing page without a developer.

Headless is not a strategy. It is an architectural choice with specific trade-offs, and the right answer depends entirely on what your business actually needs from its frontend. Not what a conference keynote told you. Not what your competitor claims to be doing. What your customers, your content team, and your revenue operations actually require.

Here is when Hydrogen makes sense for enterprise Shopify Plus brands, when it does not, and why the composable commerce landscape in 2026 looks nothing like it did even twelve months ago.

What headless actually means in 2026

The definition has shifted. In 2022, headless meant decoupling your frontend from Shopify entirely and rebuilding everything from scratch. You lost native checkout, lost theme editor, lost app ecosystem compatibility, and gained total frontend freedom at enormous cost.

In 2026, Shopify has reframed this as "headless on platform." Your frontend is fully customizable, but checkout, payments, commerce logic, and Shop Pay still run on Shopify core. You get the frontend freedom without abandoning the platform's strongest features.

The Spring 2026 Edition was the inflection point. Shopify released a framework-neutral core written in plain JavaScript. Their commerce primitives (typed Storefront API client, cart logic, collection filtering, Shop Pay integration) are now importable into any modern stack. This eliminates the friction that used to force a hard trade-off between native Shopify features and developer flexibility.

Shopify Functions can now access app-specific metaobject entries directly without external API calls. That single change reduces latency in custom discount and validation logic by 40-60ms per request. For headless builds that previously needed round-trips to external services for business logic, this collapses an entire layer of complexity.

Hydrogen's architecture in 2026

Hydrogen is Shopify's official React framework for headless commerce. It has evolved significantly since its initial release.

The current stack:

  • React Router v7 (the evolution of Remix) as the routing and data-loading layer
  • Vite as the build tool, replacing the older Hydrogen-specific bundler
  • Streaming SSR with built-in utilities for progressive rendering
  • Oxygen hosting on Shopify's global edge network, deployed directly from your repo
  • Built-in caching primitives that work with Shopify's CDN layer and Storefront API query caching

The 2026.1 release brought React Router 7.9.2, Miniflare v3 for local development (matching Cloudflare Workers runtime exactly), and Storefront API 2025-07 support with new predictive search and B2B pricing endpoints.

Critically, Hydrogen is not a black box. It is a set of conventions and utilities on top of React Router. You can eject from any convention. You can mix Hydrogen's commerce utilities with your own data sources. You are never locked into a pattern that does not fit your use case.

When headless makes sense: five specific scenarios

1. Multi-brand or multi-storefront architectures

If you operate three or more brands from a single Shopify Plus organization and need a unified component library, shared design system, and centralized deployment pipeline across all storefronts, headless gives you that shared infrastructure. You build the component library once. Each brand gets its own theme tokens and content. Deployments are coordinated, not siloed.

2. Content-heavy editorial commerce

Brands where editorial content drives 40%+ of revenue (lookbooks, styling guides, long-form storytelling that integrates product discovery) often hit the ceiling of what Liquid sections can compose. When your content model requires nested, recursive, or conditional layouts that blend editorial and commerce in ways the section schema cannot express, headless gives you arbitrary composition.

3. Custom checkout and post-purchase flows

Subscription brands with complex bundling logic. B2B buyers who need approval workflows before purchase. Brands with loyalty programs that modify pricing at the cart level based on external data. If your purchase flow requires interactions that Checkout Extensibility cannot accommodate, headless lets you build the exact experience you need while still using Shopify's payment processing.

4. Performance-critical international builds

If you sell into 15+ markets with localized content, currency-specific pricing, and the site must load in under 1.5 seconds on mobile across all regions, Oxygen's edge deployment combined with Hydrogen's streaming SSR and granular caching gives you performance controls that the standard Liquid rendering pipeline cannot match. You control exactly which data streams first and which content loads progressively.

5. Deep integration with external systems as primary data source

When your PIM (product information management system) is the true source of product data, your CMS owns the content model, and Shopify is essentially the transactional layer, headless lets you pull from those primary sources directly at the edge rather than syncing everything into Shopify metafields as a workaround.

When headless is the wrong call

1. Your team cannot maintain it

If your internal team does not include at least one senior React developer who understands SSR, edge computing, and caching invalidation, you are building a dependency on an external agency for every content change. That is not a technology decision. That is an operational liability. Liquid themes with Online Store 2.0 let your marketing team ship without a developer in the loop.

2. You need the Shopify app ecosystem

Many Shopify apps inject UI through theme app extensions. Reviews widgets, loyalty program displays, wishlists, size guides. Going headless means you lose those injected UIs. You either rebuild them yourself, use the app's API directly (if one exists), or go without. If your store relies on 8+ apps that provide customer-facing UI, the rebuild cost is significant and ongoing. Every app update becomes your problem.

3. Your differentiator is not the frontend

If your competitive advantage is product, brand, pricing, or logistics (not the shopping experience itself), spending $250K on a custom frontend is misallocated capital. A well-built Liquid theme on Online Store 2.0 with a strong design system will deliver 90% of the performance and 100% of the conversion optimization you actually need. Put that $150K delta into product development or acquisition.

4. Speed to market matters more than architectural purity

Headless builds take 14-24 weeks. Liquid builds take 8-14 weeks. If you are launching a new brand, entering a new market, or need to be live for a seasonal window, the extra 6-10 weeks of headless development is real money in lost revenue. Ship on Liquid now. Migrate later if the data proves you need it.

Hydrogen vs Next.js vs custom: the decision framework

The Spring 2026 framework-neutral core changed this calculus. Previously, choosing Next.js meant giving up native Shopify features. Now, Shopify's commerce primitives work in any React framework. The question is no longer "Hydrogen or lose Shopify features." It is "which framework best fits your engineering team and infrastructure?"

Factor Hydrogen + Oxygen Next.js + Vercel Custom (Astro, SvelteKit, etc.)
Shopify integration depth Native. First-party utilities, caching, and deployment pipeline purpose-built for Storefront API. Full access via framework-neutral primitives (Spring 2026). No native caching layer for Storefront API. Same primitives available. You build your own caching and data layer.
Hosting Oxygen (Shopify's edge). Zero config. Included in Plus pricing. Vercel, Netlify, or self-hosted. Separate billing. More flexibility for non-Shopify workloads. Any provider. Full control, full responsibility.
Team familiarity React Router (Remix) patterns. Loaders, actions, nested routes. Next.js App Router. Server components, server actions. Larger hiring pool. Depends on framework. Smaller talent pool for Astro/Svelte commerce builds.
Non-commerce pages Can serve any content, but Oxygen is optimized for commerce workloads. Excellent for hybrid sites (marketing, docs, app, commerce on one domain). Maximum flexibility. Best for sites where commerce is 30% or less of pages.
Vendor lock-in Moderate. Oxygen-specific. Portable React Router code, but deployment is coupled. Low to moderate. Vercel-specific optimizations exist but code is portable. Lowest. No platform coupling beyond Shopify's Storefront API.
Best for Pure Shopify commerce builds. Teams that want tight platform integration and zero DevOps overhead. Hybrid builds. Teams already on Next.js. Brands with significant non-commerce content. Highly custom builds. Teams with strong infrastructure opinions. Performance purists.

Our recommendation: If your site is 70%+ commerce and your team does not have strong opinions about routing frameworks, choose Hydrogen. The deployment simplicity and native Storefront API integration save 15-20% of build time versus Next.js for equivalent functionality. If you already have a Next.js codebase or your site blends commerce with significant application logic, stay on Next.js and use the framework-neutral primitives.

When to go headless vs stay on Liquid

Scenario Recommendation Why
Single brand, $10M-$30M revenue, standard catalogue Stay on Liquid Online Store 2.0 handles this perfectly. Spend budget on CRO and content instead.
Multi-brand portfolio sharing components Go headless (Hydrogen) Shared component library and unified deployment across brands justifies the investment.
Heavy editorial commerce (fashion, lifestyle) Go headless Content composition requirements exceed section schema capabilities.
B2B with custom quoting and approval flows Go headless Purchase flow complexity requires custom UI beyond Checkout Extensibility.
Rapid market entry or seasonal launch Stay on Liquid 8-14 week timeline vs 14-24 weeks. Ship now, iterate later.
Team of 2-3 marketers, no internal devs Stay on Liquid Headless creates permanent agency dependency for content changes.
15+ international markets, sub-1.5s performance target Go headless (Hydrogen + Oxygen) Edge rendering with granular cache control delivers performance Liquid cannot match globally.
Relies on 8+ Shopify apps with frontend UI Stay on Liquid Rebuilding every app's UI and maintaining compatibility is an ongoing tax that rarely justifies itself.
PIM/CMS as primary data source, Shopify for transactions only Go headless (framework choice depends on CMS) Direct data fetching from primary sources at the edge beats syncing into Shopify metafields.

The living ecosystem angle

Here is what agencies selling headless builds will not tell you: headless amplifies operational complexity by an order of magnitude.

A Liquid store has one runtime (Shopify's). One deployment pipeline. One set of dependencies. When Shopify updates their platform, your theme still works.

A headless build has a React framework, a build tool, dozens of npm packages, a hosting platform, a CDN configuration, Storefront API versioning, and custom caching logic. Every one of those layers can break independently. Every one requires monitoring. Every quarterly Shopify API version bump requires validation across your entire custom frontend.

This is why the ongoing ecosystem management cost for headless ($12K-$25K/month) is materially higher than Liquid ($4K-$8K/month). It is not padding. It is the genuine cost of monitoring more moving parts, validating API changes before they hit production, updating dependencies before vulnerabilities compound, and ensuring that the 47 packages in your lock file still work together after each update cycle.

The brands that succeed with headless are the ones that budget for this continuous maintenance from day one. The ones that fail are the ones that treat the initial build as the entire investment.

Investment and timelines

Headless Hydrogen build (enterprise)

  • Initial build: $150K-$350K depending on complexity, number of page templates, and integration depth
  • Timeline: 14-24 weeks from architecture sign-off to production launch
  • Ongoing ecosystem management: $12K-$25K/month (framework updates, API version migrations, performance monitoring, dependency management, security patching)

Liquid / Online Store 2.0 build (enterprise)

  • Initial build: $60K-$150K for a fully custom theme with advanced section architecture
  • Timeline: 8-14 weeks from design approval to launch
  • Ongoing ecosystem management: $4K-$8K/month (theme maintenance, app compatibility, performance optimization)

The delta is not just the build cost. Over three years, the total cost of ownership for a headless build is $580K-$1.25M versus $200K-$440K for an equivalent Liquid build. That gap only justifies itself if headless unlocks revenue or operational efficiency that Liquid cannot.

What justifies the premium

We recommend headless when the three-year revenue impact of better performance, better content experiences, or operational efficiency demonstrably exceeds the $380K-$800K premium. For a brand doing $50M in annual revenue, a 3% conversion lift from better page performance and richer content experiences generates $1.5M in incremental revenue. That math works. For a brand doing $12M, the same lift generates $360K. That math does not.

How we approach headless projects

We do not sell headless as a default. We start every engagement with an architecture review that asks one question: does this brand's specific situation justify the complexity premium of a decoupled frontend?

If the answer is yes, we build on Hydrogen with Oxygen hosting unless there is a compelling reason for Next.js (existing codebase, hybrid application requirements, or team preference). We architect the caching layer, the data fetching patterns, and the deployment pipeline from day one. And we build the ongoing monitoring into the project scope, not as an afterthought.

If the answer is no, we build the best Liquid store the platform can produce. A well-architected Online Store 2.0 theme with strong section schemas, proper performance budgets, and a content model that gives your marketing team full autonomy. That is not the consolation prize. For most brands, it is the better investment.

Written by

Tim Sullivan, Lead Solutions Architect

Tim is the co-founder of Sonder Sites and has architected headless Shopify builds for brands doing $20M-$100M in annual revenue. He has strong opinions about when headless justifies itself and when it does not. He has seen both the wins and the wreckage. If you are considering headless, he will tell you straight whether it is the right call for your business.

// Headless architecture

Get the architecture right first.

For brands doing $15M+ in revenue, the headless vs Liquid decision is a six-figure question. We will tell you straight which path fits your business, your team, and your growth trajectory. No agenda. Just architecture.

Replies within one business day. From the architect who builds the system.