The new Hydrogen is a commerce library that works with any JavaScript framework. Add the package to your existing app, and Shopify handles cart, pricing, analytics, Shop Pay, and login. No replatforming required.
To use cart or analytics, you had to build your entire storefront with the React Router–based Hydrogen.
Add the library to your existing app to get Shopify commerce. Routing, data fetching, rendering, and design stay in your own framework.
Every Shopify storefront needs them,and they're harder to get right than they look— Hydrogen takes these pieces off your plate.
The cart has to stay correct even if a shopper taps "Add to cart" twice.
Prices must match the buyer's country and currency (Markets support).
Analytics have to respect consent and still reach Shopify, or your reports go silent.
import { createCartComponents } from "@shopify/hydrogen/react";
const { CartProvider, useCart } = createCartComponents();
function CartCount() {
const count = useCart((cart) => cart.data.totalQuantity);
return <span>{count}</span>;
}
Vue gets the same functionality as composables, and other frameworks subscribe to the cart directly.
Written by building real storefronts with an agent and fixing a skill every time the agent got something wrong. 20 skills covering each part of the storefront.
Because the installed skills match your Hydrogen version, the agent follows instructions written for the code you actually have. After upgrading, run npx @shopify/hydrogen skills sync to update them.
# 既存プロジェクトで試す npx @shopify/hydrogen@latest setup # → エージェントに "Set up my store with Shopify." と頼む # Hydrogen をアップグレードしたらスキルも更新 npx @shopify/hydrogen skills sync
In WebMCP-enabled browsers, agents can search the catalog and update the cart, and once the buyer confirms, Shopify Checkout submits the order with complete_checkout . No additional implementation required.
Hydrogen uses the same standard storefront actions as Liquid themes, so compatible apps, your storefront UI, and agents can all share the same cart contract.
// アプリやエージェントは,自社 UI と同じアクションでカートに追加する
await window.Shopify.actions.updateCart({
lines: [{ merchandiseId: "gid://shopify/ProductVariant/123", quantity: 1 }],
});
| Item | Hydrogen until now | Hydrogen 2026-10 |
|---|---|---|
| Positioning | Framework Built on React Router | Library Add to any JS framework |
| Cart & analytics requirements | Build the entire storefront on Hydrogen | Just add the package to your existing app |
| Hosting | Not stated | Anywhere Oxygen remains free |
| Agent support | Not stated | Ships with 20 skills Version-matched; update via sync |
| Existing storefronts | keep running as-is.Nothing to do right now. When you migrate, a migration skill guides your agent, keeping your pages and routes intact and swapping out only where your commerce code comes from. | |
In your own project, run npx @shopify/hydrogen@latest setup .
Deploy the React Router template to Oxygen from the Shopify admin.
Clone Vercel Shop, built on Hydrogen and maintained by Vercel.
Routing, data fetching, and rendering belong to the framework; cart, pricing, analytics, Shop Pay, and login belong to Hydrogen. That makes boundaries easy to draw at design time.
window.Shopify.actions.updateCart is shared by your own UI, compatible apps, and agents. Even headless, it's easier to stay compatible with theme apps.
Skills live inside your project and match the installed version.After upgrading Hydrogen, run skills sync —don't forget it;that becomes your standard practice.
Existing storefronts keep working as-is. Migration goes through the migration skill, which keeps your pages and routes and swaps out only the source of your commerce code.
Agent-driven search and cart updates run in browsers that support WebMCP, and orders are submittedafter the buyer confirms, by Shopify Checkout complete_checkout via the WebMCP browser API. The article does not name specific supported browsers or any impact on pricing.
npx @shopify/hydrogen@latest setup → Hydrogen handles cart, variants, Shop Pay, and customer login, while the design and routing stay as they are.createCartComponents, Vue uses composables, and everything else subscribes to the cart directly. For Next.js, Vercel Shop also works as a starting point.npx @shopify/hydrogen skills sync into your CI or upgrade process.updateCart). Your own UI uses the same actions.complete_checkout(after buyer confirmation). The article does not specify which browsers are supported, so confirm this during testing.