Migration de thème Shopify assistée par l'IA : d'un thème vintage vers Online Store 2.0

À retenir

• Une migration de thème Shopify fait passer une boutique d’un thème à un autre. Passer d’un thème vintage à Online Store 2.0 implique de le reconstruire, et non pas de simplement copier des fichiers.
• Les thèmes vintages et les thèmes Online Store 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 metafields et les metaobjects se trouvent dans les données de votre boutique, et non dans le thème. Ils sont conservés lors de la migration, mais les connexions aux sources dynamiques qui les affichent dépendent du thème et doivent être reconnectées.
• Effectuez chaque étape sur un thème dupliqué et non publié. La propre documentation de migration de Shopify commence par ça.
• L’IA gère le travail de traduction répétitif - réécrire le Liquid, diviser des templates monolithiques en sections, porter le CSS et le JS - pendant que vous gardez la main sur l’audit, le mapping et les tests.

Une migration de thème Shopify est le processus permettant de faire passer une boutique d’un thème à un autre au sein de Shopify. Ce guide couvre la version la plus difficile de ce travail : prendre un thème vintage (d’avant 2021) et le migrer vers un thème Online Store 2.0 tel que 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 au sein de Shopify. Ce n’est pas une migration de plateforme depuis WooCommerce ou Magento.

La raison pour laquelle cette migration est difficile est structurelle. Online Store 2.0 a changé la façon dont les thèmes sont construits. Shopify l’a lancé le 29 juin 2021, introduisant les templates JSON et les blocs d’application pour que les marchands puissent ajouter, supprimer et réorganiser des sections sur la plupart des pages, et pas seulement sur la page d’accueil.¹ Un thème vintage ne peut pas être mis à jour sur place. Vous devez le reconstruire sur la nouvelle architecture, puis y transférer vos personnalisations.

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, l’opérateur IA pour les boutiques Shopify, noté 4.9 et titulaire du badge Built for Shopify. Les migrations de thèmes, le mapping des sections et la réécriture de code Liquid constituent le travail quotidien derrière ce produit.

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

Le fossé entre ces deux architectures explique pourquoi une migration s’apparente à une reconstruction.

Un template JSON est un fichier de données. Il stocke une liste de sections à afficher 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éterminent la façon de diviser un ancien template monolithique.

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

Étape 1 : Auditez 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 quittez.

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. Les sections et snippets personnalisés - ce qu’ils affichent et où ils sont utilisés.
3. La logique Liquid personnalisée - les boucles, conditions et balises qu’un thème par défaut n’aura pas.
4. Le CSS et JS personnalisés - les styles en ligne (inline), les fichiers d’assets du thème, et toute balise script ajoutée au fichier theme.liquid.
5. Les app embeds et le code d’applications collé - les snippets qu’une application a injectés dans vos templates.
6. L’utilisation des méta-champs et méta-objets - où les données personnalisées sont lues et affichées.
7. Les paramètres - les valeurs dans settings_data.json qui reflètent les choix de marque comme les couleurs, les polices, et les options de mise en page.

C’est ici que l’IA montre son utilité dès le début. Pointez Claude vers le répertoire du thème et demandez-lui de lister chaque fichier contenant de la logique personnalisée, de signaler les références {% section %} et de résumer ce que fait chaque snippet. Il lira l’ensemble du thème plus vite qu’une personne faisant défiler les fichiers. Notre guide sur la modification d’un thème Shopify explique comment travailler directement dans le code d’un thème.

Une mise en garde selon les recommandations mêmes de Shopify : les personnalisations faites par des applications ou manuellement sur un thème ne peuvent pas être migrées automatiquement.⁵ C’est l’audit qui vous dira la quantité de traduction manuelle qui vous attend.

Étape 2 : Mappez les sections et paramètres au 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 suivra le reste de la migration.

Pour chaque section personnalisée de l’ancien thème, choisissez l’une des trois issues suivantes :

• Correspond à une section intégrée dans le nouveau thème (par exemple, un hero ou une collection en vedette). Réutilisez la section du nouveau thème et transférez vos paramètres.
• Nécessite une nouvelle section personnalisée car aucune section par défaut ne correspond. Vous devrez la reconstruire.
• Peut être supprimée car elle n’est plus utile ou a été remplacée par une fonctionnalité native.

Enregistrez ce mapping dans un tableau simple pour ne rien oublier :

Le mapping des paramètres est tout aussi important que celui des sections. Les valeurs de la marque dans l’ancien fichier 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 couleur, de police et d’espacement que vous souhaitez conserver, puis configurez-les dans le nouveau thème.

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

C’est le cœur de la migration et c’est là que se trouve la charge répétitive. Chaque template personnalisé doit devenir un template JSON, et son code doit être déplacé dans des sections autonomes.

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

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

Claude est tout à fait adapté aux étapes 2 à 5. Fournissez-lui l’ancien template et les conventions de section du nouveau thème, et demandez-lui de diviser le template en sections autonomes, d’écrire le {% schema %} pour chacune d’elles, et de produire le template JSON qui les relie. Il aura beaucoup moins tendance à deviner les types de champs si vous avez configuré le toolkit IA de Shopify et Claude Code, qui valide le Liquid et le schema selon les règles actuelles de Shopify.

Un prompt qui fonctionne :

Convertis ce product.liquid vintage en un template JSON Online Store 2.0.
Divise-le en sections autonomes - aucune section ne peut faire référence à une autre section.
Écris un {% schema %} pour chaque section exposant les paramètres indiqués ici : [liste].
Génère les sections et le product.json qui les affiche dans l'ordre.

Examinez chaque résultat. L’IA supprime la saisie manuelle, pas le jugement. Vérifiez que les noms des paramètres correspondent, que les liaisons des sources dynamiques sont préservées, et qu’aucune référence {% section %} n’a survécu à la division.

Étape 4 : Portez le CSS et JS personnalisés

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

Approche pratique :

• Limitez le CSS de la section à la section (scoping). Les sections Online Store 2.0 peuvent embarquer leurs propres styles, ce qui permet de garder le CSS lié au code HTML auquel il s’applique plutôt que d’avoir un seul fichier global.
• Supprimez les règles obsolètes. Les anciens thèmes accumulent du CSS pour des sections qui n’existent plus. Demandez à Claude de comparer votre feuille de style aux sections que vous gardez et d’isoler les règles sans balisage correspondant.
• Vérifiez à nouveau les liaisons d’événements JS (event bindings). Les scripts qui ciblent d’anciens noms de classes ou ID ne marcheront plus si le HTML change. Confirmez que les sélecteurs correspondent toujours.

Le code d’application laissé derrière après la suppression de celle-ci est une source fréquente de CSS et JS morts. Notre guide sur comment supprimer les restes de code d’application sur Shopify explique comment les trouver et les retirer lors d’une migration.

La rapidité est une excellente raison de migrer, alors ne gâchez pas vos efforts en transférant du code inutile. 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éservez les méta-champs et les templates

C’est l’étape que les gens craignent le plus, mais elle est plus indulgente que prévu, du moment que vous comprenez où se trouvent les données.

Les metafields et les metaobjects sont des données de la boutique, et non du thème. Ils se situent au niveau de la boutique et ne sont pas affectés par le thème 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 lient un metafield à une section ou un bloc sont des paramètres qui incombent au thème.³

La règle est donc la suivante :

• Les définitions et les valeurs des metafields et metaobjects survivent au changement de thème car elles ne sont pas dans le thème.
• Les connexions qui les affichent - les liaisons de sources dynamiques dans les sections et les blocs - sont définies par thème et doivent être reconnectées dans le nouveau.³

Lors de votre audit, notez chaque endroit où l’ancien thème lit un metafield. Dans le nouveau thème, reconstruisez ces liaisons via les sources dynamiques de l’éditeur ou dans le Liquid de la section. Notre guide sur l’ajout de metafields aux produits Shopify couvre la partie affichage en détail.

Les templates alternatifs se transfèrent en tant que concepts, mais pas en tant que fichiers. Si l’ancien thème avait un page.about.liquid, vous recréez page.about.json dans le nouveau thème.

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

Jusqu’à présent, toutes les étapes ont été réalisées sur un thème dupliqué et non publié. C’est fait exprès pour faciliter les tests. Les documents de migration de Shopify commencent par le fait de dupliquer le thème et de le garder non publié pendant que vous travaillez.⁴

Faites des tests avec le thème toujours non publié :

1. Prévisualisez chaque type de template - accueil, produit, collection, panier, recherche, blog, page, 404.
2. Vérifiez que chaque section migrée s’affiche et que ses paramètres fonctionnent correctement dans l’éditeur.
3. Confirmez que les sources dynamiques affichent les bonnes valeurs de méta-champs sur de vrais produits.
4. Testez les blocs d’applications sur les pages qui les utilisent.
5. Parcourez le chemin d’achat complet, du produit jusqu’au paiement (checkout).
6. Vérifiez la version mobile et ordinateur pour chaque template clé.
7. Comparez avec le thème en ligne côte à côte, pour que rien ne disparaisse discrètement.

Une boutique de développement est un endroit sûr pour s’entraîner à une migration avant même de toucher à la bibliothèque de thèmes de la boutique en production.

Étape 7 : Prévoyez un plan de rollback

Une migration n’est pas terminée quand le nouveau thème est mis en ligne. Elle est terminée quand vous êtes sûr de ne pas avoir besoin de revenir en arrière, et un plan de rollback (retour en arrière) est ce qui vous donne cette confiance.

Votre plan de rollback :

• Gardez l’ancien thème dans la bibliothèque. Ne supprimez pas le thème vintage après la publication. Il reste votre solution de repli en un clic.
• Dupliquez avant de publier. Publiez une copie du nouveau thème terminé, pas le brouillon de travail, afin que ce dernier reste intact si vous devez le corriger et le republier.
• Enregistrez les paramètres. Notez les principaux paramètres du thème publié pour pouvoir reconstruire rapidement si quelque chose cloche.
• Publiez dans un moment calme. Un trafic plus faible signifie un risque minimisé si vous devez annuler la mise en ligne.
• Surveillez après le lancement. Vérifiez l’analytique et les journaux d’erreurs dans les premières heures. Si la conversion chute ou si une page clé plante, repassez à l’ancien thème et cherchez le problème sans stresser.

Comme l’ancien thème reste intact dans votre bibliothèque, revenir en arrière signifie simplement le publier à nouveau. Ce filet de sécurité est la raison pour laquelle chaque étape précédente s’effectue sur un duplicata.

Checklist complète de migration

Effectuez la migration dans cet ordre :

1. Auditez le thème vintage - templates, sections, snippets, Liquid personnalisé, CSS, JS, code d’application, méta-champs, paramètres.
2. Mappez chaque élément personnalisé à une cible dans le nouveau thème : réutiliser, reconstruire ou abandonner.
3. Dupliquez le nouveau thème de base et gardez-le non publié.
4. Convertissez chaque template Liquid en un template JSON, en divisant le code en sections indépendantes.
5. Écrivez un {% schema %} pour chaque nouvelle section et paramétrez l’order (l’ordre) en JSON.
6. Portez le CSS et JS, en limitant la portée des styles aux sections (scoping) et en supprimant les règles mortes.
7. Reconnectez les sources dynamiques des méta-champs et méta-objets dans le nouveau thème.
8. Recréez les templates alternatifs en JSON.
9. Testez chaque type de template sur le thème non publié, y compris sur mobile et au moment du paiement (checkout).
10. Publiez un duplicata du thème terminé pendant une période de faible trafic.
11. Gardez l’ancien thème dans la bibliothèque comme option de rollback.
12. Surveillez les statistiques et les erreurs après le lancement.

Où l’IA est utile, et où elle ne l’est pas

L’IA modifie l’aspect économique d’une migration de thème en supprimant le lent travail de traduction répétitif. Elle ne supprime pas les parties qui requièrent du jugement.

Ce que l’IA fait bien :

• Lire un thème complet et cataloguer la logique personnalisée.
• Diviser des templates Liquid monolithiques en sections autonomes.
• Écrire des définitions {% schema %} et des templates JSON.
• Recouper le CSS avec le code HTML restant pour trouver les règles mortes.
• Expliquer ce que fait un morceau d’ancien Liquid avant de le déplacer.

Ce que vous conservez :

• Les décisions concernant le mapping des sections.
• La vérification des sources dynamiques et des liaisons de metafields.
• Les tests sur des produits réels et le parcours complet de la caisse (checkout).
• La décision de publier ou de faire un rollback (retour en arrière).

Pour en savoir plus sur la façon dont les outils natifs de l’IA s’intègrent au travail moderne sur Shopify, lisez notre point de vue sur le développement Shopify orienté IA (AI-first). C’est également l’approche derrière Fudge, l’opérateur IA pour les boutiques Shopify. Il code des sections natives Shopify et des modifications dans votre thème sous forme de brouillons que votre équipe valide, et lorsque vous passez à une nouvelle version de thème, il peut transporter les sections et les modifications qu’il a créées sous forme de brouillon pour que vous puissiez vérifier. Pour reconstruire une seule section ou page, décrivez-la à l’éditeur de boutique Shopify.

FAQ