Hydrogen 2026-10 ya está disponible: ahora es una librería para cualquier framework

El 14 de octubre de 2026 Shopify anunció en su changelog para desarrolladores que Hydrogen 2026-10 ya está disponible de forma general (GA). Es un cambio de fondo: Hydrogen deja de ser un framework construido sobre React Router y pasa a ser una librería de JavaScript que puedes agregar al framework que ya usas.

Según el anuncio, la versión estuvo en developer preview desde junio y, en ese tiempo, Shopify publicó siete versiones a partir de los comentarios de quienes la estaban usando.

Todo lo que cuento aquí sale del anuncio oficial y de la documentación de Hydrogen en shopify.dev. Los ejemplos de código son los de esas páginas. Como es una noticia, ten en cuenta que describe la versión 2026-10.

Qué cambió: de framework a librería

Antes, para usar el carrito o la analítica de Hydrogen tenías que construir toda tu tienda sobre Hydrogen. Ahora es al revés: tu framework se queda con el enrutamiento, la carga de datos y el renderizado, y Hydrogen se encarga solo de la parte de comercio. En palabras del anuncio, puedes llevar el comercio de Shopify a tu stack “solo agregando la librería a tu app, en lugar de tener que cambiar de plataforma”.

La documentación lo divide en tres capas:

• Tu framework: rutas, renderizado, carga de datos e interfaz.
• Hydrogen: la lógica específica de Shopify, como el cliente de la Storefront API, el carrito y las rutas que necesita la tienda.
• Shopify: la Storefront API, la Customer Account API y el checkout.

Para tiendas completas, la documentación dice que Hydrogen funciona con frameworks que ejecutan código en servidor, como Next.js, React Router, Nuxt, Astro y SvelteKit. Hay un requisito importante: las apps que solo corren en el navegador o que están configuradas únicamente para salida estática no funcionan, porque Hydrogen se ejecuta antes de tu router en cada petición.

Qué te da Hydrogen

El anuncio lo explica con un ejemplo muy concreto: el carrito tiene que seguir correcto cuando alguien toca “Agregar al carrito” dos veces, los precios tienen que coincidir con el país y la moneda del comprador, y la analítica tiene que respetar el consentimiento y aun así llegar a Shopify.

Según la documentación, Hydrogen incluye:

• Cliente de la Storefront API tipado, con consultas gql() que tu editor valida contra el esquema.
• Request handlers que atienden las rutas que necesita una tienda de Shopify, como /api/cart y /checkout, los cart permalinks, las redirecciones y los endpoints para agentes.
• Carrito con handlers de servidor, un store reactivo con actualizaciones optimistas y formularios que funcionan sin JavaScript.
• Productos y colecciones: selección de variantes, opciones de producto, filtros, orden y paginación.
• Búsqueda predictiva.
• Formato de precios con formatMoney(), según el idioma y la moneda del cliente.
• Shop Pay, cuentas de clientes, Markets y analítica con manejo de consentimiento.
• Skills para agentes de código, que se instalan con npx @shopify/hydrogen@latest setup.

Y deja en tus manos la interfaz (Hydrogen no trae librería de componentes), el enrutamiento, el almacenamiento de la sesión, las páginas de cuenta, las imágenes y el SEO. Tampoco incluye la interfaz del checkout, que sigue en Shopify, ni un cliente de la Admin API.

Los entry points del paquete

El núcleo no depende de ningún framework: solo usa fetch y otras APIs de la plataforma web. Encima hay bindings para cada framework:

Los frameworks sin binding propio, como Astro, SvelteKit y SolidStart, usan el núcleo directamente.

Un contador del carrito en pocas líneas

Este es el ejemplo del anuncio para mostrar un contador del carrito que se actualiza solo en React:

import { createCartComponents } from "@shopify/hydrogen/react";

const { CartProvider, useCart } = createCartComponents();

function CartCount() {
  const count = useCart((cart) => cart.data.totalQuantity);
  return <span>{count}</span>;
}

En Vue existe lo mismo como composable. Y en JavaScript puro te suscribes directamente al store del carrito; este es el ejemplo de la documentación:

import {createCartStore} from '@shopify/hydrogen';

const cart = createCartStore({initialData});
cart.connect();

cart.subscribe((state) => {
  const cartCount = document.querySelector('#cart-count');
  if (cartCount) {
    cartCount.textContent = String(state.data.totalQuantity);
  }
});

Cómo empezar

El anuncio propone tres caminos:

1. Correr npx @shopify/hydrogen@latest setup en tu propio proyecto.
2. Desplegar la plantilla de React Router a Oxygen desde el admin de Shopify.
3. Si usas Next.js, clonar Vercel Shop, una tienda construida sobre Hydrogen y mantenida por Vercel.

Agregarlo a un proyecto que ya tienes

Desde la raíz del proyecto:

npx @shopify/hydrogen@latest setup

Según la guía para agregar Hydrogen a un proyecto existente, este comando instala @shopify/hydrogen con tu gestor de paquetes (lo detecta por el lockfile) y agrega instrucciones para agentes, acordes a la versión instalada, en las carpetas .claude y .agents de tu proyecto. No cambia el código de tu app.

Los requisitos que marca la guía son Node.js 22 o 24, un proyecto con package.json en la raíz y un framework que ejecute código en servidor.

Para conectar Hydrogen a una tienda, se usan variables de entorno. Si todavía no tienes una tienda o un token, puedes trabajar con mock.shop, un catálogo de demostración que no pide token. El ejemplo de la guía:

PUBLIC_STORE_DOMAIN=pets.mock.shop
# PUBLIC_STOREFRONT_API_TOKEN=

La guía insiste en dejar el token comentado: una asignación vacía se lee como cadena vacía y el cliente la rechaza. Cuando conectes tu tienda real, el token privado de la Storefront API (PRIVATE_STOREFRONT_API_TOKEN) es solo para el servidor y nunca debe llevar un prefijo de navegador como NEXT_PUBLIC_.

Skills para agentes de código

Esta es, para mí, la parte más interesante. Hydrogen trae 20 skills que enseñan a los agentes de código a usarlo, uno por cada parte de la tienda. Shopify cuenta que los escribió construyendo tiendas con agentes y corrigiendo el skill cada vez que un agente se equivocaba.

Después de instalarlo, abres el proyecto en tu agente y le pides:

Set up my store with Shopify.

Según el anuncio, el agente construye las páginas de inicio, colección, búsqueda, producto, carrito y cuenta, agrega la analítica y hace una prueba rápida del resultado. La guía añade que sigue los mismos pasos de la documentación, en el mismo orden, y revisa cada uno antes de pasar al siguiente.

Los skills viven dentro de tu proyecto y corresponden a la versión de Hydrogen que instalaste, así que el agente sigue instrucciones para el código que de verdad tienes. Cuando actualices Hydrogen, sincronízalos con:

npx @shopify/hydrogen skills sync

Si quieres entender qué es un skill y cómo los carga Claude Code, lo expliqué en Cómo crear un skill en Claude Code. Y si quieres darle a tu agente acceso a la documentación y los esquemas de Shopify en general, mira el artículo sobre el Shopify AI Toolkit con Claude Code.

Listo para agentes de compra

El anuncio también dice que las tiendas hechas con Hydrogen funcionan con agentes de compra: en navegadores que soportan WebMCP, un agente puede buscar en tu catálogo y actualizar el carrito y, después de que el comprador confirma, Shopify Checkout puede enviar el pedido con complete_checkout. Según Shopify, no tienes que construir nada para esto.

Detrás está el contrato de eventos y acciones estándar de la tienda, el mismo que usan los temas de Liquid. Los eventos son eventos DOM con prefijo shopify: (por ejemplo shopify:cart:lines-update) y las acciones son llamadas que una app o un agente hace para leer o cambiar el carrito sin saber cómo está hecha la tienda. Así se ve agregar un producto al carrito, según el anuncio:

await window.Shopify.actions.updateCart({
  lines: [{ merchandiseId: "gid://shopify/ProductVariant/123", quantity: 1 }],
});

La documentación aclara que el store del carrito escucha esos mismos eventos, así que tu interfaz se mantiene sincronizada cuando una app o un agente cambia el carrito. Si te interesa el panorama general de las compras hechas por agentes, lo cubrí en Comercio agéntico y UCP.

Dónde desplegar

Hydrogen se puede alojar en cualquier lado; el anuncio menciona expresamente Oxygen, que sigue siendo gratis. Según la guía de despliegue:

• Oxygen: si quieres que Shopify aloje la tienda, con entornos, despliegues de vista previa y variables de entorno administradas desde el admin. Es el destino de la plantilla de React Router.
• Vercel: si trabajas con Next.js. Es el destino de Vercel Shop.
• Node, Cloudflare Workers, Deno u otro runtime: si tu framework ya despliega ahí.

Si ya tienes una tienda en Hydrogen

El anuncio es claro: las tiendas existentes siguen funcionando igual y no tienes que hacer nada hoy. Cuando quieras migrar, hay un skill de migración que guía a tu agente; conservas tus páginas y rutas y cambias de dónde viene el código de comercio.

La guía oficial de migración aplica a tiendas en Hydrogen 2026-04 o anterior, y la tienda se queda en React Router (si sigue en Remix, también la pasas a React Router 7). Algunos cambios que conviene conocer antes de empezar:

Además, los comandos shopify hydrogen dev y shopify hydrogen build y el plugin de Vite hydrogen() ya no forman parte de 2026-10: el desarrollo y el build usan comandos normales de Vite y React Router. La guía pide Node.js 22.12 o posterior, o la versión 24, y recomienda hacer commit antes de empezar.

Mi opinión

Esto es opinión mía, no del anuncio: es el cambio más sensato que podía hacer Hydrogen. Muchas agencias y equipos ya tienen un sitio en Next.js, Nuxt o Astro y no querían reescribirlo solo para tener un carrito bien hecho. Que Hydrogen se vuelva una pieza que se agrega, y no una plataforma a la que hay que mudarse, baja mucho la barrera para hacer headless con Shopify.

Como este blog está hecho con Astro, me llama la atención que Astro aparezca en la lista. Ojo: la documentación aclara que los ejemplos para Astro, Nuxt, SolidStart y SvelteKit son ejemplos de desarrollo, no plantillas de inicio; las dos plantillas oficiales son React Router y Vercel Shop. Y recuerda el requisito del servidor: un sitio de Astro con salida 100 % estática no sirve tal cual.

Mi recomendación si vas a probarlo: empieza con mock.shop en un proyecto de prueba, corre el setup y deja que tu agente siga los skills. Así ves en una tarde qué tanto te resuelve antes de tocar tu tienda real.

Fuentes

• Hydrogen 2026-10 is now available (Shopify developer changelog, 14 de octubre de 2026)
• Hydrogen (documentación oficial)
• Add Hydrogen to an existing project
• Deploy a template
• About deploying Hydrogen storefronts
• Migrate to the latest version of Hydrogen
• Standard storefront events and actions
• Skill de migración a Hydrogen 2026-10 (GitHub)
• Repositorio de Hydrogen en GitHub