Hydrogen 2026-10 : Shopify posent le commerce dans ta stack

Hydrogen n’est plus un framework

Le 14 octobre, Shopify ont publié Hydrogen 2026-10 en disponibilité générale. La formule de la documentation est la plus honnête : « Hydrogen now works with any JavaScript framework ». Traduction : tu ajoutes la librairie à ton application, au lieu de reconstruire un storefront entier.

Avant, Hydrogen était un framework construit sur React Router. Pour profiter de son panier ou de son analytics, tu bâtissais tout ton storefront dessus, avec ses routes, ses loaders, sa structure de fichiers. Tu ne pouvais pas l’ajouter à un front qui existait déjà. Cette époque est terminée : Hydrogen est maintenant une librairie JavaScript qui se pose dans ton app, et tu l’héberges où tu veux.

Le calendrier n’a rien d’improvisé. La preview développeur a ouvert en juin, et Shopify ont publié sept versions depuis, uniquement à partir des retours de ceux qui l’utilisaient. C’est ce qui justifie la GA cette semaine.

Shopify le disent eux-mêmes dans l’annonce : la grande nouvelle, c’est qu’il n’y a pas de grande nouvelle. C’est le bon résumé pour un marchand, parce que ça veut dire qu’un storefront headless n’exige plus de replatformer ta boutique pour exister.

Ce qu’Hydrogen prend en charge, et ce qu’il te laisse

Tout storefront a besoin des mêmes briques commerce, et elles sont plus dures à réussir qu’elles en ont l’air. Le panier doit rester juste quand un client tape deux fois sur « ajouter au panier ». Un prix doit correspondre au pays et à la devise de l’acheteur. L’analytics doit respecter le consentement et remonter quand même dans Shopify, sinon tes rapports deviennent muets. Je passe mon temps à réparer ces trois choses sur des projets, et je peux confirmer qu’on les rate facilement.

Hydrogen prend le panier, la sélection de variantes, les filtres de collection, la recherche prédictive, les Markets, l’analytics, Shop Pay et les comptes clients. Il fournit aussi le client de la Storefront API typé, les handlers serveur qui répondent à /api/cart et /checkout, les redirections d’URL de la boutique avant le 404, et le proxy de la Storefront API.

Ton framework garde le routage, le chargement de données et le rendu. Ton app garde l’interface, ton design system, le stockage de session, les pages de compte, les images et tout le SEO : balises meta, Open Graph, données structurées. Hydrogen ne livre aucun composant visuel, et il ne fournit ni client Admin API ni interface de checkout. Le paiement reste chez Shopify.

Le code de liaison tient en quelques lignes. Un compteur de panier qui se met à jour tout seul ressemble à ça :

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, le même paquet expose un composable. Dans les frameworks sans binding fourni, tu t’abonnes au store directement.

Un détail qui compte pour le référencement et pour la conversion : les changements de panier passent par des formulaires HTML natifs, donc le panier fonctionne avant que le JavaScript soit chargé, et il continue de fonctionner s’il plante. C’est le genre de décision que je prends systématiquement sur un thème, et c’est rassurant de la retrouver dans une librairie officielle.

Les points d’entrée du paquet

Le paquet expose plusieurs entrées, et c’est là qu’on voit qu’il a été pensé pour être posé n’importe où :

• @shopify/hydrogen : le cœur, sans dépendance à un framework. Client de la Storefront API, gql, request handlers, stores panier, produit, collection et recherche, formatage des montants, analytics, Shop Pay, cache.
• @shopify/hydrogen/react : les bindings React, avec createCartComponents(), createProductComponents(), ShopifyScripts et ShopPayButton.
• @shopify/hydrogen/vue : les mêmes composants, en composables. Oui, Vue.
• @shopify/hydrogen/customer-account : le client de la Customer Account API et l’aide à la session client.
• @shopify/hydrogen/vite et @shopify/hydrogen/ts-plugin : le développement local en HTTPS de confiance, et le typage de tes requêtes gql() directement dans l’éditeur.

Les frameworks sans binding embarqué, comme Nuxt, Astro, SvelteKit ou SolidStart, utilisent le cœur directement. Deux templates sont prêts à déployer : React Router 7 en framework mode, poussé sur Oxygen depuis ton admin Shopify, et Vercel Shop, le template Next.js 16 de Vercel construit sur Hydrogen et maintenu par Vercel. Oxygen reste gratuit, mais rien ne t’oblige à héberger chez Shopify.

20 skills pour que ton agent monte le storefront

C’est la partie qui va faire parler, et à mon avis la plus importante du lot. Le paquet embarque 20 skills qui apprennent à un agent de code comment s’en servir, une par morceau de storefront. Shopify les ont écrits en construisant des storefronts avec des agents, puis en corrigeant le skill à chaque fois que l’agent se trompait. C’est la bonne méthode, et c’est celle que quelques-uns d’entre nous appliquent déjà en clientèle depuis des mois.

Concrètement, tu lances npx @shopify/hydrogen@latest setup dans un projet existant, tu demandes à ton agent « Set up my store with Shopify », et il monte la page d’accueil, les collections, la recherche, la fiche produit, le panier, le compte client, il branche l’analytics et il teste le résultat. Les skills vivent dans ton projet et correspondent à la version d’Hydrogen que tu as installée, donc l’agent suit les instructions du code que tu as réellement. Après une montée de version, npx @shopify/hydrogen skills sync les met à jour.

Ton storefront devient lisible par les agents d’achat

Hydrogen implémente les standard storefront events and actions, le même contrat que les thèmes Liquid. Le navigateur reçoit un objet window.Shopify.actions, les changements de panier émettent des événements DOM, et le store du panier écoute les mêmes. Résultat : une app installée et un agent d’achat peuvent lire et modifier ton panier exactement comme le fait ton interface, et ton affichage reste synchronisé quand ils le font.

Il y a un pas de plus. Dans les navigateurs qui supportent WebMCP, un agent peut chercher dans ton catalogue et mettre à jour le panier, puis, après confirmation de l’acheteur, Shopify Checkout peut soumettre la commande avec complete_checkout. Tu n’as rien à construire. C’est la suite directe de ce dont je parlais la semaine dernière avec les canaux d’achat activés par défaut : ton storefront n’est plus seulement lu par un humain, il doit rester cohérent quand c’est un agent qui clique.

Si tu as déjà un Hydrogen en production

Rien à faire aujourd’hui. Les storefronts Hydrogen existants continuent de fonctionner tels quels. Quand tu seras prêt, un skill de migration, migrate-to-hydrogen-2026-10, fait passer ton agent du framework à la librairie en conservant tes pages et tes routes, et en changeant seulement l’origine du code commerce. Les versions 2026-04 et antérieures basculent dans la documentation legacy.

Ce que j’en retiens pour mon métier

Mon avis, et il va au-delà d’Hydrogen.

Shopify viennent de retirer de la table le travail que personne ne veut faire deux fois : panier, variantes, devise, consentement, analytics. J’ai passé des années à réécrire ça, sur des thèmes Liquid comme sur des projets headless, et à chaque fois il y avait un bug dans l’addition des remises ou un événement d’achat qui ne partait pas. Ce temps-là sort du budget des projets. Ce qui reste, c’est ce qui a de la valeur : l’architecture, le choix des API, la donnée du client, la performance réelle et l’expérience.

Attention, headless reste un choix, pas une promotion. Un thème Shopify sur mesure coûte moins cher à maintenir, se modifie sans redéploiement et absorbe les mises à jour de la plateforme. Hydrogen devient intéressant quand tu as une raison : une app qui partage du code avec le storefront, un front déjà en place, des besoins de performance ou d’expérience que le thème ne permet pas. Sur Näak ou Wise Trail Running, j’ai travaillé sur des thèmes poussés avec des apps qui touchent au panier, et le vrai sujet n’a jamais été la techno. C’était de savoir ce que la boutique devait faire.

Et la partie que je trouve la plus significative n’est pas la librairie, ce sont les skills. Le travail se déplace de « écrire le code du panier » vers « décrire correctement ce que la boutique doit faire », puis vérifier le résultat. C’est une compétence différente de celle qu’on a apprise, elle ne s’improvise pas, et elle va faire le tri.

Tu l’essaies ce week-end

1. Dans un projet existant : npx @shopify/hydrogen@latest setup, puis demande à ton agent « Set up my store with Shopify » et regarde ce qu’il produit avant de le croire.
2. Si tu veux un storefront complet tout de suite : déploie le template React Router sur Oxygen depuis ton admin Shopify.
3. Si tu es en Next.js : clone Vercel Shop.
4. Pour lire le détail : la documentation Hydrogen, le code sur GitHub et l’annonce de GA.