Headless Shopify with Hydrogen: when it makes sense

What headless means in Shopify

In a standard Shopify store, the Online Store 2.0 theme handles everything the customer sees: pages, collections, product pages and cart. Shopify serves it, caches it and connects it to the theme editor, apps and languages without you having to think about servers.

In a headless store, that theme goes away. The front end is a standalone application that requests data from Shopify through the Storefront API: products, collections, prices, cart. Shopify still manages the catalog, inventory, orders and checkout, but what the customer sees is built and maintained by you.

Hydrogen and Oxygen

Hydrogen is Shopify's official framework for headless stores. It is based on React and React Router (formerly Remix) and comes with ready-made pieces for working with the Storefront API: cart, product queries, analytics, SEO and caching. It saves a lot of work compared with building everything from scratch in another framework.

Oxygen is Shopify's hosting infrastructure for Hydrogen stores, included on most paid plans. You are not required to use it, but it simplifies deployments and saves you from paying for separate hosting. If you prefer another framework, such as Next.js, you can also go headless without Hydrogen; you just give up those built-in pieces.

What you gain with headless

The big advantage is freedom. You can build experiences a theme does not easily allow, integrate Shopify with other systems in a single site or serve several stores from one front end.

• Highly custom interfaces, such as complex product configurators
• Content managed in a headless CMS alongside the Shopify catalog
• A single site that combines the store, editorial content and your own applications
• Full control over performance and how each page loads
• A shared front end for several stores or brands

What you lose or have to rebuild

This is the part people talk about least. When you remove the theme, you lose the theme editor: the marketing team can no longer move sections or change blocks without a developer, unless you set up a CMS or use metaobjects as a content source.

App Store apps that install into the theme through app blocks, such as reviews, filters or loyalty widgets, do not work on their own in a headless front end. Each one has to be integrated through its API, if the app allows it. The same goes for features a theme gives you for free, such as some aspects of languages, markets or structured data, which you will have to implement yourself.

And the cost does not end at launch. A headless store is an application that needs maintenance: updating dependencies, keeping up with API changes and fixing whatever breaks. You need a development team available on an ongoing basis.

Checkout is still Shopify

Even with a headless front end, payment happens in Shopify checkout. That is an advantage, because you keep Shopify Payments, payment methods, taxes and checkout security without building them. Checkout customizations work the same as in any store, with Checkout Extensibility and Shopify Functions, depending on what your plan allows.

The same applies to the rest of the admin: catalog, inventory, discounts, orders, customers, Markets and Flow keep working as usual. The team running the store day to day barely notices the change; the people who notice are those who edit the site content and those who maintain it technically.

Middle-ground options before going headless

There is a lot of ground between a standard theme and a fully headless store. Many of the reasons a brand considers headless can be solved without leaving the theme, at lower cost and without losing the editor.

A custom-built Online Store 2.0 theme allows fully original designs, sections the team can combine freely and structured content with metaobjects. Interactive experiences, such as a product configurator or a comparison tool, can be built as components inside the theme, loading their JavaScript only on the pages that need it.

Another option is a hybrid approach: keep the store on the theme and move only the part that justifies it into a separate application, such as a custom design tool or a private area for trade customers, connected to Shopify through the API. That way you focus development spend where it adds value and the rest of the store stays easy to maintain.

• Custom theme with your own sections and blocks
• Metaobjects for structured editorial content
• Interactive components loaded only where they are used
• A separate application for one specific feature, connected through the API

When it makes sense and when it does not

Headless pays off in projects with experience requirements a theme cannot meet, with an in-house technical team or a long-term partner, and with budget to maintain an application over time. Large brands with a lot of editorial content, multiple stores or interactive experiences are the typical case.

For most stores, a custom-developed Online Store 2.0 theme covers what they need: original design, flexible sections, metaobjects, good performance and compatibility with the whole app ecosystem. If speed is what you are after, a well-built theme without unnecessary apps is usually enough. Before going headless, ask yourself what you cannot do with a theme and whether it is really worth what it costs to maintain.