Hydrogen developer preview
This version of Hydrogen is an early preview. The APIs are still changing and aren't recommended for production yet. Share your feedback on what works, what breaks, and what's missing in the Shopify developer community.
This version of Hydrogen is an early preview. The APIs are still changing and aren't recommended for production yet. Share your feedback on what works, what breaks, and what's missing in the Shopify developer community.
Hydrogen developer preview is a framework-agnostic version of Hydrogen's commerce primitives. Use it to work with the Storefront API, cart, product forms, analytics, and routing in your framework of choice.
Anchor to Choose between Hydrogen and the developer previewChoose between Hydrogen and the developer preview
Use current Hydrogen if you want Shopify's fully supported framework path for building with React Router.
Use this developer preview if you want to experiment with Hydrogen primitives in a custom JavaScript stack.
You can't currently deploy storefronts built with this developer preview to Oxygen. If you need Oxygen deployment, then use current Hydrogen.
You can't currently deploy storefronts built with this developer preview to Oxygen. If you need Oxygen deployment, then use current Hydrogen.
Anchor to What's includedWhat's included
This preview includes:
- A typed Storefront API client that infers types from your GraphQL queries.
- Product and collection primitives for variant selection, filtering, and sorting.
- Cart primitives for optimistic updates, rollback, checkout routing, and Shop Pay buttons.
- First-party analytics with consent handling.
- Money formatting utilities.
- Route and proxy helpers, plus packaged skills for coding assistants.
Customer accounts and predictive search aren't available yet.
Anchor to RequirementsRequirements
Before you start, make sure that you have:
- A JavaScript app created with your framework of choice.
- Node.js and npm installed.
- Storefront API access for a Shopify store when you're ready to connect Shopify data. To create a storefront and manage API credentials, use the Headless channel.
Anchor to Get startedGet started
From your app's project directory, install @shopify/hydrogen-next and its agent skills:
Terminal
The setup command installs the developer preview package and skills in your app. Use the skills to set up the Storefront API client, wire up the cart, and build product pages with Hydrogen's framework-agnostic primitives.