Étude de cas8 min de lecture

Headless e-commerce avec Hydrogen : ce qu'on a appris sur le projet Art&Or

Retour d'expérience sur la refonte de la boutique en ligne de la bijouterie Art&Or — pourquoi on a choisi Shopify Hydrogen, comment on a géré le SEO headless, et ce qu'on ferait différemment.

Le contexte : une bijouterie bordelaise avec un site vieillissant

Art&Or est une bijouterie établie à Bordeaux depuis plusieurs années. Leur ancien site Shopify fonctionnait — mais il traînait en performance, le thème imposait des contraintes visuelles fortes, et le référencement n'était pas à la hauteur du positionnement de la marque.

L'objectif : refaire la boutique en préservant le catalogue existant, en améliorant drastiquement les performances, et en reprenant la main totale sur le design et le SEO.

Pourquoi Hydrogen plutôt qu'un thème Shopify classique

Un thème Shopify standard est rapide à mettre en place, mais il vous enferme dans une structure HTML que vous ne contrôlez pas. Pour Art&Or, on avait des exigences précises sur la typographie, les animations et la hiérarchie visuelle — incompatibles avec les contraintes d'un thème.

Hydrogen est le framework React officiel de Shopify pour le headless commerce. Il donne un contrôle total sur le rendu tout en restant connecté à l'API Storefront de Shopify pour le catalogue, le panier et le checkout. On garde la puissance du back-office Shopify (gestion des produits, paiements, logistique) sans subir ses limitations front-end.

Le défi SEO du headless

Le headless a une réputation méritée d'être difficile pour le SEO : si le rendu est côté client, Google peut ne pas indexer le contenu. Hydrogen résout ce problème avec du SSR natif via Remix — chaque page est rendue côté serveur avant d'être envoyée au navigateur.

Ce qu'on a fait systématiquement sur chaque page produit : balises title et meta description uniques via les loaders Remix, canonical URLs explicites pour éviter le contenu dupliqué sur les variantes (taille, couleur), et données structurées Schema.org Product avec prix, disponibilité et SKU.

La migration : zéro 404 sur les URLs existantes

Le risque principal d'une refonte est de perdre le jus SEO accumulé sur les anciennes URLs. On a crawlé l'ancien site avant de couper, exporté toutes les URLs indexées, et implémenté les redirections 301 via le gestionnaire natif de Shopify. Résultat : aucune page avec du trafic ou des backlinks ne redirige vers une 404.

Ce qu'on ferait différemment

Le principal point de friction : l'environnement de développement Hydrogen est plus lourd à configurer qu'un Next.js classique. Pour un projet avec des délais serrés, il faut anticiper 2-3 jours de setup supplémentaires par rapport à une stack web standard.

On intègrerait aussi le suivi des Core Web Vitals dès le début plutôt qu'en fin de projet — le LCP sur les pages de collection avec beaucoup d'images demande un travail d'optimisation spécifique (lazy loading, formats WebP, priorité d'image héro).

Résultat

Le site tourne en production depuis début 2026. Les performances sont au rendez-vous : LCP sous 2 secondes sur mobile, score Lighthouse > 90 en performance. Le catalogue est entièrement géré depuis le back-office Shopify, sans toucher au code.