The new Hydrogen is generally available today. Since the developer preview started in June, we've shipped seven releases based on feedback from developers using it.
The big deal about the new Hydrogen is that it isn't a big deal: Hydrogen now works with any JavaScript framework. You can bring Shopify's commerce to your stack just by adding the library to your app, instead of needing to replatform.
Hydrogen then handles commerce for you: the cart, variant selection, prices in the buyer's currency, analytics that respect consent, Shop Pay, and customer login. React Router and Next.js have starters ready to deploy, and you can host it anywhere, including Oxygen, which is still free.
The package also includes skills that teach coding agents how to use it. To try it in an existing project, run and ask your agent to "Set up my store with Shopify."
Anchor to What Hydrogen gives youWhat Hydrogen gives you
Every Shopify storefront needs the same commerce pieces, and they're harder to get right than they look. The cart has to stay correct when a shopper taps "Add to cart" twice. Prices have to match the buyer's country and currency. Analytics have to respect consent and still reach Shopify, or your reports go quiet.
Hydrogen handles those for you: the cart, product variants, collection filters, predictive search, Markets, analytics, Shop Pay, and customer accounts. Your framework keeps routing, data loading, and rendering, and the design is all yours.
The glue code fits in a few lines. For instance, a dynamically updating cart count in React looks like this:
import { createCartComponents } from "@shopify/hydrogen/react";
const { CartProvider, useCart } = createCartComponents();
function CartCount() {
const count = useCart((cart) => cart.data.totalQuantity);
return <span>{count}</span>;
}Vue has the same thing as a composable, and other frameworks subscribe to the cart directly.
Anchor to Built for coding agentsBuilt for coding agents
Hydrogen comes with 20 skills that teach coding agents how to use it, covering each part of a storefront. We wrote them by building storefronts with agents and fixing the skill every time an agent got something wrong. Ask your agent to "Set up my store with Shopify," and it builds the home, collection, search, product, cart, and account pages, adds analytics, and smoke-tests the result.
The skills live in your project and match the version of Hydrogen you installed, so your agent follows instructions for the code you actually have. After you upgrade Hydrogen versions, you can update the skills with .
Hydrogen storefronts also work with shopping agents. In browsers that support WebMCP, an agent can search your catalog and update the cart, and after the buyer confirms, Shopify Checkout can submit the order with . You don't have to build anything for it.
Hydrogen uses the same standard storefront actions as Liquid themes, so compatible apps, storefront UI, and agents can share the same cart contract. An app or agent adds to the cart by calling the same action your own UI uses:
await window.Shopify.actions.updateCart({
lines: [{ merchandiseId: "gid://shopify/ProductVariant/123", quantity: 1 }],
});Anchor to If you've used Hydrogen beforeIf you've used Hydrogen before
Hydrogen used to be a framework built on React Router. To use its cart or analytics, you built your whole storefront on it. Now it's a library, so you can add it to the framework you already use and host it wherever you want. Oxygen is still free.
Existing Hydrogen storefronts keep working as they do now, and there's nothing you need to do today. When you're ready to move, the migration skill walks your agent through it. You keep your pages and routes and swap where the commerce code comes from.
Anchor to Get startedGet started
There are a few ways to get started:
- Run
in your own project. - Deploy the React Router template to Oxygen from your Shopify admin.
- If you use Next.js, clone Vercel Shop, a storefront built on Hydrogen and maintained by Vercel.
If something's missing or broken, tell us in the Shopify developer community. The code is on GitHub, and the docs are on shopify.dev.
