CTJ Création - De Shopify à Next.js headless
Migration d'une boutique Shopify vers une architecture Next.js + Sanity + Shopify backend. Refonte SEO complète, repositionnement de marque et URLs françaises.
Développeur web & SEO
En résumé
- Migration de Shopify vers Next.js headless + Sanity CMS
- Shopify conservé en backend pour paiements et gestion des stocks
- Refactorisation complète des URLs (anglais → français) avec redirections 301
- Repositionnement de marque et design sur mesure
- SEO technique : structure Hn, données structurées Product, sitemap dynamique
- Autonomie totale du client via Sanity pour la gestion du contenu
CTJ Création : l'artisanat qui mérite mieux qu'un thème Shopify
CTJ Création, fondée par Christine, est une boutique de décoration spécialisée dans les macramés et attrapes rêves muraux artisanaux. Chaque pièce est unique, réalisée à la main avec des matériaux naturels et respectueux de l'environnement.
Le problème : le site Shopify existant ne reflétait pas du tout cette qualité. Un thème acheté sur la marketplace, des URLs en anglais, un SEO technique impossible à optimiser — et un trafic organique quasi inexistant.
Ce projet fait suite à la création initiale de la boutique Shopify. La première phase avait posé les bases (boutique fonctionnelle, shooting photo, nom de domaine). Cette seconde phase est la refonte complète de l'architecture.
Le diagnostic : pourquoi Shopify ne suffisait plus
Un thème générique qui ne raconte pas l'histoire
Christine crée des pièces uniques, artisanales, avec une vraie démarche. Le thème Shopify acheté était fonctionnel, mais il ressemblait à toutes les autres boutiques en ligne. Impossible de se différencier et de transmettre l'univers de la marque.
Des URLs en anglais sur un site français
Shopify impose nativement des URLs en anglais : /collections/all, /products/mon-produit, /pages/about. Pour un site en français destiné à un public francophone, c'est un problème :
- Expérience utilisateur : l'URL ne correspond pas à la langue du site
- SEO : Google préfère des URLs dans la langue du contenu
- Crédibilité : un site professionnel français avec des URLs anglaises, ça fait bricolé
Un SEO technique impossible à pousser
Sur Shopify, les possibilités d'optimisation SEO technique sont limitées :
- Les balises Hn sont gérées par le thème — modifier la hiérarchie sans tout casser est une galère
- Le sitemap est généré automatiquement sans contrôle
- Les données structurées de base sont intégrées, mais les personnaliser est complexe
- Certains réglages avancés (canonicals, redirections en masse) nécessitent des forfaits plus coûteux
Un trafic organique au point mort
Malgré des produits de qualité et des photos professionnelles (réalisées lors de la première phase), le site ne générait quasiment aucun trafic organique. La faute à un ensemble de facteurs cumulés : URLs incohérentes, contenu non optimisé, limites techniques.
La solution : architecture Next.js headless
Le choix technique
J'ai opté pour une combinaison qui allie la flexibilité du code et la puissance de Shopify pour le commerce :
- Next.js pour le site visible — rapide, SEO-friendly, entièrement sur mesure
- Sanity comme CMS headless — Christine modifie son contenu sans risque de casser le design
- Shopify en backend — gestion des paiements, des stocks et des commandes via l'API Shopify
Cette architecture donne le meilleur des deux mondes : la simplicité de gestion d'un Shopify avec la puissance technique d'un site codé.
Refactorisation des URLs
Chaque URL anglaise de Shopify a été remplacée par une URL française propre :
| Avant (Shopify) | Après (Next.js) |
|---|---|
/collections/all | /boutique |
/collections/macrame | /boutique/macrame |
/products/attrape-reves-boheme | /produits/attrape-reves-boheme |
/pages/about | /a-propos |
/blogs/news | /blog |
Chaque ancienne URL dispose d'une redirection 301 vers la nouvelle. Aucun lien existant ne tombe dans le vide.
Repositionnement de marque
Ce n'est pas qu'une refonte technique — c'est un repositionnement complet :
- Nouveau design qui met en valeur le savoir-faire artisanal
- Mise en scène des produits avec les photos professionnelles réalisées en première phase
- Storytelling : le site raconte maintenant l'histoire de Christine et de ses créations
- Expérience d'achat repensée pour un parcours intuitif
SEO technique irréprochable
Ce qui était impossible sur Shopify est maintenant en place :
- Structure Hn propre et logique sur chaque page
- Meta descriptions optimisées pour le taux de clic
- Données structurées Product, BreadcrumbList, Organization
- Sitemap dynamique généré automatiquement
- Vitesse de chargement : temps de réponse divisé par rapport à Shopify
- Mobile-first : design conçu d'abord pour les écrans de smartphones
Autonomie complète
Christine gère son contenu via Sanity :
- Ajout et modification de fiches produits
- Publication d'articles de blog
- Mise à jour des pages (à propos, FAQ, conditions de vente)
Le tout sans aucun risque de casser le site. C'est la force d'un CMS headless : le contenu est séparé du code.
Pourquoi Sanity plutôt que WordPress headless ? J'ai testé les deux. Sanity est plus simple à configurer, plus rapide, et l'expérience d'édition est meilleure. Face aux limites de WordPress (même en headless), je recommande systématiquement Sanity pour mes projets.
Les résultats
- Un site qui reflète la qualité des créations de Christine
- URLs françaises propres et optimisées
- SEO technique solide dès le lancement
- Autonomie : Christine gère son contenu sans intervention technique
- Architecture évolutive : le site peut grandir sans contrainte de plateforme
- Coûts réduits : plus de commissions Shopify sur le front, plus de plugins payants pour des fonctionnalités de base
Articles connexes : Refonte de site e-commerce : étapes, coûts et pièges | CMS Headless : contenu sans contrainte | Shopify : plateforme e-commerce
Voir la première phase du projet | Voir tous mes projets | Me contacter
