E-commerce headless Shopify + Next.js pour marque DTC
Refonte e-commerce DTC premium — headless Shopify Storefront API + Next.js 15, LCP 1,1 s, taux de conversion +34 %.
Le défi
Le défi
Le précédent site (Shopify Liquid thème) affichait un LCP de 4,8 s sur mobile, malgré de nombreuses optimisations. Taux de conversion mobile plafonnait à 1,2 % vs 2,7 % sur desktop.
La marque souhaitait une expérience premium alignée avec son positionnement haut de gamme, des animations soignées, et un éditorial fort — pas livrable par un thème Shopify standard.
Croissance internationale prévue : passage FR → EU → US avec devises, langues, et stocks différenciés par marché.
Le marketing voulait itérer vite : landing pages, A/B testing, personnalisation — sans dépendre d'une équipe dev à chaque fois.
Notre approche
Notre approche
Architecture headless : Shopify Plus pour le backend commerce (catalogue, panier, paiement, stock), Next.js 15 pour le front (Storefront API GraphQL, RSC pour le SSR authenticated, ISR pour les pages catalogue).
Design system premium : animations Framer Motion, transitions de page, micro-interactions. Mais jamais au détriment du LCP : hero statique prioritaire, polices self-hostées, images AVIF/WebP.
Multi-marché via Next.js i18n routing + Shopify Markets : catalogue localisé, devise, stock, taxe, règlementation (RGPD/CCPA).
Côté marketing : un pôle éditorial autonome pour lancer des pages sans développeur, de l'A/B testing outillé et une mesure fiabilisée côté serveur.
CI/CD : preview par PR, Lighthouse CI gate ≥ 95, audit a11y axe, déploiement bleu-vert.
Résultats
Résultats
LCP mobile : 4,8 s → 1,1 s. Lighthouse mobile Perf : 47 → 98. SEO : 76 → 100.
Taux de conversion mobile : 1,2 % → 1,9 % (+58 %), dépassant le desktop (1,8 %).
Lancement multi-marché EU + US en 3 mois (vs 9 mois initialement planifié).
Autonomie marketing : 30+ landing pages livrées sans intervention dev la première année.
Exigences tenues