Headless commerce has been a major trend in the Shopify ecosystem since 2022, when Shopify launched Hydrogen and made it significantly easier to build decoupled storefronts. The marketing around it is compelling: sub-second load times, unlimited frontend flexibility, omnichannel delivery from a single backend. These claims are true - for certain types of stores. For most Shopify merchants, a well-built traditional theme delivers better outcomes at a fraction of the cost and complexity.
This guide will help you decide which architecture makes sense for your specific situation.
What "headless" actually means
In a traditional Shopify store, the platform handles everything: the backend (product data, orders, inventory, checkout) and the frontend (the HTML/CSS/Liquid templates that render to the browser). They're tightly coupled - the Shopify rendering engine processes Liquid templates server-side and delivers HTML to the visitor.
In a headless architecture, the backend and frontend are separated. Shopify handles the backend (product catalog, cart, checkout, APIs) while a separate JavaScript application - built with React, Next.js, or Shopify's own Hydrogen framework - handles the frontend rendering. The frontend communicates with Shopify via the Storefront API or Customer Account API.
The decoupling gives you more control over the rendering pipeline - but it also means you own more of the infrastructure, more of the performance optimization, and more of the long-term maintenance.
The legitimate case for headless
Performance at scale with heavy content
The performance advantage of headless is most pronounced when your storefront has complex, dynamic content that Liquid rendering can't handle efficiently. Examples: a store with editorial content (large images, video-heavy product pages, deeply interactive lookbooks) where you need precise control over loading order and asset optimization; a store with thousands of variants where Liquid rendering creates noticeable server-side delays; or a PWA (Progressive Web App) that needs offline capability and app-like transitions.
For a standard 100–1000 SKU Shopify store with a well-optimized theme, a traditional Shopify store can hit 90–99 on PageSpeed mobile (this site does). Headless doesn't meaningfully improve on this for most stores.
Custom UX that Liquid genuinely can't deliver
Some user experiences require client-side rendering that's either impossible or very awkward in Liquid. Complex interactive configuration tools (custom product builders where selections affect 3D previews, live pricing calculations, multi-step configurators) are the clearest examples. If your core product requires app-like interactivity, headless makes the developer experience significantly better.
Omnichannel content delivery
If the same product catalog and checkout needs to power a web storefront, a mobile app, an in-store kiosk, and a voice interface - the Storefront API as a single data source makes sense. The frontend is different for each channel but the backend is one. For a pure web storefront, this benefit doesn't apply.
Tight integration with a separate content management system
Stores that need content managed in Contentful, Sanity, or another headless CMS alongside Shopify product data - and want both rendered together in a single, unified page - benefit from headless. Editorial-heavy brands (where the product page is as much about storytelling as it is about the buy box) fit here. Shopify's native metafields and metaobjects handle a lot of content needs now, but if you already have a significant investment in a CMS and need that content in the storefront, headless bridges the gap better.
The case against headless for most stores
Cost and timeline
A headless Shopify Hydrogen storefront costs significantly more to build than a traditional theme - both upfront and over time. Development time is typically 2–4× longer. The ongoing maintenance burden is higher: you're maintaining a React application, not a Liquid theme. Security updates, dependency updates, Shopify API version migrations - these are all recurring costs that don't exist with a managed traditional theme.
For a store doing $500k–$5M/year, the investment in a headless build rarely pays back faster than investing the same budget in conversion rate optimization on a well-built traditional theme. The performance gains are marginal when the baseline is already a fast traditional theme. The CRO gains from that same budget are measurable and direct.
The Shopify ecosystem works better with traditional themes
The Shopify ecosystem - apps, integrations, checkout, Shop Pay, accelerated payment buttons, Shopify Markets - is designed around the traditional storefront model. When you go headless, you take on the integration burden for everything that would otherwise work out of the box. The checkout, specifically, cannot be customized in a headless storefront the way it can with Checkout Extensibility on Plus (the checkout is still Shopify-hosted). Apps that inject into the storefront (review widgets, loyalty badges, chat) require custom integration rather than the app's standard installation flow.
Talent scarcity
There are significantly more Shopify Liquid developers than Hydrogen/React developers with Shopify Storefront API experience. Future maintenance of a headless Shopify store is more difficult and more expensive than maintaining a traditional theme - the developer pool is smaller and the skills are more specialized.
Hydrogen and Remix: the current Shopify headless stack
If headless is the right call for your store, Shopify's own Hydrogen framework (built on Remix) is the current recommended path. Key components:
- Hydrogen: A React framework with built-in Shopify primitives - cart components, product query helpers, Storefront API hooks. Eliminates boilerplate.
- Remix: The underlying router and data loading framework. Server-side rendering, progressive enhancement, excellent performance defaults.
- Oxygen: Shopify's edge hosting platform for Hydrogen storefronts, included with Shopify Plus. Deploys close to users globally with Cloudflare Workers architecture.
The Oxygen hosting inclusion with Plus is significant - it removes the infrastructure cost and complexity of self-hosting a Next.js application. If you're on Plus and considering headless, Hydrogen + Oxygen is the right stack. If you're not on Plus, you'd host on Vercel, Netlify, or a custom solution at additional cost.
Decision framework: five questions
Work through these before deciding:
- Does your store need UX that's impossible or significantly degraded in a Liquid theme? If the honest answer is "no, a good Liquid theme would work" - traditional is the right call.
- What's the current performance score of a well-optimized version of your theme? If a well-built traditional theme can hit 90+ on PageSpeed, the performance argument for headless doesn't apply.
- Do you have ongoing developer resource to maintain a React application? If the store will be handed to a non-technical marketing team after launch, a traditional theme is dramatically easier to maintain.
- Are you on Shopify Plus? Oxygen hosting is only available on Plus. Without it, headless adds significant infrastructure cost.
- What's the opportunity cost? Would the same budget invested in CRO, A/B testing, or performance optimization on a traditional theme deliver better commercial outcomes than a headless rebuild?
My honest take: In 10 years of Shopify development, I've built headless storefronts for brands where the UX requirements genuinely justified the architecture. For the majority of Shopify merchants - including stores doing $10M+/year - a well-built, well-optimized traditional theme is the right answer. Headless is for specific problems, not a universal upgrade.
When to revisit the decision
A store that's a good traditional theme candidate today might become a headless candidate in 2–3 years if:
- The brand expands into a mobile app that needs the same product/cart backend
- A content-heavy editorial direction requires CMS-level content modeling that Shopify's metaobjects can't adequately handle
- Revenue grows to a level where the cost/complexity ratio of headless is justified by conversion improvements from truly custom UX
Headless is not a commitment - you can migrate from a traditional theme to Hydrogen later. The product data and Shopify backend don't change. What changes is the frontend layer. Starting with a traditional theme and migrating to headless when requirements justify it is often the more pragmatic path than building headless from the start in anticipation of future requirements that may not materialize. If you've reached a decision either way, see how I approach Shopify development - traditional themes and Hydrogen builds both covered.
