Hydrogen (@shopify/hydrogen) — это набор инструментов Shopify для создания headless магазинов в уже используемом вами JavaScript-фреймворке. Он поставляется с агентскими навыками, которые учат программистов пользоваться им.

Документация · Ссылка API · Журнал изменений

[! ПРИМЕЧАНИЕ] Этот README охватывает водород 2026-10 и позже. Водород 2026-04 и более ранние годы находятся на ветке 2026-04, с документами в Legacy Hydrogen. Чтобы перенести магазин, перейдите к Migrate к последней версии Hydrogen.

Что входит в комплект

• Клиент API Storefront Store: введённые запросы gql(), кэширование и ошибки.
• Обработчики запросов: маршруты, необходимые магазину Shopify, такие как прокси Storefront API, /api/cart, постоянные ссылки на оформление и корзины, перенаправления URL и MCP-конечные точки для агентов.
• Cart: обработчики серверов, HTML-формы, работающие до загрузки JavaScript, и хранилище, показывающее изменения строк до ответа сервера.
• Продукты и коллекции: выбор вариантов, фильтры коллекции, сортировка и пагинация.
• Предиктивный поиск: хранилище поиска с обработчиками серверов и помощниками форм.
• Money: форматирует суммы Shopify MoneyV2 для местоположения и валюты покупателя.

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.