What Is Shopify Hydrogen?
Shopify Hydrogen is Shopify's official React-based framework for building custom, headless storefronts. It gives developers pre-built components, hooks, and utilities for working with the Storefront API, so they can build a fully bespoke front end while Shopify still handles the catalog, cart, and checkout on the back end. Hydrogen is built on Remix and is designed to deploy on Oxygen, Shopify's global hosting for Hydrogen apps. It is aimed at brands that need more design and performance control than themes allow.
- What it is
- Shopify's React framework for headless custom storefronts (Shopify.dev)
- Built on
- Remix, a full-stack React framework, with Shopify components and hooks (Shopify.dev)
- Data source
- Fetches catalog, cart, and content through the Storefront API (GraphQL)
- Hosting
- Designed to deploy on Oxygen, Shopify's global hosting for Hydrogen
- License
- Open source; you own the storefront codebase
- Best for
- Brands needing design or performance control beyond Liquid themes
What Hydrogen is #
Shopify Hydrogen is Shopify's own framework for building headless storefronts using React. In a standard Shopify store, the front end is a Liquid theme tightly coupled to Shopify's back end. Hydrogen decouples that: it provides the tools to build a completely custom front end in React while Shopify continues to manage products, inventory, cart logic, and checkout behind the scenes through its APIs. It ships with pre-built components, hooks, and utilities specifically for commerce, so developers do not reinvent common patterns like product galleries, cart state, or money formatting. Built on the Remix full-stack React framework, Hydrogen handles routing, data loading, and server rendering in a modern, performance-focused way. It is open source, meaning you own and control the storefront code. Hydrogen suits brands that have outgrown what themes allow and want pixel-level design freedom or specific performance characteristics. We build these storefronts as part of custom /services/web-app-development, pairing Hydrogen's frontend flexibility with Shopify's reliable commerce back end.
How Hydrogen fits the headless model #
Hydrogen is Shopify's opinionated answer to going headless. Headless commerce means separating the presentation layer, what shoppers see, from the commerce engine that manages catalog, cart, and checkout. Instead of piecing together a generic React framework, a GraphQL client, and your own commerce components, Hydrogen bundles Shopify-aware tooling so the headless path is faster and more supported. It fetches data from the Storefront API and gives you components that already understand Shopify concepts like variants, selling plans, and cart lines. Because it is the first-party framework, it tends to stay current with new Shopify capabilities and integrates cleanly with Oxygen hosting and checkout. The tradeoff versus a fully custom stack is that you adopt Shopify's chosen foundation, Remix, rather than, say, Next.js. For most Shopify-centric headless projects that is an advantage, not a limitation. When we scope a headless build under /services/ecommerce-development, Hydrogen is often the recommended starting point precisely because it reduces the plumbing work and keeps the project aligned with Shopify's roadmap.
Built on Remix #
Hydrogen is built on Remix, a full-stack React framework that emphasizes web fundamentals, server-side rendering, and efficient data loading. This foundation matters because it shapes how Hydrogen apps perform and how developers work. Remix uses a loader-and-action model where data is fetched on the server close to render time, which produces fast initial page loads and good SEO because pages arrive as rendered HTML rather than blank shells hydrated later. It also embraces standard web APIs and progressive enhancement, so forms and interactions degrade gracefully. For a storefront, these traits translate into speed and crawlability, both of which affect conversion and search visibility. Adopting Remix means developers familiar with it are productive immediately, and the patterns are well documented. Performance is a first-class concern in commerce, so building on a framework tuned for it is a real benefit. We treat Core Web Vitals and load performance as central goals in these builds, aligning the work with /services/speed-optimization so the custom storefront is genuinely fast, not just flexible.
Example: fetching products with Hydrogen #
Hydrogen fetches storefront data through the Storefront API using GraphQL, typically inside a Remix loader that runs on the server. The simplified example shows a loader querying products and the component receiving that data, illustrating the server-fetch pattern that keeps pages fast and crawlable.
// app/routes/products._index.jsx
export async function loader({context}) {
const {products} = await context.storefront.query(`
query Products {
products(first: 12) {
nodes { id title handle
priceRange { minVariantPrice { amount currencyCode } }
}
}
}
`);
return {products};
}
export default function Products({loaderData}) {
return loaderData.products.nodes.map((p) => (
<a key={p.id} href={`/products/${p.handle}`}>{p.title}</a>
));
}Deploying on Oxygen #
Hydrogen is designed to deploy on Oxygen, Shopify's global hosting platform built specifically for Hydrogen storefronts. Oxygen runs your storefront on a worldwide edge network, meaning your code executes close to shoppers geographically, which lowers latency and speeds up page delivery. Because Oxygen is purpose-built for Hydrogen and integrated into the Shopify ecosystem, deployment is streamlined: you push code and Shopify handles the serverless infrastructure, scaling, and distribution, with tight integration to your store and checkout. This removes much of the operational burden of hosting a custom storefront yourself. Oxygen is included for Shopify plans in the way Shopify specifies, so eligible merchants get first-party hosting without arranging separate infrastructure. You can host Hydrogen elsewhere if needed, since it is standard Remix, but Oxygen offers the smoothest, most integrated path. Hosting choices affect speed, reliability, and cost, which is why we evaluate them early. For non-Hydrogen custom apps we advise on hosting through /services/managed-hosting, but for Hydrogen, Oxygen is usually the natural fit.
Checkout still runs on Shopify #
A crucial point about Hydrogen is that even though the storefront is fully custom, checkout still runs on Shopify. Hydrogen builds the browsing, product, and cart experience, but when a shopper checks out, they enter Shopify's secure, PCI-compliant checkout rather than something you rebuild yourself. This is a major advantage: you get design freedom over the shopping experience without taking on the enormous responsibility and risk of building and securing a payment flow. Shopify's checkout also brings accelerated options like Shop Pay, fraud analysis, and the reliability that converts. Hydrogen passes the cart to checkout through the Storefront API's cart functionality, so the handoff is seamless. For Plus merchants, checkout extensibility still applies to customize that checkout in supported ways. This division of labor, custom front end plus Shopify-managed checkout, is what makes headless Shopify practical rather than reckless. We design the cart-to-checkout handoff carefully during build so the transition feels native and conversion is protected end to end.
When Hydrogen is worth it #
Hydrogen and headless in general are not for every store. They make sense when a brand needs design or interaction beyond what themes allow, wants specific performance characteristics, or plans to serve content from multiple sources through a custom front end. The cost is real: a Hydrogen storefront is a software project requiring React developers, ongoing maintenance, and more upfront investment than configuring a theme. You also give up the visual theme editor, so non-technical staff cannot restyle pages by dragging blocks. For many small and mid-sized merchants, a well-built theme delivers everything they need at a fraction of the cost and complexity. Hydrogen pays off for brands where the storefront is a competitive differentiator and the budget supports a custom build and its upkeep. We give owners an honest assessment rather than defaulting to headless, because the wrong choice adds cost without return. If you are weighing custom versus theme, we can scope both paths at /contact so you decide with clear tradeoffs.
Hydrogen's developer experience #
A practical reason teams choose Hydrogen over assembling their own headless stack is developer experience. Hydrogen ships with a starter template, local development tooling, and commerce-specific components and hooks, so developers begin with working product pages, cart logic, and money formatting rather than building those primitives from scratch. It includes conventions for querying the Storefront API, handling cart state, and managing SEO metadata, which reduces boilerplate and common mistakes. Because it is first-party, its documentation, examples, and updates track Shopify's platform closely, so new commerce features tend to arrive with supported patterns. This lowers both the initial build cost and the long-term maintenance burden compared with a bespoke framework where you own every integration detail yourself. Developers familiar with React and Remix are productive quickly, which shortens timelines. Good developer experience is not a vanity metric; it translates directly into faster delivery and fewer bugs on the storefront that customers actually use. We factor this in when recommending Hydrogen for suitable projects under /services/web-app-development.
Hydrogen vs a Liquid theme #
The practical difference between Hydrogen and a Liquid theme is control versus simplicity. A Liquid theme is fast to launch, editable through Shopify's visual editor, maintainable by non-developers, and supported by a huge ecosystem of themes and apps. It suits the vast majority of stores well. Hydrogen gives total control over markup, behavior, and performance, but it is a custom React application that needs developers to build and maintain, and it sits outside the drag-and-drop theme editor. Hydrogen does not automatically make a store faster or better; it removes the ceiling for teams that have a reason to push past it. Choosing wrongly is costly in both directions: over-building with Hydrogen wastes budget, while forcing a theme to do something it cannot frustrates a brand with genuine custom needs. The right answer depends on your design ambitions, budget, and team. We help merchants make that call objectively as part of /services/shopify-web-design, recommending the simplest approach that meets the actual goals.
FAQ
What is Shopify Hydrogen used for?
Hydrogen is used to build custom, headless Shopify storefronts in React. It provides commerce-aware components, hooks, and Storefront API tooling so developers create a fully bespoke front end while Shopify handles the catalog, cart, and checkout. It suits brands needing design or performance control beyond what standard Liquid themes can offer.
Is Hydrogen the same as headless Shopify?
Hydrogen is Shopify's official framework for building headless storefronts, but headless Shopify is broader. You can go headless with other frameworks like Next.js using the Storefront API directly. Hydrogen is the first-party, Shopify-supported path, built on Remix and optimized for Oxygen hosting, which streamlines the headless approach for Shopify-centric projects.
What framework is Hydrogen built on?
Hydrogen is built on Remix, a full-stack React framework focused on server-side rendering, efficient data loading, and web fundamentals. Remix's loader-and-action model fetches data on the server for fast, crawlable pages, which benefits both performance and SEO. Because it is standard Remix, developers familiar with it are productive quickly.
Where do Hydrogen storefronts get hosted?
Hydrogen is designed to deploy on Oxygen, Shopify's global edge hosting built specifically for Hydrogen storefronts. Oxygen runs your code close to shoppers for low latency and handles serverless scaling and deployment within the Shopify ecosystem. Because Hydrogen is standard Remix, you can host it elsewhere, but Oxygen offers the smoothest, most integrated path.
Does Hydrogen replace Shopify checkout?
No. Even with a fully custom Hydrogen storefront, checkout still runs on Shopify's secure, PCI-compliant system. Hydrogen builds browsing, product, and cart experiences, then hands the cart to Shopify checkout, preserving accelerated options like Shop Pay and fraud protection. This lets you customize the storefront without rebuilding or securing a payment flow yourself.
Should a small store use Hydrogen?
Usually not. Hydrogen is a custom software project requiring React developers and ongoing maintenance, and it drops the visual theme editor. For most small and mid-sized merchants, a well-built Liquid theme delivers what they need at far lower cost and complexity. Hydrogen pays off for brands where the storefront is a genuine competitive differentiator with budget to match.
How Local Web Advisor checks this for you
Is your own website getting e-commerce right?
Our free AI audit scans your site and tells you — in plain English — exactly what to fix for e-commerce and seven other areas, with the business impact and the fix for each. No login needed to start.
Run my free website audit →Was this helpful?