Shopify Hydrogen: headless commerce explained simply

Beyond themes: custom commerce

Shopify Hydrogen is Shopify’s React framework for building headless storefronts. It separates the front-end (the interface the customer sees) from the Shopify back-end (product, order and payment management). This architecture offers total freedom over the user experience while keeping the power of the Shopify back-end. Hydrogen is hosted on Oxygen, Shopify’s edge infrastructure, for optimal performance.

How headless architecture works

In a standard Shopify architecture, the theme and the back-end are coupled. The theme uses the Liquid language to display data. Customizations are limited by Liquid’s capabilities and the theme’s structure.

With Hydrogen, the front-end is an independent React application that communicates with Shopify through the Storefront API (GraphQL). You have full control over every pixel of the interface. Animations, interactions and navigation are fully customizable.

Oxygen, Shopify’s edge hosting platform, deploys your Hydrogen storefront on servers close to your customers worldwide. Server-side rendering (SSR) with streaming guarantees fast load times.

Advantages of Hydrogen

Performance is the most measurable advantage. Hydrogen uses React Server Components to minimize the JavaScript sent to the browser. SSR streaming displays content progressively, which improves the Largest Contentful Paint (LCP) and Core Web Vitals.

Creative flexibility is the other major advantage. You are no longer limited by a theme’s structure. Product pages, collections and checkout can have radically different designs. Interactive experiences (product configurators, 3D visualization, guided journeys) are possible.

Limitations to know

Hydrogen requires React and GraphQL development skills. The cost of development and maintenance is significantly higher than a standard Shopify theme. Shopify updates do not propagate automatically to the front-end, which requires ongoing maintenance.

The Shopify app ecosystem is partially compatible. Apps that modify the front-end (pop-ups, widgets, reviews) do not work directly with Hydrogen. They must be integrated manually through their APIs.

Who is Hydrogen for?

Hydrogen is suited for brands with unique design requirements, a substantial development budget and a technical team able to maintain a React application. Luxury brands, DTC (Direct-to-Consumer) brands with a strong identity and complex marketplaces are the typical use cases.

For most SMBs and merchants, Shopify 2.0 themes with customizable sections offer an excellent compromise between flexibility and simplicity. Hydrogen’s cost-benefit ratio is justified only for projects with specific requirements.

LCMH, a Shopify partner in Alsace, helps you evaluate whether Hydrogen is right for your project.

For SEO fundamentals, read our Shopify SEO guide.

Sources

1. Shopify, Hydrogen. hydrogen.shopify.dev
2. Shopify, Oxygen Hosting. shopify.dev/docs/custom-storefronts/oxygen
3. Shopify, Storefront API. shopify.dev/docs/api/storefront