Hydrogen overview

Hydrogen is a front-end web development framework used for building Shopify custom storefronts. It includes the structure, components, and tooling you need to get started so you can spend your time styling and designing features that make your brand unique.

Benefits

Hydrogen is Shopify's recommended and opinionated approach to building creative and dynamic commerce experiences. If you're considering building a custom storefront, Hydrogen provides the following benefits.

Get started quickly

Hydrogen offers a starter template that provides an approachable path to building Shopify custom storefronts. The starter template integrates automatically with Shopify stores and provides a full purchase journey out-of-the-box.

The starter template is styled using the Tailwind CSS utility library and uses the Hydrogen framework. You can start building with Tailwind's library or choose your own styling.

A screenshot of the Hydrogen online integrated development environment
Hydrogen online integrated development environment

Optimize performance

Hydrogen's architecture enables a mix of static and dynamic data fetching between client- and server-side for optimized performance. It's built on top of newer web technology, and takes a modern approach to web development to offer the following:

  • Built-in caching controls to handle dynamic content and minimize API calls for speed and performance.
  • Server-side rendering to optimize the initial load.
  • React Server Components, an opinionated data-fetching and rendering flow for React apps. React Server Components offer an improved development experience. Components render fast, which allows you to see your work instantly as you’re building it.
A GIF showing the Hydrogen starter template
Hydrogen starter template

Build unique commerce experiences faster

Hydrogen accelerates the development process by using Shopify’s foundational tech stack and commerce expertise. It integrates directly with the Shopify Storefront API for efficient data-fetching.

Hydrogen includes Shopify-specific React components, hooks, and utilities for commerce. They're accessible, performant, and ready for use. They also help to reduce the initial complexity and boilerplate needed for building a custom storefront.

A GIF showing a product details page built in Hydrogen
Product details page built in Hydrogen

How Hydrogen works

Hydrogen is the approach you use to build a custom storefront. It includes a Vite plugin that offers server-side rendering (SSR) and hydration middleware, as well as server and client component code transformations. The SSR and hydration middleware is similar to existing Vite SSR implementations.

Hydrogen comes with React Router, a tool that allows you to handle routes in your app using dynamic routing.

A diagram that shows what Hydrogen is powered by, what it supports, and what it includes (components, hooks, and utilities)

Hydrogen components, hooks, and utilities

Hydrogen contains commerce components, hooks, and utilities that support features and concepts that exist in Shopify. It provides boilerplate code that you can use to build custom storefront, which enables you to spend more time on building unique experiences.

Data sources

Hydrogen is built and optimized to use data coming from Shopify's Storefront API. The shape of the data passed to components, hooks, and utilities corresponds and conforms to the structure based on the GraphQL types from the Storefront API.

Hydrogen can also support data from third-party sources. However, data from third-party sources must first be transformed into the types expected by the Hydrogen components, hooks, and utilities, and then passed on to the components, hooks, and utilities.

A diagram that shows how the Hydrogen components, hooks, and utilities consume data

Hydrogen demo

Watch Shopify's CEO, Tobi Lutke, build a custom storefront with Hydrogen:

Limitations and considerations

Hydrogen can only be used to build Shopify web storefronts. Currently, Hydrogen doesn't support building other types of custom storefronts, including mobile apps, video games, and smart devices.

Next steps