Shopify powers over 4 million stores, and the vast majority of them use Shopify's built-in theme system... Liquid templates, the Shopify admin, the standard checkout. It works, and for most stores, it works well enough.
But "well enough" has limits. When brands need custom shopping experiences, pixel-perfect design control, or performance that goes beyond what theme customization allows, headless Shopify enters the conversation. The idea is straightforward: keep Shopify as your commerce engine (products, inventory, checkout, payments) but replace the frontend entirely with a custom application.
Here's what that actually involves and when it's worth the investment.
What "Headless" Means in Practice
In a standard Shopify setup, the frontend and backend are tightly coupled. Your theme's Liquid templates render HTML on Shopify's servers, and every page request goes through Shopify's infrastructure. The theme controls what the storefront looks like and how it behaves.
Going headless means separating these layers. Shopify becomes a backend service accessed through the Storefront API... a GraphQL API that exposes products, collections, cart operations, and checkout. Your frontend is a standalone application (typically built with React, Next.js, or a similar framework) that fetches data from this API and renders the storefront.
The separation gives you:
- Full control over the frontend. No Liquid templates, no theme constraints. Your frontend is a modern web application where you control every pixel, every interaction, every performance optimization.
- Framework freedom. Build with whatever frontend technology fits your team... Next.js, Remix, Astro, SvelteKit. You're not locked into Shopify's rendering pipeline.
- Performance architecture. Static generation, edge rendering, aggressive caching... you can use modern web performance techniques that aren't available in theme-based Shopify.
- Multi-storefront capability. One Shopify backend can power multiple frontends... a main website, a mobile app, a wholesale portal, an international storefront... each with its own design and functionality.
The Storefront API: Your Commerce Data Layer
Everything in a headless Shopify build runs through the Storefront API. It's a public-facing GraphQL API designed for customer-facing storefronts, separate from Shopify's Admin API (which is for backend operations).
What the Storefront API gives you:
- Products and collections. Full product data including variants, images, metafields, pricing, and inventory availability.
- Cart operations. Create carts, add/remove items, apply discount codes... all through API calls. No page reloads, no Shopify-rendered cart page.
- Customer accounts. Authentication, order history, address management. You build the UI; Shopify handles the data.
- Checkout. The Storefront API creates checkout sessions that redirect to Shopify's hosted checkout (or you can use Checkout Extensibility for more control).
The API is rate-limited but generous for storefront use. Shopify calculates costs based on query complexity rather than simple request counts, which means well-structured queries can fetch a lot of data efficiently.
Shopify Hydrogen: The Official Framework
Hydrogen is Shopify's own React framework for building headless storefronts. It's built on Remix and deployed to Shopify's Oxygen hosting platform. The pitch is a purpose-built framework with commerce primitives baked in... product components, cart hooks, SEO utilities, and Shopify API clients.
Hydrogen makes sense if you want the fastest path to a headless Shopify storefront with strong conventions and you're comfortable deploying to Shopify's infrastructure. The commerce-specific components and hooks save significant development time compared to building everything from scratch.
The trade-off is coupling. Hydrogen is designed for Oxygen hosting, and while you can deploy elsewhere, you lose some of the integrated benefits. If your infrastructure lives on Vercel or Netlify, or if your team prefers Next.js's ecosystem, building a custom headless frontend might be a better fit than adopting Hydrogen.
When Headless Shopify Makes Sense
Going headless is a significant investment. It adds architectural complexity, requires frontend development expertise, and means you're maintaining a custom application instead of customizing a theme. It's not the right move for every store.
Headless makes sense when:
- Performance is directly tied to revenue. If you've measured that faster page loads increase your conversion rate (and for e-commerce, they almost always do), headless gives you full control over performance. Static product pages served from a CDN load faster than server-rendered Liquid templates on every request.
- You need a custom experience that themes can't deliver. Complex product configurators, interactive lookbooks, 3D product viewers, AR try-on features... when the shopping experience goes beyond browse-and-buy, themes become a constraint rather than a foundation.
- You're building for multiple channels. A native mobile app and a website sharing the same commerce backend. A wholesale portal alongside the consumer storefront. International storefronts with structurally different shopping experiences per market.
- Your content and commerce need to blend. When editorial content, brand storytelling, and product pages need to feel like one seamless experience, a headless CMS plus headless Shopify gives you a unified frontend that draws from both systems.
When Standard Shopify Is the Better Choice
Honest take: most Shopify stores should not go headless. The built-in theme system has gotten dramatically better. Shopify's Online Store 2.0 themes support sections on every page, metafields for custom data, and app blocks for third-party functionality. Performance has improved significantly with the Dawn theme and subsequent iterations.
Stick with themes when:
- Your team doesn't have dedicated frontend developers
- Your design needs can be met by customizing an existing theme
- You rely heavily on Shopify apps that integrate through the theme
- Speed to market matters more than pixel-perfect custom design
- Your budget doesn't support the ongoing maintenance of a custom frontend
Going headless and then not having the team to maintain the frontend is worse than staying on themes. The headless frontend is your responsibility... bugs, updates, performance monitoring, security patches. If you're not set up for that, themes are the pragmatic choice.
The Architecture Decision That Matters Most
If you do go headless, the single biggest decision is how you handle checkout. Shopify's checkout is where PCI compliance, payment processing, fraud detection, and order management happen. Most headless implementations keep Shopify's hosted checkout and focus the custom frontend on the shopping experience (browsing, product pages, cart).
This is the right call for most teams. Building a custom checkout is expensive, risky from a compliance perspective, and means you lose Shopify's built-in payment processing features. Shopify's Checkout Extensibility lets you customize the checkout experience within Shopify's hosted checkout... adding custom fields, modifying the layout, inserting branded elements... without taking on the full responsibility of a custom checkout.
The pattern that works: custom headless frontend for browsing and cart, Shopify hosted checkout (customized via Checkout Extensibility) for payment and order completion. You get the design freedom where it matters for brand experience and the reliability of Shopify's commerce infrastructure where it matters for conversion and compliance.
If you're weighing headless Shopify against theme customization for your store, let's run through the trade-offs together.