Hydrogen(@shopify/hydrogen)は、すでに使っているJavaScriptフレームワークでヘッドレスストアフロントを構築するためのShopifyツールキットです。このツールキットには、コーディングエージェントに使い方を教えるエージェントスキルが付属しています。

ドキュメント ·API参照 ·変更ログ

[!注] このREADMEはHydrogen 2026-10以降をカバーしています。Hydrogen 2026-04以前は[2026-04ブランチにあり、ドキュメントはLegacy Hydrogenにあります。店舗フロントを移行するには、MigrateをHydrogenの最新バージョンに進めてください。

含まれているもの

• Storefront APIクライアント:型付きgql()のクエリ、キャッシュ、型付きエラー。
• リクエストハンドラー:Shopifyのストアフロントが必要なルート(例えば、Storefront APIプロキシ、/api/cart])、チェックアウトおよびカートのパーマリンク、URLリダイレクト、エージェント用のMCPエンドポイントなど。
• カートリッジ:サーバーハンドラ、JavaScript読み込み前に動作するHTMLフォーム、サーバー応答前に行の変更を表示するストア。
• 製品およびコレクション:バリアント選択、コレクションフィルター、ソート、ページ付け。
• 予測検索:サーバーハンドラーとフォームヘルパーを備えた検索ストア。
• Money:Shopifyの金額を買い手の所在地と通貨に合わせてフォーマットします。

Hydrogen

Hydrogen (@shopify/hydrogen) is Shopify’s toolkit for building headless storefronts in the JavaScript framework you already use. It ships with agent skills that teach coding agents how to use it.

Documentation · API reference · Changelog

[!NOTE] This README covers Hydrogen 2026-10 or later. Hydrogen 2026-04 and earlier are on the 2026-04 branch, with docs in Legacy Hydrogen. To migrate a storefront, follow Migrate to the latest version of Hydrogen.

What’s included

• Storefront API client: typed gql() queries, caching, and typed errors.
• Request handlers: the routes a Shopify storefront needs, such as the Storefront API proxy, /api/cart, checkout and cart permalinks, URL redirects, and the MCP endpoints for agents.
• Cart: server handlers, HTML forms that work before JavaScript loads, and a store that shows line changes before the server responds.
• Products and collections: variant selection, collection filters, sorting, and pagination.
• Predictive search: a search store with server handlers and form helpers.
• Money: formats Shopify MoneyV2 amounts for the buyer’s locale and currency.
• Markets: country and language context for Shopify Markets.
• Analytics: Shopify storefront analytics with consent handling.
• Shop Pay: Shop Pay buttons.
• Customer accounts: the Customer Account API client, login and logout handlers, and sessions.

Get started

You need a Shopify store with Storefront API access from the Headless channel. Until you connect one, the template and the setup skill fall back to mock.shop, a public Storefront API with demo data.

Deploy a template

React Router on Oxygen. Shopify’s starter template, templates/react-router, deployed to Oxygen from your Shopify admin.

Next.js on Vercel. Vercel Shop is a Next.js storefront built on Hydrogen and maintained by Vercel.