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

Points à retenir

• Une migration de thème Shopify déplace une boutique d’un thème à un autre. Passer d’un thème vintage à l’Online Store 2.0 implique de le reconstruire, et non de simplement copier des fichiers.
• Les thèmes vintage et ceux de l’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 méta-champs (metafields) et méta-objets (metaobjects) font partie des données de votre boutique, pas de votre thème. Ils survivent à la migration, mais les connexions aux sources dynamiques qui les affichent sont gérées au niveau du thème et devront être reconnectées.
• Faites chaque étape sur un thème dupliqué et non publié. La propre documentation de migration de Shopify commence par ce point.
• L’IA se charge du travail de traduction répétitif - réécriture du Liquid, découpage des templates monolithiques en sections, portage du CSS et du JS - pendant que vous gérez l’audit, le mapping et les tests.

Une migration de thème Shopify est le processus de transfert d’une boutique d’un thème à un autre au sein de Shopify. Ce guide couvre la version la plus complexe de cette tâche : prendre un thème vintage (antérieur à 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 moderne. C’est un travail de thème à thème à l’intérieur de Shopify. Ce n’est pas une migration de plateforme depuis WooCommerce ou Magento.

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

Ce playbook détaille toute la séquence : faire l’audit de l’ancien thème, mapper les sections et les paramètres, utiliser l’IA (Claude) pour traduire le Liquid personnalisé, le CSS et le JS vers la structure du nouveau thème, préserver les méta-champs et les templates, tester sur un thème non publié, et garder une option de rollback (retour en arrière) ouverte 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 IA avec une note de 4.9 et un badge Built for Shopify. Les migrations de thèmes, le mapping de sections et les réécritures de Liquid constituent le 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 code, comprenez ce qui diffère vraiment. L’écart entre les deux architectures explique pourquoi une migration est en réalité une refonte.

Un modèle 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 modèle JSON peut afficher jusqu’à 25 sections, chaque section peut contenir jusqu’à 50 blocs, et un thème peut contenir jusqu’à 1 000 modèles JSON.² Ces limites déterminent la manière dont vous allez découper un ancien modèle monolithique.

La règle structurelle la plus importante : les fichiers de section ne peuvent pas référencer d’autres fichiers de section.⁴ Les modèles vintage qui empilent plusieurs balises {% section %} doivent être aplatis, 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 réside le travail répétitif. Chaque template personnalisé doit devenir un template JSON, et son code doit être déplacé dans des sections indépendantes.

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

1. Dupliquez le thème et gardez-le non publié pendant que vous le modifiez.
2. Supprimez les balises {% section %} du template Liquid, car les fichiers de section ne peuvent pas référencer d’autres sections.
3. Déplacez le code restant dans des sections existantes ou nouvelles.
4. Supprimez le template .liquid original, car un fichier product.liquid et un fichier product.json ne peuvent pas coexister dans /templates.
5. Créez le template JSON listant la section sous sections et order.
6. Testez le template dans l’éditeur de thème.
7. Ajoutez d’autres sections 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 faisant le rendu 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 indépendantes, d’écrire le {% schema %} pour chacune, et de produire le template JSON qui les relie. Il n’aura pas à deviner les types de champs si vous avez configuré le toolkit IA Shopify et Claude Code, qui valident le Liquid et le schéma en fonction des règles actuelles de Shopify.

Un prompt qui fonctionne :

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.

Revoyez chaque résultat. L’IA s’occupe de la saisie, pas de la réflexion. 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 au découpage.

É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 redoutent le plus, et elle est plus indulgente que prévu, à condition de comprendre où résident les données.

Les méta-champs et les méta-objets sont des données de la boutique, et non du thème. Ils se trouvent au niveau de la boutique et ne sont pas affectés par le thème publié. La migration d’un thème ne les supprime pas. Ce qui vit dans le thème, c’est l’affichage : les sources dynamiques qui lient un méta-champ à une section ou à un bloc sont des paramètres configurés côté thème.³

La règle est donc la suivante :

• Les définitions et valeurs des méta-champs et méta-objets survivent au changement de thème car elles n’y figurent pas.
• 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 tous les endroits où l’ancien thème lit un méta-champ. Dans le nouveau thème, reconstruisez ces connexions à l’aide des sources dynamiques de l’éditeur ou dans le Liquid de la section. Notre guide sur l’ajout de méta-champs aux produits Shopify détaille le côté affichage.

Les templates alternatifs sont transférés en tant que concepts mais pas en tant que fichiers. Si l’ancien thème possédait un page.about.liquid, vous devrez recréer page.about.json dans le nouveau thème. Un thème peut contenir jusqu’à 1 000 templates JSON, donc le nombre de templates n’est pas une limite.²

É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 change la donne économique d’une migration de thème en supprimant le travail de traduction lent et répétitif. Elle ne remplace pas pour autant les étapes nécessitant du jugement.

Ce que l’IA fait bien :

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

Ce dont vous gardez le contrôle :

• Les décisions liées au mapping des sections.
• La vérification des sources dynamiques et des liaisons de méta-champs.
• Les tests sur de vrais produits et sur tout le processus de paiement (checkout).
• La décision de publier ou de revenir en arrière (rollback).

Pour en savoir plus sur la façon dont les outils natifs en IA s’intègrent au travail moderne sur Shopify, lisez notre article sur le développement Shopify orienté IA. C’est également l’approche derrière Fudge, qui génère des sections natives pour Shopify et fait des modifications directement dans les thèmes.

Résumé

Une migration de thème Shopify d’un thème vintage vers l’Online Store 2.0 est une reconstruction, car les deux architectures gèrent les templates différemment. Le travail se divise en plusieurs étapes : audit, mapping, traduction, reconnexion des méta-champs, tests et rollback.

L’IA vous soulage de la traduction répétitive - lire l’ancien thème, diviser les templates en sections, rédiger les schémas et repérer le code mort. Vous conservez le mapping, les tests et la décision de publication. Faites tout cela sur un thème dupliqué et non publié, et gardez l’ancien dans votre bibliothèque pour pouvoir revenir en arrière en un clic.

FAQ