Modification du code du thème

Attention

Si les modifications que vous avez apportées au code d’un thème sont incompatibles avec une mise à jour de ce thème, toutes les modifications que vous avez apportées au code sont supprimées dans la copie mise à jour. Vous ne devez modifier le code de votre thème que si vous ne parvenez pas à apporter les modifications nécessaires à l’aide d’une application Shopify ou de l’éditeur de 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.

Développez votre entreprise

Si vous souhaitez ajouter des fonctionnalités ou du code personnalisés, mais que vous n’avez pas d’expérience dans le développement de sites web avec HTML, CSS et JavaScript, envisagez de faire appel à un partenaire Shopify.

Attention

Pour vous préparer à personnaliser votre thème, effectuez les tâches recommandées suivantes :

• Dupliquez votre thème pour créer une copie de sauvegarde. Vous pourrez ainsi facilement annuler vos modifications et recommencer si nécessaire.
• Assurez-vous de bien comprendre quel niveau de soutien est disponible.
• Informez-vous sur les exigences et les bonnes pratiques relatives au téléchargement d’images.

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 :

Ordinateur de bureau

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

2. Cliquez sur > Modifier le code.

Mobile

1. Depuis l’application Shopify, appuyez sur l’icône .

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Appuyez sur > Modifier le code.

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 restaurer une version antérieure d’un fichier de thème modifié, utilisez la vue Historique de ce fichier.

La vue Historique restaure un fichier existant à la fois. Elle ne permet pas de restaurer un thème entier ni de récupérer les fichiers de thème supprimés. L’historique étant limité, il se peut que les anciennes versions ne soient pas disponibles.

La restauration remplace tout le contenu du fichier, y compris les modifications que vous pourriez vouloir conserver. Avant de restaurer un fichier, copiez son contenu actuel en lieu sûr au cas où vous souhaiteriez conserver certaines modifications.

Étapes :

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

2. Cliquez sur > Modifier le code.

3. Ouvrez le fichier existant que vous souhaitez consulter ou restaurer.

4. Facultatif : si vous souhaitez conserver des modifications actuelles, copiez le contenu actuel du fichier en lieu sûr avant de procéder à la restauration.

5. Dans la vue Historique, cliquez sur une entrée de l’historique pour comparer les différences.

6. Pour remplacer tout le contenu du fichier par la version antérieure sélectionnée, faites un clic droit sur l’entrée de l’historique, puis sélectionnez Restaurer le contenu.

7. 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.

Attention

L’utilisation de regex est une technique de personnalisation avancée. Vous pouvez utiliser un outil tiers tel que regex101 ou RegExr pour vous aider à créer une chaîne de regex.

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, ajouter et renommer des fichiers, ainsi que restaurer des fichiers existants modifiés à partir de leur vue Historique lorsqu’une version antérieure est disponible.

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

Attention

La suppression d’un fichier de thème risque d’endommager votre thème. Avant de supprimer un fichier, veillez à créer une copie de votre 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.