Modification du code du thème

Vous pouvez modifier le code de votre thème pour apporter des modifications détaillées à votre boutique en ligne avec l’éditeur de code. La plupart des fichiers qui composent un thème contiennent du Liquid, le langage de modélisation de Shopify. Les fichiers de thème contiennent également du HTML, du CSS, du JSON et du JavaScript. Ne modifiez le code d’un thème que si vous connaissez le HTML et le CSS et si vous avez une connaissance de base de Liquid.

Vous ne pouvez modifier le code de votre thème qu’après l’avoir acheté. Cela inclut l’utilisation du générateur de code d’IA dans l’éditeur de thème. Si vous utilisez une version d’essai d’un thème payant, vous devez l’acheter avant de pouvoir apporter des modifications au code.

L’éditeur de code affiche un répertoire des fichiers de votre thème et un espace pour afficher et modifier les fichiers. Lorsque vous cliquez sur un fichier dans le répertoire, il s’ouvre dans l’éditeur de code. Vous pouvez ouvrir et modifier plusieurs fichiers simultanément. Vous pouvez également ouvrir et examiner plusieurs fichiers simultanément.

Modifier le code de votre thème

Vous pouvez utiliser l’éditeur de code pour modifier les fichiers de votre thème.

Étapes :

Enregistrement des modifications

Lorsque vous modifiez un fichier, un point s’affiche à côté du nom de l’onglet pour indiquer les modifications non enregistrées. Cliquez sur le bouton Enregistrer pour enregistrer vos modifications. Vous pouvez également saisir ⌘ + S sur Mac ou Ctrl + S sur Windows pour enregistrer vos modifications.

Mise en forme du code du thème

Pour corriger l’indentation du code, ouvrez la palette de commandes avec ⌘ + Shift + P sur Mac ou Ctrl + Shift + P sur Windows, tapez format, puis sélectionnez Mettre en forme le document.

Étapes :

1. Depuis votre interface administrateur Shopify, allez à Boutique en ligne > Thèmes.

2. Cliquez sur > Modifier le code.

3. Ouvrez le fichier que vous souhaitez mettre en forme.

4. Saisissez ⌘ + P sur Mac ou Ctrl + P sur Windows.

5. Dans la palette de commandes, saisissez format, puis appuyez sur Entrée sur votre clavier.

6. Enregistrez le fichier.

Suivi des modifications de fichiers

Pour annuler les modifications apportées aux fichiers de thème, utilisez la vue Calendrier pour vérifier l’historique du fichier et revenir à une version précédente. Notez que les modifications apportées sur d’autres appareils n’apparaissent pas dans la vue Calendrier.

Étapes :

1. Depuis votre interface administrateur Shopify, allez à Boutique en ligne > Thèmes.

2. Cliquez sur > Modifier le code.

3. Ouvrez le fichier que vous souhaitez examiner.

4. Dans la vue Calendrier, cliquez sur une entrée du calendrier pour comparer les différences.

5. Pour restaurer le fichier à un état antérieur, faites un clic droit sur l’entrée du calendrier, puis sélectionnez Restaurer le contenu.

6. Cliquez sur Restaurer.

Vérification du thème

L’éditeur de code inclut le Vérificateur de thème, une fonctionnalité qui vous aide à prévenir les erreurs en fournissant un retour immédiat pendant la rédaction du code, au lieu de découvrir des erreurs dans votre thème utilisé.

Dans l’éditeur de code, le Vérificateur de thème peut identifier les erreurs suivantes dans le code modifié :

• Scripts bloquant l’analyseur, qui peuvent ralentir une boutique en ligne
• Incohérences entre les fichiers de traduction, telles que des clés de traduction manquantes ou des traductions qui ne correspondent pas dans un fichier de paramètres régionaux
• Modèles manquants

Les erreurs sont indiquées par une ligne rouge sous le code. Pour afficher l’erreur, passez votre souris sur la ligne surlignée.

Recherche et remplacement dans l’éditeur de code

Vous pouvez effectuer une recherche dans l’éditeur de code de l’une des manières suivantes :

• Rechercher dans le code d’un fichier spécifique.
• Rechercher dans le code de tous les fichiers du thème.

Vous pouvez également remplacer du code dans un fichier spécifique ou plusieurs instances dans tous les fichiers du thème. Vous pouvez aussi rechercher un fichier par son nom pour ouvrir un fichier.

Recherche dans un fichier

Vous pouvez rechercher et remplacer du code dans un fichier spécifique. Utilisez les touches fléchées pour examiner chaque instance du code.

Après avoir recherché du code, vous pouvez le remplacer dans un fichier.

Étapes :

1. Depuis votre interface administrateur Shopify, allez à Boutique en ligne > Thèmes.

2. Cliquez sur > Modifier le code.

3. Ouvrez le fichier dans lequel vous souhaitez effectuer une recherche.

4. Appuyez sur ⌘ + F sur un Mac ou sur Ctrl + F sous Windows.

5. Dans le champ Rechercher, saisissez votre terme de recherche.

6. Facultatif : pour remplacer du code, effectuez les actions suivantes :

• Dans la fenêtre modale de recherche, cliquez sur l’icône .
• Dans le champ Remplacer, saisissez le code de remplacement. Vous pouvez cliquer sur Respecter la casse pour que la casse du code de remplacement corresponde à celle de l’instance existante.
• Cliquez sur l’icône Remplacer pour remplacer une instance à la fois, ou sur l’icône Remplacer tout pour remplacer toutes les instances en même temps.

Recherche dans tous les fichiers

Cliquez sur le bouton de recherche dans la barre latérale gauche pour effectuer une recherche dans tous les fichiers du thème. Les résultats affichent chaque instance de votre terme de recherche et le fichier dans lequel elle apparaît.

Étapes :

1. Depuis votre interface administrateur Shopify, allez à Boutique en ligne > Thèmes.

2. Cliquez sur > Modifier le code.

3. Cliquez sur l’icône pour ouvrir le panneau de recherche.

4. Dans le champ Rechercher, saisissez votre terme de recherche.

5. Facultatif : pour remplacer du code, effectuez les actions suivantes :

• Dans la fenêtre modale de recherche, cliquez sur l’icône .
• Dans le champ Remplacer, saisissez le code de remplacement.
• Remplacez une instance à la fois ou toutes les instances en une seule fois.

Options de recherche avancée

Pour affiner vos résultats de recherche, utilisez une ou plusieurs des options de recherche suivantes :

• Respecter la casse renvoie les termes de recherche qui respectent la casse. Par exemple, si vous saisissez produit, la recherche met en surbrillance toutes les instances de « produit » ou de « Produit ». Si vous sélectionnez Respecter la casse, la recherche met en surbrillance uniquement les instances de produit.
• Mot entier renvoie les termes de recherche qui correspondent exactement au mot et exclut les correspondances partielles. Par exemple, si vous saisissez panier, la recherche met en surbrillance les instances de « panier », mais pas de « carton ».
• Utiliser une expression régulière renvoie des résultats de recherche qui correspondent à une expression régulière (regex). Une regex est une chaîne de caractères qui spécifie un modèle de correspondance dans le texte.

Dans le panneau Rechercher, vous pouvez également sélectionner des fichiers et des dossiers à inclure ou à exclure des résultats de la recherche.

Cliquez sur pour ouvrir le menu avancé. Vous pouvez saisir n’importe quel chemin de fichier ou de dossier dans les champs fichiers à inclure ou fichiers à exclure. Pour ajouter plusieurs fichiers ou dossiers, séparez-les par un espace et une virgule. Par exemple, pour rechercher des fichiers dans le dossier sections, saisissez ./sections dans le champ fichiers à inclure.

Vous pouvez également effectuer une recherche dans un dossier spécifique à partir de la vue du répertoire de fichiers. Faites un clic droit sur un dossier, puis sélectionnez Rechercher dans le dossier... dans le menu déroulant.

Gestion des fichiers de thème

Vous pouvez gérer les fichiers dans le code de votre thème. Vous pouvez supprimer des fichiers, en ajouter de nouveaux, renommer des fichiers et rétablir la version précédente de fichiers modifiés à partir du répertoire de fichiers.

Ouverture d’un fichier de thème

Pour ouvrir un fichier de thème, cliquez sur un dossier, puis sur le nom du fichier dans l’explorateur. Vous pouvez également rechercher des fichiers par nom ou par extension, puis ouvrir le fichier.

Étapes :

1. Depuis votre interface administrateur Shopify, allez à Boutique en ligne > Thèmes.

2. Cliquez sur > Modifier le code.

3. Saisissez ⌘ + P sur Mac ou Ctrl + P sur Windows.

4. Saisissez le nom du fichier dans la barre de recherche et sélectionnez le fichier, ou sélectionnez un fichier dans la liste Récemment ouverts.

Ajout d’un nouveau fichier de thème

Pour ajouter un fichier, sélectionnez un dossier, cliquez sur l’icône Nouveau fichier, puis saisissez le nom et l’extension du fichier.

Les noms de fichiers peuvent contenir les caractères A-Z, 0-9 et ne peuvent pas contenir d’espaces. Séparez les mots par des tirets ou des traits de soulignement. Une extension de fichier est définie par un point . et le type d’extension. Par exemple, .liquid ou .css.

Étapes :

1. Depuis votre interface administrateur Shopify, allez à Boutique en ligne > Thèmes.

2. Cliquez sur > Modifier le code.

3. Cliquez sur le dossier auquel vous souhaitez ajouter un nouveau fichier.

4. Faites un clic droit sur le nom du dossier et sélectionnez Nouveau fichier... dans le menu déroulant.

5. Saisissez un nouveau nom pour le fichier.

6. Appuyez sur la touche Entrée de votre clavier.

Chargement d’une nouvelle ressource

Vous pouvez charger une nouvelle ressource, telle qu’une icône ou un fichier image, dans le dossier assets de l’éditeur de code.

Étapes :

1. Depuis votre interface administrateur Shopify, allez à Boutique en ligne > Thèmes.

2. Cliquez sur > Modifier le code.

3. Faites un clic droit sur le dossier assets.

4. Cliquez sur Charger….

5. Sélectionnez le fichier que vous souhaitez charger.

6. Cliquez sur Ouvrir.

Renommer un fichier de thème

Vous pouvez faire un clic droit sur un fichier pour le renommer. Veillez à ne pas modifier ni supprimer l’extension de fichier. Une extension de fichier est définie par un point . et le type d’extension. Par exemple, .liquid ou .css. Les noms de fichiers peuvent inclure les caractères A-Z et 0-9 et ne peuvent pas contenir d’espaces. Séparez les mots par des tirets ou des traits de soulignement. Si le nom du fichier n’est pas valide, le nouveau nom ne sera pas enregistré.

Étapes :

1. Depuis votre interface administrateur Shopify, allez à Boutique en ligne > Thèmes.

2. Cliquez sur > Modifier le code.

3. Faites un clic droit sur un fichier et sélectionnez Renommer… dans le menu déroulant.

4. Saisissez un nouveau nom pour le fichier.

5. Appuyez sur la touche Entrée de votre clavier.

Suppression d’un fichier de thème

Vous pouvez supprimer n’importe quel fichier de votre thème. Les fichiers de thème supprimés ne peuvent pas être récupérés.

Étapes :

1. Depuis votre interface administrateur Shopify, allez à Boutique en ligne > Thèmes.

2. Cliquez sur > Modifier le code.

3. Faites un clic droit sur un fichier et sélectionnez Supprimer définitivement dans le menu déroulant.

4. Cliquez sur Supprimer.