Migration de Thème Shopify Assistée par l'IA : Le Guide Complet

Points clés à retenir

• Une migration de thème Shopify déplace une boutique d’un thème à un autre. Passer d’un thème vintage à la Boutique en ligne 2.0 (Online Store 2.0) implique de tout reconstruire, pas seulement de copier des fichiers.
• Les thèmes vintage et les thèmes de la Boutique en ligne 2.0 utilisent des formats de templates différents. Les templates Liquid deviennent des templates JSON, et le code personnalisé doit être déplacé dans des sections.
• Les méta-champs (metafields) et les méta-objets vivent dans les données de votre boutique, pas dans le thème. Ils survivent à la migration, mais les connexions de sources dynamiques qui les affichent sont liées au thème et doivent être reconnectées.
• Effectuez chaque étape sur un thème dupliqué et non publié. La documentation officielle de migration de Shopify commence par là.
• L’IA gère le travail de traduction répétitif - réécrire le Liquid, diviser les templates monolithiques en sections, porter le CSS et le JS - pendant que vous vous occupez de l’audit, du mapping et des tests.

Une migration de thème Shopify est le processus permettant de passer une boutique d’un thème à un autre dans Shopify. Ce guide couvre la version la plus difficile de ce travail : prendre un thème vintage (avant 2021) et le migrer vers un thème de la Boutique en ligne 2.0 comme Dawn, ou remplacer un ancien thème de base par un thème moderne. Il s’agit d’un travail de thème à thème dans Shopify. Ce n’est pas une migration de plateforme depuis WooCommerce ou Magento.

La raison pour laquelle cette migration est difficile est structurelle. La Boutique en ligne 2.0 a changé la façon dont les thèmes sont construits. Shopify l’a lancée le 29 juin 2021, introduisant les templates JSON et les blocs d’applications pour que les marchands puissent ajouter, supprimer et réorganiser les sections sur presque toutes les pages, et non plus seulement sur la page d’accueil.¹ Un thème vintage ne peut pas être mis à jour sur place (in-place). Vous devez le reconstruire sur la nouvelle architecture, puis y déplacer vos personnalisations.

Ce guide d’actions parcourt toute la séquence : l’audit de l’ancien thème, le mapping des sections et des paramètres, l’utilisation de l’IA (Claude) pour traduire le Liquid, CSS et JS personnalisés dans la structure du nouveau thème, la préservation des méta-champs et des templates, les tests sur un thème non publié, et le maintien d’un plan de retour en arrière (rollback) tout au long du processus.

Pourquoi vous pouvez nous faire confiance

Jacques a plus de 15 ans d’expérience en développement et a travaillé avec des centaines de boutiques Shopify. Nous avons créé Fudge - un constructeur de pages et éditeur de boutique Shopify natif en IA avec une note de 5,0 et un badge Built for Shopify. Les migrations de thèmes, le mapping de sections et les réécritures en Liquid sont notre travail quotidien derrière ce produit.

Ce qui change entre un thème vintage et la Boutique en ligne 2.0

Avant de toucher au moindre bout de code, comprenez ce qui diffère réellement. Le fossé entre les deux architectures est la raison pour laquelle une migration équivaut à une reconstruction.

Un template JSON est un fichier de données. Il stocke une liste de sections à rendre et leurs paramètres, et les marchands gèrent ces sections dans l’éditeur de thème.² Chaque template JSON peut afficher jusqu’à 25 sections, chaque section peut contenir jusqu’à 50 blocs, et un thème peut contenir jusqu’à 1 000 templates JSON.² Ces limites définissent la manière dont vous allez diviser un ancien template monolithique.

La règle structurelle la plus importante : les fichiers de section ne peuvent pas faire référence à d’autres fichiers de section.⁴ Les templates vintage qui empilent plusieurs balises {% section %} doivent être mis à plat, car le code à l’intérieur de chaque nouvelle section doit être autonome.

Étape 1 : Auditer l’ancien thème

Vous ne pouvez pas migrer ce que vous n’avez pas catalogué. Commencez par faire un inventaire complet du thème que vous allez quitter.

Parcourez les fichiers du thème et notez :

1. Chaque template personnalisé - produit, collection, page, blog, et tous les templates alternatifs comme product.bundle.liquid.
2. Sections et snippets personnalisés - ce qu’ils affichent et où ils sont utilisés.
3. Logique Liquid personnalisée - boucles, conditions, et affichages de balises qu’un thème classique n’aura pas.
4. CSS et JS personnalisés - styles en ligne, fichiers d’assets du thème, et toutes les balises script ajoutées à theme.liquid.
5. App embeds et code d’application ajouté - les snippets qu’une application a déposés dans vos templates.
6. Utilisation des méta-champs et méta-objets - où les données personnalisées sont lues et affichées.
7. Paramètres - les valeurs dans settings_data.json qui reflètent les choix d’image de marque comme les couleurs, les polices et les options de mise en page.

C’est ici que l’IA justifie sa place très tôt. Pointez Claude vers le répertoire du thème et demandez-lui de lister chaque fichier contenant une logique personnalisée, de signaler les références {% section %}, et de résumer ce que fait chaque snippet. Il lira tout le thème plus vite qu’une personne qui fait défiler des fichiers à la main. Notre guide sur comment modifier un thème Shopify explique comment travailler directement dans le code du thème.

Une mise en garde tirée des recommandations de Shopify : les personnalisations effectuées par des applications, ou faites manuellement sur un thème, ne peuvent pas être migrées automatiquement.⁵ L’audit vous indique l’ampleur de la traduction manuelle qui vous attend.

Étape 2 : Mapper les sections et les paramètres sur le nouveau thème

Une fois l’inventaire terminé, mappez chaque ancien élément vers son emplacement dans le nouveau thème. C’est le plan que le reste de la migration devra suivre.

Pour chaque section personnalisée de l’ancien thème, décidez d’une de ces trois issues :

• Correspond à une section intégrée du nouveau thème (par exemple, un hero banner ou une collection mise en évidence). Réutilisez la section du nouveau thème et déplacez-y vos paramètres.
• Nécessite une nouvelle section personnalisée car rien de ce qui est intégré ne correspond. Vous allez devoir la reconstruire.
• Peut être abandonnée car elle n’est plus utilisée ou bien est remplacée par une fonctionnalité native.

Notez ce mapping dans un simple tableau afin de ne rien perdre :

Le mapping des paramètres a autant d’importance que celui des sections. Les valeurs de marque dans l’ancien settings_data.json ne sont pas transférées automatiquement, car le nouveau thème définit son propre schéma. Notez les valeurs de couleurs, de polices et d’espacements que vous souhaitez conserver, puis configurez-les dans le nouveau thème.

Étape 3 : Utiliser l’IA pour traduire le Liquid personnalisé en sections

C’est le cœur de la migration et l’endroit où réside la charge de travail répétitive. Chaque template personnalisé doit devenir un template JSON, et son code doit être déplacé vers des sections autonomes.

Le processus de migration de Shopify pour un seul template se déroule ainsi :⁴

1. Dupliquez le thème et gardez-le non publié le temps de l’édition.
2. Supprimez les balises {% section %} du template Liquid, car les fichiers de section ne peuvent pas se référencer entre eux.
3. Déplacez le code restant vers des sections existantes ou nouvelles.
4. Supprimez le template .liquid d’origine, puisqu’un product.liquid et un product.json ne peuvent pas cohabiter dans le dossier /templates.
5. Créez le template JSON en répertoriant la section sous sections et order.
6. Testez le template dans l’éditeur de thème.
7. Ajoutez les sections supplémentaires éventuelles et définissez leur ordre dans le fichier JSON.
8. Activez les blocs d’applications en ajoutant des blocs {% schema %} de "type": "@app" et en les affichant avec {% render block %}.
9. Répétez pour chaque template.

Claude est parfaitement adapté aux étapes 2 à 5. Donnez-lui l’ancien template ainsi que les conventions de section du nouveau thème, et demandez-lui de diviser le template en sections autonomes, d’écrire le {% schema %} de chacune, et de générer le template JSON qui les assemble. Il ne devinera pas les types de champs, à moins que vous ayez configuré le Shopify AI toolkit et Claude Code, qui valide le Liquid et le schéma en fonction des règles actuelles de Shopify.

Un prompt qui fonctionne bien (en anglais) :

Convert this vintage product.liquid into an Online Store 2.0 JSON template.
Split it into self-contained sections - no section can reference another section.
Write a {% schema %} for each section exposing the settings shown here: [list].
Output the sections and the product.json that renders them in order.

Vérifiez tous les résultats. L’IA la saisie, mais pas le jugement. Contrôlez que les noms de configuration correspondent, que les liaisons des sources dynamiques sont préservées et qu’aucune référence {% section %} n’a survécu à la séparation.

Étape 4 : Porter le CSS et le JS personnalisé

Les thèmes vintage portent souvent des années de CSS empilés et de scripts inline. Les déplacer proprement est une tâche en soi.

Approche pratique :

• Limitez le CSS de la section à sa section. Les sections de la Boutique en ligne 2.0 peuvent héberger leurs propres styles, ce qui permet de lier le CSS à son code HTML plutôt que de tout mettre dans un grand fichier global.
• Supprimez les règles mortes. Les anciens thèmes accumulent du CSS pour des sections qui n’existent plus. Demandez à Claude de croiser votre feuille de style avec les sections que vous conservez et de signaler les règles sans balisage correspondant.
• Revérifiez les liaisons d’événements JS. Les scripts qui s’accrochaient à d’anciennes classes ou identifiants se cassent lorsque le HTML change. Confirmez que les sélecteurs correspondent toujours.

Le code d’application laissé de côté après la désinstallation d’une app est une source fréquente de CSS et de JS morts. Notre guide pour nettoyer le reste de code d’application sur Shopify explique comment le trouver et le purger lors d’une migration.

Améliorer la vitesse est une raison tout à fait valable de faire une migration, évitez donc de l’annuler en transportant des éléments indésirables. Consultez comment accélérer un thème Shopify pour savoir quoi vérifier une fois le nouveau thème en place.

Étape 5 : Préserver les méta-champs et les templates

C’est l’étape que les gens appréhendent le plus, alors qu’elle est plus indulgente que prévu tant qu’on comprend où vivent les données.

Les méta-champs (metafields) et les méta-objets sont des données de la boutique, non du thème. Ils se trouvent au niveau de la boutique et ne sont pas impactés par le thème actuellement publié. Migrer un thème ne les supprime pas. Ce qui réside dans le thème, c’est l’affichage : les sources dynamiques qui relient un méta-champ à une section ou à un bloc sont des paramètres configurés côté thème.³

La règle est donc :

• Les définitions et les valeurs de méta-champs et de méta-objets survivent au changement de thème car ils ne sont pas liés au thème.
• Les connexions qui les affichent - les liaisons de sources dynamiques dans les sections et les blocs - sont configurées par thème et doivent être reconnectées dans le nouveau.³

Pendant votre audit, notez chaque endroit où l’ancien thème lit un méta-champ. Dans le nouveau thème, reconstruisez ces liens via les sources dynamiques de l’éditeur ou dans le code Liquid de la section. Notre guide sur l’ajout de méta-champs aux produits Shopify détaille ce point spécifique à la présentation.

Les templates alternatifs sont conservés en tant que concepts, mais pas en tant que fichiers. Si l’ancien thème contenait un fichier page.about.liquid, vous devrez recréer un fichier page.about.json dans le nouveau. Un thème peut englober jusqu’à 1 000 templates JSON, le nombre de templates ne sera donc pas une limite.²

Étape 6 : Tester sur un thème non publié

Jusqu’ici, chaque étape s’est déroulée sur un thème dupliqué et non publié. Les tests en sont bien entendu la raison. La documentation de migration de Shopify recommande dès le départ de dupliquer le thème et de le garder non publié pendant que vous travaillez.⁴

Testez avec le thème toujours non publié :

1. Prévisualisez tous les types de templates - page d’accueil, produit, collection, panier, recherche, blog, page basique, 404.
2. Vérifiez chaque section migrée en vous assurant qu’elle s’affiche bien et que ses paramètres fonctionnent correctement dans l’éditeur.
3. Confirmez les sources dynamiques pour vous assurer qu’elles affichent les bonnes valeurs de méta-champs sur de vrais produits.
4. Testez les app blocks (blocs d’applications) sur les pages qui les utilisent.
5. Parcourez le tunnel d’achat en entier (checkout), depuis le produit jusqu’au paiement en passant par le panier.
6. Faites des vérifications sur ordinateur et sur mobile pour chaque page clé.
7. Comparez avec le thème qui est en ligne côte à côte, afin de vous assurer que rien ne disparaisse silencieusement.

Une boutique de développement (development store) est un endroit sûr pour simuler une migration complète avant même de toucher de près ou de loin à la bibliothèque de thèmes de votre boutique en production.

Étape 7 : Préparer un plan de retour en arrière (rollback)

Une migration n’est pas terminée au moment du passage en ligne. Elle est véritablement terminée lorsque vous êtes certain de ne plus avoir à faire de retour en arrière, un plan de rollback constituant le meilleur moyen de vous donner cette assurance.

Votre plan de rollback :

• Conservez l’ancien thème dans la bibliothèque. Ne supprimez pas le thème vintage après la publication de la nouveauté. Il reste votre solution de secours accessible en un clic.
• Dupliquez-le avant de le publier. Publiez une copie de la version achevée, et non pas l’espace de brouillon ; ainsi ce dernier restera intact s’il vous fallait plus tard corriger pour republier à la volée.
• Sauvegardez vos paramètres (settings). Prenez note de la configuration des réglages clés du thème en production au cas où une manipulation rendrait certains éléments obsolètes.
• Privilégiez les périodes creuses. Une très faible fréquentation induira moins de victimes collatérales si, par malchance, une grave erreur venait à requérir une reprise à l’état antérieur.
• Surveillez après le lancement. Surveillez de près les analyses de données (analytics) et le journal d’erreurs au cours des premières heures. Si le taux de conversion chute brutalement ou qu’une page principale plante, rebasculez vers l’ancien thème et attelez-vous au diagnostic sans qu’il n’impacte les clients en direct.

Comme le thème en lui-même demeure inchangé dans votre bibliothèque de stockage, retourner en arrière équivaut ni plus ni moins à le publier de nouveau. C’est en vue de préserver ce filet de sécurité constant que toutes les indications initiales exigeaient qu’on l’opère au sein d’une duplication.

Checklist complète de la migration

Effectuez la migration dans cet ordre :

1. Auditer le thème vintage - templates, sections, snippets, Liquid personnalisé, CSS, JS, code d’application, méta-champs, paramètres.
2. Mapper chaque élément personnalisé vers une cible du nouveau thème : réutiliser, reconstruire ou abandonner.
3. Dupliquer le nouveau thème de base et le garder non publié.
4. Convertir chaque template Liquid en template JSON, en divisant le code en sections autonomes.
5. Écrire un {% schema %} pour chaque nouvelle section et configurer l’order du JSON.
6. Porter le CSS et JS, en limitant les styles aux sections et en supprimant les règles mortes (obsolètes).
7. Reconnecter les sources dynamiques des méta-champs et méta-objets dans le nouveau thème.
8. Recréer les templates alternatifs sous forme de fichiers JSON.
9. Tester chaque type de template sur le thème non publié, y compris le mobile et le checkout.
10. Publier une copie du thème finalisé pendant une période creuse.
11. Garder l’ancien thème dans la bibliothèque comme solution de repli (rollback).
12. Surveiller les analytics et les erreurs après le lancement.

Où s’intègre l’IA et ce qu’elle ne peut pas faire

L’IA change l’économie d’une migration de thème en supprimant le travail de traduction lent et répétitif. Elle ne remplace cependant pas les parties qui nécessitent du jugement.

Ce que l’IA fait bien :

• Lire l’intégralité d’un thème et cataloguer la logique personnalisée.
• Diviser (ou séparer) des templates Liquid monolithiques en sections autonomes.
• Rédiger les définitions {% schema %} et des templates JSON.
• Croiser le CSS avec le code HTML conservé pour y débusquer les règles inutilisées (règles mortes).
• Expliquer ce que fait un morceau de code hérité (legacy) de Liquid avant de le déplacer.

Ce que vous conservez :

• Les décisions de mapping des sections.
• La vérification et la re-connexion des liaisons de sources dynamiques sur vos objets et vos méta-champs.
• Les tests sur de vrais produits et sur tout le parcours d’achat complet du checkout.
• La décision finale de lancer une publication et le potentiel retour-arrière.

Pour en savoir plus sur l’intégration des outils natifs d’IA dans les processus de travail modernes, découvrez notre point de vue sur le développement Shopify centré autour de l’IA. C’est également l’approche derrière Fudge, qui génère des sections propres à Shopify et se modifient directement à base de votre thème.

Résumé

Une migration de thème Shopify d’un thème vintage vers la Boutique en ligne 2.0 est une reconstruction, car les deux architectures stockent les templates de façon bien différente. Le travail complet devrait se diviser en plusieurs étapes : audit, mapping, traduction proprement dite et reconnexion des variables de méta-champs (ainsi que leurs paramètres associatifs), la phase de validation aux travers d’un testing minutieux, la planification du lancement avec en filet constant la provision vers l’arrière qu’offre le rollback.

L’IA vous soulage de la tâche répétitive liée purement à la compilation (ou traduction des langages) - lire l’ancien thème et scinder les vieux et massifs templates dans d’élégantes sections autonomes, élaborer et concevoir l’écrit schématique structurel et y trouver votre code mort. Vous conservez pour vous l’architecture décisionnelle comme son ordonnancement d’affichage, ainsi qu’a y passer des tests afin de déclencher (au final) de bout en bout l’idée initiale par son exécution ou annuler sur le duplicata par mesure de repli sur l’existant. Effectuez l’ensemble du process entier depuis un thème dupliqué mais ne publiez en aucun cas. Mettez également l’ancien au fond d’une bibliothèque sans interagir, de sorte qu’un retour ne prenne à agir qu’à la volée sur base d’un clic sur la souris.

FAQ