When should eco DTC go headless with Shopify Hydrogen?
Quick answer
Stay on Shopify Online Store until you can name a storefront constraint a theme cannot absorb. Hydrogen is a custom React storefront on Shopify commerce; checkout, admin, and Markets stay Shopify. Go headless when you will staff Storefront API, keep metafields as source of truth, and keep checkout honest. Do not go headless because Hydrogen is fashionable. PDP proof still lives in the PDP conversion guide. Country claims still live in Markets.
Vs other Shopify guides
| Guide | Job |
|---|---|
| Shopify PDP conversion | Proof vs add-to-cart on a theme PDP |
| Shopify Markets | Country catalogs, duties, and claim scope |
| DPP on Shopify | Metafields and QR for passport data |
| This guide | When the commerce storefront should leave Online Store for Hydrogen |
This is not a Hydrogen tutorial. If the honest sentence is “we have not staffed metafields,” fix that on the theme first.
What Hydrogen actually is
Hydrogen is a React framework for custom storefronts. Oxygen hosts that storefront. Catalog, discounts, admin, and checkout stay on Shopify. You replace Liquid with an app that queries Storefront API. Theme app extensions often do not run there. Checkout UI extensions still run on checkout. Metafields still live on products; someone must map them into components the way a theme mapped them into sections.
When Online Store still wins
- Merchants, not engineers, own weekly merchandising
- Proof already fits metafields plus a competent theme or a small custom section
- Reviews, subscriptions, loyalty, or quizzes are theme-app based and you have not budgeted to rebuild them
- International is a Markets problem, not a React i18n rewrite
- Paid LPs can live as Online Store templates; see landing page CRO
- Checkout work is extensibility and trust copy, not a new cart UI; see EMPCO checkout claims
“Our competitor is on Hydrogen” is not a constraint. Headless on a messy catalog is a more expensive messy catalog.
When Hydrogen is justified
Go when Online Store will not absorb a named storefront constraint in the next two quarters without fighting the editor every week.
- Proof as product UI (passport, quiz-to-PDP) is already an app. The product quiz still has to write the same SKU the Hydrogen PDP will show.
- Campaign velocity: drops and proof essays need a design system, and theme hacks are breaking.
- Paid-media performance after a clean theme: you already cut apps and images, and LCP on ad-landing PDPs is still the constraint. Measure first. Heavy React can also fail LCP.
- A staffed front-end team that will own queries, preview, and components after launch.
Hybrid is allowed: Online Store for the shop, a custom front for editorial, checkout still on Shopify, one claims list. Full Hydrogen for commerce is for when the shop itself is the constraint.
What must stay true
| Layer | Rule |
|---|---|
| Claims | Same substantiation as checkout, Markets, and support macros. A longer story is not a stronger claim. |
| Checkout | Preorder, gift, climate, and shipping lines on the Hydrogen PDP must match Shopify checkout. |
| Metafields | Carbon, DPP, and country disclaimers live in admin and are queried, not hardcoded in React. |
| Markets | Headless does not replace Markets. Do not hide a claim the EU checkout still shows. |
| Feeds | A beautiful PDP missing from catalog feeds is a split. See agentic checkout. |
| Apps | Inventory every theme app: keep on checkout only, rebuild, or drop. Loyalty and reviews fail projects six months in. |
Go / no-go
| Call | When |
|---|---|
| No-go | No named constraint, merch must stay in the theme editor, critical apps have no Hydrogen path, or nobody owns React after launch |
| Go | Proof or campaign UI is an app, paid PDPs fail on a cleaned theme, you have a staffed front, metafields stay source of truth, checkout and Markets stay the honesty layer |
| Partial go | Only editorial needs a custom front; the shop stays Online Store; one claims list across both |
Budget Hydrogen as a product (discovery, build, ongoing API and claims ownership), not a redesign invoice. Put the go/no-go in the fractional CMO brief or agency SOW. Do not sequence it as “then we fix claims.” Headless amplifies whatever you already have.
Stack is not a strategy
If you cannot name the storefront constraint in one sentence, you are buying a redesign, not a go-to-market decision.
Frequently asked questions
When should eco DTC go headless with Shopify Hydrogen?
When you can name a storefront constraint Online Store will not absorb, you will staff the React front, metafields stay source of truth, and checkout plus Markets remain the honesty layer. Otherwise stay on Online Store.
Does Hydrogen replace Shopify checkout?
No. Hydrogen replaces the Online Store theme. Checkout remains Shopify checkout plus checkout extensibility. Treat checkout copy, Shop Pay, and trust as a separate honesty layer.
Can we keep our theme apps on Hydrogen?
Many theme app extensions will not run on a Hydrogen storefront. Inventory every app before you go. Rebuild, replace, or drop. Checkout apps and admin apps are a different question from storefront widgets.
Is Hydrogen required for Core Web Vitals?
No. Fix images, apps, and theme debt first. Hydrogen can help when the remaining constraint is storefront architecture and you will staff it. Measure on the URLs ads land on.
Should Markets wait until we are on Hydrogen?
No. Markets is a commerce and claims rollout. Do it on Online Store if that is your storefront. Do not use a headless project to postpone country catalogs and claim rules.