Shopify is the most popular e-commerce platform on the planet. It powers over four million stores. Out of the box, it gives you a complete storefront with themes, checkout, payments, shipping, and inventory management. For most stores, that is enough.
But for brands that need more control over the shopping experience... custom product configurators, highly branded design systems, performance that goes beyond what Liquid templates can deliver... the standard Shopify theme architecture starts to feel limiting. That is where headless comes in.
Headless Shopify means keeping Shopify as your e-commerce backend (products, inventory, orders, payments, checkout) but replacing the frontend entirely with a custom application. You get Shopify's operational reliability without being constrained by its template system.
Here is how to do it, and whether you should.
What You Keep and What You Replace
This distinction matters because it defines the scope of your project.
You keep:
- Shopify's product management (catalog, variants, pricing, inventory)
- Shopify's order management and fulfillment
- Shopify's payment processing
- Shopify's checkout (more on this below)
- Shopify's admin interface for your operations team
You replace:
- The entire storefront... product listing pages, product detail pages, cart, navigation, search, everything the customer sees
- The rendering engine (from Liquid templates to your framework of choice)
Your operations team keeps using the Shopify admin they already know. Your customers get a completely custom shopping experience. The Storefront API is the bridge between the two.
The Storefront API
The Storefront API is a GraphQL API that gives your custom frontend access to everything it needs: products, collections, cart operations, customer accounts, and checkout URLs. It is the foundation of every headless Shopify build.
Key things to understand about it:
- It is public-facing. Unlike the Admin API, the Storefront API is designed to be called from client-side code. You use a public access token, not a private one.
- It is rate-limited but generous. The cost-based throttle is high enough that you would need extremely heavy traffic or very inefficient queries to hit it.
- It handles cart operations. Creating carts, adding items, updating quantities, applying discount codes... all through the API.
- It does not handle checkout rendering. You can create a checkout URL, but the actual checkout experience is still rendered by Shopify. This is important... more on it below.
The Checkout Question
Here is the thing most headless Shopify articles skip over: you probably cannot customize the checkout.
Shopify's checkout is a hosted experience. When a customer clicks "Checkout" in your headless store, they are redirected to checkout.yourdomain.com, which is rendered by Shopify. You can customize it with Shopify's checkout extensibility features (branding, custom fields, upsells), but you are not building it from scratch.
This is both a constraint and a feature. Shopify's checkout handles payment processing, tax calculation, shipping rates, fraud detection, and PCI compliance. Building all of that yourself would be a massive engineering effort and a significant security liability. For most stores, the hosted checkout is the right choice.
If you absolutely need a fully custom checkout... and you should be very sure about that... you would need Shopify Plus with checkout extensibility, which opens up more customization options but still runs on Shopify's infrastructure.
Choosing Your Frontend Framework
Shopify built Hydrogen specifically for headless Shopify storefronts. It is a React framework built on Remix with pre-built commerce components, Storefront API integration, and Shopify-specific optimizations. If you are going headless on Shopify, Hydrogen is the path of least resistance.
But it is not the only option. Any frontend that can make HTTP requests can consume the Storefront API. Common choices:
| Framework | Strengths | Considerations |
|---|---|---|
| Hydrogen (Remix) | Built for Shopify, pre-built components, optimized data fetching | Tied to Shopify ecosystem, deploys best on Oxygen |
| Next.js | Largest ecosystem, flexible rendering modes, strong community | No built-in Shopify integration; you wire it up yourself |
| Astro | Zero JS by default, excellent performance, framework-agnostic components | Cart interactions need client-side JS islands |
| Gatsby | Strong static generation, Shopify source plugin | Build times can be slow with large catalogs |
If your team already knows Next.js or Astro, there is no compelling reason to adopt Hydrogen just because you are using Shopify as the backend. The Storefront API is framework-agnostic. Use what your team is productive with.
The Implementation Roadmap
A headless Shopify build typically follows this sequence:
Phase 1: Product Data and Browsing
Start with the read-only parts. Fetch products from the Storefront API and render them. Build your product listing pages, collection pages, product detail pages, and search. This is the bulk of the frontend work and does not require any complex state management.
Use static generation or server-side rendering for product pages. Products do not change frequently enough to justify client-side fetching on every page load. Build the pages at deploy time or on the server, cache them on a CDN, and invalidate the cache when products update via webhooks.
Phase 2: Cart and Interaction
Now add the interactive pieces. Cart creation, add-to-cart, quantity updates, discount code application. These require client-side state management because the cart is unique to each visitor.
The Storefront API's cart operations are straightforward. You create a cart (which gives you a cart ID), add line items to it, and store the cart ID in a cookie or local storage so it persists across page loads. When the customer clicks checkout, you redirect them to the checkout URL that Shopify generates from the cart.
Phase 3: Customer Accounts
If your store has customer accounts (login, order history, saved addresses), this is a separate integration. The Customer Account API handles authentication, and the Storefront API provides access to customer-specific data like order history.
Phase 4: CMS Integration
Most headless Shopify stores also need non-commerce content: landing pages, blog posts, brand stories, FAQ sections. Shopify's built-in content capabilities are limited. Pair the Storefront API with a headless CMS like Contentful or Sanity for content-driven pages.
Performance: The Main Reason to Go Headless
Let me be blunt: the number one reason to build a headless Shopify store is performance. Shopify's Liquid templates are server-rendered on every request. They are fast enough for most stores, but they cannot compete with a static or edge-rendered custom frontend.
A well-built headless Shopify store on a CDN will outperform a standard Shopify theme on every Core Web Vital. Product pages load faster because they are pre-built and served from edge nodes. The JavaScript payload is smaller because you only ship what you need. Image optimization is handled by your CDN's image pipeline instead of Shopify's.
For stores where conversion rate is directly tied to page load speed (and the data says it is... Google research consistently shows that each additional second of load time reduces conversion), the performance difference can translate directly to revenue.
When Not to Go Headless
Headless Shopify is not for everyone. Here is when the standard theme approach is better:
- Small catalogs with simple needs. If you have 50 products and a straightforward shopping experience, a Shopify theme does everything you need with zero custom development.
- Limited development resources. A headless build requires frontend developers who are comfortable with React, GraphQL, and modern deployment pipelines. If you do not have that skill set, the maintenance burden will be unsustainable.
- Heavy reliance on Shopify apps. Many Shopify apps inject functionality through the Liquid theme. Going headless means losing access to those integrations and rebuilding the functionality yourself or finding API-based alternatives.
- Tight timelines. A standard Shopify theme can be customized and launched in weeks. A headless build is months of development. If you need to be selling quickly, headless is the wrong choice.
The Bottom Line
Headless Shopify gives you the best of both worlds: Shopify's proven e-commerce infrastructure with a completely custom shopping experience. But that custom experience comes with real costs... development time, ongoing maintenance, and the need for a technical team that can support it.
The decision should be driven by whether your brand experience requirements genuinely cannot be met by a Shopify theme, or whether the performance gains justify the investment. If the answer to either question is yes, headless is worth pursuing.
We have built headless Shopify stores for brands that needed custom product configurators, multi-brand storefronts, and high-performance shopping experiences. If you are evaluating headless for your store, let's discuss whether it is the right architecture.