Hydrogen is the storefront layer
Hydrogen is Shopify’s opinionated toolkit for custom storefronts built with React Router. It supplies commerce-focused components, utilities, and patterns for a storefront that uses Shopify data.
Definition and architecture
What Is Shopify Hydrogen?
Shopify Hydrogen is Shopify’s toolkit for building a custom, customer-facing storefront with React Router while Shopify continues to power commerce operations and checkout.
In plain English: Hydrogen changes the frontend shoppers see. Shopify Admin still holds the catalog and operational data, the Storefront API supplies commerce data to the storefront, and Shopify Checkout completes the transaction.
Hydrogen data flow
How Shopify Hydrogen fits into the Shopify architecture
The storefront is one layer in a four-part commerce flow. Each layer has a distinct responsibility.
Data flow: Shopify Admin (catalog/content/operations) → Storefront API → Hydrogen storefront (React/rendering/UX) → Shopify Checkout (transaction completion).
Step 1
Shopify Admin
Catalog, content, and operations
Merchants manage products, inventory, collections, content, and day-to-day commerce operations in Shopify.
Step 2
Storefront API
Commerce data interface
The Storefront API gives the custom storefront access to the Shopify commerce data it needs to render shopping journeys.
Step 3
Hydrogen storefront
React, rendering, and UX
Hydrogen provides the React Router storefront layer that handles routes, data loading, rendering, and the customer-facing experience.
Step 4
Shopify Checkout
Transaction completion
The Hydrogen cart sends the customer to Shopify Checkout to complete the transaction.
Architecture facts
What Hydrogen changes—and what stays in Shopify
These boundaries show exactly where Hydrogen fits while Shopify continues to run the core commerce system.
Shopify remains the commerce system
A Hydrogen build does not move the catalog or daily store operations out of Shopify. The custom frontend reads commerce data through Shopify APIs while the merchant continues to work in Shopify Admin.
Checkout remains a Shopify surface
Hydrogen owns the browsing and cart experience before checkout. When the customer is ready to buy, the storefront hands the transaction to Shopify Checkout.
Hydrogen vs Liquid
Two storefront models, one Shopify commerce system
The architectural difference is simple; the commercial decision deserves its own analysis.
Liquid
Shopify’s theme model
Liquid storefronts render through Shopify’s theme system, including templates, sections, blocks, and theme-editor workflows.
Hydrogen
Shopify’s custom storefront toolkit
Hydrogen storefronts are React Router applications that render a custom frontend and retrieve Shopify commerce data through APIs.
For the deeper architectural and operating tradeoffs, read the Shopify Hydrogen vs Liquid comparison.
If your question is whether Hydrogen fits a particular store, use the Shopify Hydrogen adoption guide. That page owns fit and adoption advice.
FAQ
Shopify Hydrogen definition and architecture FAQs
What is Shopify Hydrogen?
Shopify Hydrogen is Shopify’s React Router toolkit for building custom storefronts. It provides commerce-focused components, utilities, and conventions for rendering a customer-facing storefront with Shopify data.
What role does the Storefront API play in Hydrogen?
The Storefront API is the data interface between Shopify and the Hydrogen storefront. The storefront queries it for the commerce data needed to render products, collections, navigation, cart states, and other shopping experiences.
Does Hydrogen replace Shopify Admin?
No. Shopify Admin remains the operating system for catalog, content, inventory, and commerce operations. Hydrogen changes the customer-facing storefront layer, not where the merchant manages the store.
Does Hydrogen replace Shopify Checkout?
No. Hydrogen can own the storefront and cart experience, then send the customer to Shopify Checkout to complete the transaction.
Is Hydrogen the same as a Liquid theme?
No. Liquid is Shopify’s theme model, while Hydrogen is a custom React Router storefront application that uses Shopify APIs. This is an architectural distinction; the better fit depends on the store’s requirements.
Read the full Hydrogen vs Liquid comparisonContinue from the definition
Use the route that matches your next question.
For implementation details, see the Shopify Hydrogen developer route. To review relevant delivery context, browse the case studies. If the architecture is already understood and you need help with a concrete build, you can contact Emre.