Most merchants who go headless without a plan spend 3 to 6 months and $40,000 to $150,000 building a custom storefront, only to discover their frontend team and commerce team can't agree on a data model. The result: a store that's fast in testing but impossible to maintain in production, with a CMS nobody likes and an API layer nobody fully understands. Going headless is a real architectural decision. It's not a theme switch.
We've helped DTC brands, B2B sellers, and omnichannel retailers across retail, fashion, and consumer goods build headless Shopify stores that work in production, not just in demos.
This guide gives you a straight answer on what headless Shopify involves, how to pick the right build approach, and what a realistic implementation looks like, step by step.
| Aspect | Detail |
|---|---|
| What it is | Shopify backend connected to a custom frontend via the Storefront API |
| Best for | High-traffic brands, multi-channel sellers, complex UX requirements |
| Main tools | Shopify Storefront API, Hydrogen, Next.js, Remix, Sanity, Contentful |
| Typical build time | 8 to 16 weeks for a production-ready store |
| Cost range | $30,000 to $120,000 depending on complexity and team |
| SEO risk | Low, if server-side rendering is used from day one |
| Who should skip it | Merchants under $1M/year in revenue with no dedicated dev team |
Headless Shopify is powerful, but it isn't for everyone. The brands that get the most from it are those with clear performance bottlenecks, custom UX needs, or omnichannel ambitions a standard Shopify theme simply can't support.
What is a headless Shopify store?
Standard Shopify ties your frontend and backend together. Your theme controls how the store looks, and Shopify's engine handles everything behind it. Change one, and you're working within the constraints of the other.
Headless separates these two layers. Shopify still manages your products, inventory, cart, and checkout. But your frontend (the pages customers actually browse) runs on a completely separate system. The two talk to each other through Shopify's Storefront API, a GraphQL interface that pulls product data, handles cart updates, and passes orders back to Shopify.
This means you can build your storefront in Next.js, Remix, or any JavaScript framework and style it exactly how you want, without touching a Liquid template.
Why merchants switch to headless Shopify commerce
1. Performance
Standard Shopify themes carry a lot of weight. Third-party apps, Liquid rendering, and bloated JavaScript all add to load time. A well-built headless store using server-side rendering (SSR) can achieve a Lighthouse performance score above 90 and a Largest Contentful Paint under 2.5 seconds.
For a store doing 50,000 or more monthly sessions, a 1-second improvement in page load translates to a 7 percent increase in conversions, according to Google's own research. That's not a rounding error. That's revenue.
2. Design and UX freedom
Headless removes the ceiling on what your storefront can look like and how it behaves. Custom animations, non-standard product page layouts, AR product previews, and deeply personalised experiences all become possible. You're building with standard web technology, not working around Shopify's theme architecture.
In our work with a mid-size fashion brand, the design team had spent two years patching Liquid workarounds to get the product page they wanted. After moving headless, they rebuilt it in three weeks and cut their time-to-interactive by 38 percent.
3. Omnichannel selling
A headless store isn't just a website. The same Shopify backend can power a mobile app, a kiosk, a smart TV experience, or a voice interface. All of them read from the same product and cart data. This is why brands with serious omnichannel ambitions almost always end up going headless.
4. Content and commerce, together
A headless setup lets you bring in a dedicated CMS (Contentful, Sanity, Prismic) alongside your Shopify product data. Editorial teams can manage rich content independently of the dev team. Product pages can contain long-form content, video embeds, and interactive elements without Metafield gymnastics.
Shopify Hydrogen vs. a custom headless build
This is where most teams get stuck. Shopify released Hydrogen in 2022 (a React-based framework built for headless Shopify) along with Oxygen (Shopify's own hosting for Hydrogen apps). It's a strong option, but it's not the only one.
| Dimensions | Shopify Hydrogen | Custom Build (Next.js or Remix) |
|---|---|---|
| Framework | React (Shopify's own) | Your choice |
| Hosting | Oxygen (Shopify CDN) | Vercel, Netlify, AWS |
| Shopify integration | Deep, built-in | Via Storefront API (more setup) |
| Flexibility | High within React | Maximum |
| Learning curve | Moderate | Higher |
| Best for | React teams starting fresh | Teams with existing stacks or strong framework opinions |
Our recommendation: if your team is comfortable in React and starting from scratch, Hydrogen is the faster path to production. If you have an existing frontend stack or specific infrastructure requirements, a custom Next.js or Remix build gives you more long-term control.
We've worked with brands on both paths. Hydrogen gets you to launch faster. A custom build is harder to set up but easier to own when your team already knows the stack well.
How to start a headless Shopify store: just in 4 steps
Step 1. Confirm headless is the right call
Before you write a single line of code, answer these questions honestly:
- Do you have a frontend development team, in-house or external?
- Is your store generating enough revenue to justify a $30,000 or more build?
- Do you have specific UX requirements that Shopify themes can't meet?
- Are you selling across multiple channels where a shared backend matters?
If you answered yes to at least three of these, headless is likely the right call. If you're under $1M/year in revenue with a single Shopify theme, optimise that theme first. A rushed headless build will cost more than it returns.
Step 2. Choose your stack
Pick three core layers before you start building:
- Commerce backend: Shopify (use Plus if you need B2B, custom checkout, or volume discounts)
- Frontend framework: Hydrogen for React teams, Next.js for maximum flexibility
- CMS (optional but recommended): Sanity or Contentful for content-heavy stores
For hosting, Oxygen is free with Shopify and a natural fit for Hydrogen projects. For custom builds, Vercel pairs well with Next.js.
Step 3. Set up Shopify and the Storefront API
In your Shopify admin, create a new private app (or use the Headless channel if you're on Shopify Plus). Generate your Storefront API access token. This is what your frontend uses to query products, manage carts, and handle checkout redirects.
Test your first GraphQL query against the API before you build anything else. Make sure your product data, collections, and metafields return cleanly.
A mid-size electronics retailer we worked with skipped this step, built 60 percent of their frontend, then found their product metafields weren't structured in a way the Storefront API could serve efficiently. Two weeks of refactoring followed. Don't skip this.
Step 4. Build, test, and launch
Build your core pages first: home, collection, product detail, cart, and checkout redirect. Shopify handles the actual checkout (unless you're on Plus with a custom checkout extension), so your checkout page is a redirect, not a full build.
Set up server-side rendering from day one. SSR is non-negotiable for SEO on a headless store. Static generation works well for product and collection pages that don't change frequently. Dynamic rendering handles personalised or frequently updated content.
Run a full Core Web Vitals audit before launch. Target LCP under 2.5 seconds, CLS under 0.1, and INP under 200ms.
Final thoughts
Headless Shopify isn't a trend. For the right brands, it's the architecture that lets your commerce team and your creative team both do their best work without getting in each other's way.
The decision comes down to this: if you're hitting real limits on what Shopify themes can do, and you have the team and budget to build properly, headless will return the investment. If you're not there yet, a well-optimised theme will take you further than a rushed custom build.
The technology is mature. Hydrogen, Next.js, and the Shopify Storefront API are all production-proven at scale. The risk isn't the stack. It's underestimating the build scope and skipping the groundwork.
Ready to build a headless Shopify store with out Shopify Experts?
At Lucent Innovation, we've built headless Shopify stores for DTC brands, B2B sellers, and omnichannel retailers. We work across Hydrogen, Next.js, and Remix, and we help teams pick the stack that matches their situation, not just the one that's popular right now.
Whether you need a single senior headless developer or a full squad to own the build end to end, we can match the engagement to your timeline and budget.
