Hydrogen
Hydrogen is Shopify’s opinionated stack for headless commerce, built on React Router. It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications.
Anchor to setupSetup
- Create a new Hydrogen project with your preferred package manager.
- Import components, hooks, or utilities that you want to use in your app. For more, see the getting started guide.
Create a new Hydrogen project
Anchor to authenticationAuthentication
To make full use of Hydrogen, you need to authenticate with and make requests to the Storefront API and the Customer Account API. Hydrogen includes full-featured API clients to securely handle API queries and mutations.
You can create access tokens for your own Shopify store by installing the Hydrogen sales channel, which includes built-in support for Oxygen, Shopify’s global edge hosting platform. Or install the Headless sales channel to host your Hydrogen app anywhere.
Both the Storefront API and Customer Account API offer public credentials for client-side applications.
Authenticate a Hydrogen app
Anchor to versioningVersioning
Hydrogen is tied to specific versions of the Storefront API, which is versioned quarterly. For example, if you're using Storefront API version 2023-10
, then Hydrogen versions 2023.10.x
are fully compatible.
If a Storefront API version includes breaking changes, then the corresponding Hydrogen version will include the same breaking changes.
Anchor to hydrogen_reactHow Hydrogen works with Hydrogen React
Hydrogen is built on React Router. But many of the components, hooks and utilities built into Hydrogen come from Hydrogen React, an underlying package that’s framework-agnostic. For convenience, the Hydrogen package re-exports those resources. This means that if you’re building a Hydrogen app, then you should import modules from the package.