Headless commerce means keeping Shopify's back end (products, stock, orders, checkout) while building the store's front end as a separate application instead of a Shopify theme. The front end connects to Shopify through the Storefront API; Shopify's own solution is the Hydrogen framework and the Oxygen hosting service. Headless makes sense for brands that run multiple front ends (web, mobile app, in-store screens), need a fully custom experience and have the technical team to build and maintain it. For most stores, though, a well-built Shopify theme delivers a faster, more economical and easier-to-manage result.
In this article we explain how headless architecture works, its advantages and costs, and when to choose it.
How does headless Shopify work?
In a traditional Shopify store, the front end is rendered on Shopify's servers by a theme written in Liquid. In a headless setup:
The back end stays in Shopify: product, stock, customer, order and checkout management continues in the Shopify admin.
The front end is a separate application: usually built as a React-based application running on its own server.
The two talk via APIs: the front end gets product and cart data through the Storefront API; the Customer Account API is used for customer accounts.
Checkout is completed on Shopify: even in a headless setup, payment happens on Shopify's checkout.
What are Hydrogen and Oxygen?
Hydrogen: Shopify's React-based framework for headless stores. It provides ready-made e-commerce components such as cart, product, collection and search.
Oxygen: Shopify's own infrastructure for hosting Hydrogen applications. It lets you deploy the app without a separate hosting service. Availability and terms may vary by plan.
Besides Hydrogen, headless Shopify stores can also be built with other frameworks such as Next.js; in that case hosting is on services such as Vercel.
Advantages and costs of headless
Advantages | Costs and risks |
|---|---|
Full freedom in design and user experience | Development costs far higher than theme projects |
A single data source for web, mobile app and other channels | Requires a technical team for ongoing maintenance and development |
Flexible integration with a content management system (CMS) | Many Shopify apps don't work on the front end directly and need custom integration |
High performance when built correctly | The theme editor can't be used; the marketing team may become dependent on developers for changes |
Some built-in Shopify features (for example A/B testing with Rollouts) may not support headless stores |
When should you choose headless?
Headless usually makes sense when:
You use the same product data across multiple front ends such as a website, mobile app and in-store screens
You need to combine Shopify with an advanced CMS for a content-heavy brand experience
You need highly custom interactions (advanced product configurators, custom shopping flows) that can't be achieved with themes
You have a technical team or partner to develop and maintain this setup over the long term
A theme-based store is the better choice when:
Your goal is a fast launch and low running costs
It's important that your marketing team can edit pages and campaigns on its own
You rely heavily on the Shopify app ecosystem
An alternative to consider instead of headless
Most brands wanting to go headless are actually looking not for total freedom but for a brand-specific design and high performance. This need can often be met with a lightweight, custom theme foundation, without the cost and complexity of headless. At Byte we build brand-specific designs on a lightweight theme framework we've developed ourselves; we explain this approach in our article on paid and free themes.
For mobile app needs, there are also app solutions that integrate with Shopify without going headless. You can find the options on our Shopify mobile app development page.
Frequently asked questions
Do you need Shopify Plus for headless Shopify?
The Storefront API is available on all plans. However, for enterprise-scale headless projects, Shopify Plus is usually preferred for API limits, multi-store management and support.
Is a headless store disadvantaged for SEO?
Not when built correctly. But many SEO features that themes provide automatically, such as server-side rendering, meta tags, structured data, sitemaps and redirects, need to be built separately.
Can I move my existing theme-based store to headless?
Yes. As product, customer and order data stays in Shopify, no data migration is needed; only the front end is rebuilt. But it's a comprehensive redesign and development project.
Let's choose the right architecture together
Headless is a powerful option, but not the right one for every brand. If you'd like to assess together whether a theme-based or headless setup suits your store better, get in touch through our Shopify store setup page.
