Shopify Hydrogen is Shopify's React-based framework for building fully custom headless storefronts. It gives developers complete control over the frontend whilst leveraging Shopify's robust commerce backend through the Storefront API. At Born Digital, we have built several Hydrogen storefronts for clients who needed performance and design flexibility that Liquid themes simply cannot deliver. This guide covers what you need to know to get started.
What Hydrogen Brings to the Table
Hydrogen is built on Remix, which means you get server-side rendering, nested routing, and progressive enhancement out of the box. Shopify provides a set of commerce-specific components and hooks — things like cart management, product variants, and customer authentication — that abstract away the complexity of working directly with the Storefront API's GraphQL schema.
The key advantage over a standard Liquid theme is control. You decide exactly how pages render, how data is fetched, how animations work, and how the checkout flow feels. There are no theme constraints, no Liquid template limitations, and no performance penalties from bloated app scripts.
Setting Up a Hydrogen Project
Getting started with Hydrogen requires a Shopify store with Storefront API access. The setup process involves:
- Scaffolding: Use the Shopify CLI to create a new Hydrogen project. The CLI generates a fully configured Remix app with Shopify's commerce components pre-installed.
- Storefront API tokens: Generate a public and private Storefront API token from your Shopify admin. The public token is used for client-side requests; the private token handles server-side data fetching.
- Environment configuration: Set your store domain and API tokens in environment variables. Hydrogen's built-in utilities handle authentication and request signing.
- Routing: Hydrogen uses file-based routing via Remix. Product pages, collection pages, and custom landing pages are all defined as route files with loader functions that fetch data from the Storefront API.
Working with the Storefront API
The Storefront API is a GraphQL API that exposes products, collections, customers, carts, and checkout data. Hydrogen provides a storefront client that simplifies query execution with built-in caching strategies. You write standard GraphQL queries and the client handles authentication, error handling, and cache invalidation.
One critical consideration is query complexity. Shopify imposes rate limits based on query cost, not just request volume. Deeply nested queries that fetch products with all variants, images, and metafields can hit cost limits quickly. We recommend using fragment-based queries and fetching only the fields you actually render on each page.
Performance and Caching
Hydrogen's caching layer is one of its strongest features. You can define cache strategies per route — static pages can use long-lived caches while dynamic content like cart state uses short TTLs. When deployed to Shopify Oxygen (their hosting platform) or a CDN like Cloudflare Workers, you get edge caching that delivers sub-200ms responses globally.
For European businesses, this is particularly valuable. Edge nodes in Frankfurt, Amsterdam, and London ensure fast delivery across the EU without the latency penalty of routing through US-based origins. Combined with streaming SSR, users see meaningful content within milliseconds of their request.
When Hydrogen Makes Sense
Hydrogen is not for every Shopify store. It is best suited for brands that need a completely custom frontend experience, have development resources to maintain a React application, and are hitting the limitations of Liquid themes in terms of performance or design flexibility. If your store runs well on a standard theme and your team is not equipped for React development, a well-optimised Liquid theme will serve you better.
For brands ready to make the leap, Hydrogen delivers measurable improvements in page speed, conversion rates, and brand differentiation. The investment in development pays dividends through faster sites that convert better and are easier to iterate on over time.