Modification du code de thème

Attention

Si les modifications que vous avez apportées au code d’un thème sont incompatibles avec la mise à jour d’un thème, toutes vos modifications de code sont supprimées dans la copie mise à jour. Vous ne devez modifier le code de votre thème que si vous ne pouvez pas apporter les modifications nécessaires à l’aide d’une application Shopify ou en utilisant 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. La plupart des fichiers qui composent un thème contiennent des éléments Liquid, le langage de modélisation de Shopify. Les fichiers de thème contiennent également du langage HTML, CSS, JSON et JavaScript. Ne modifiez le code d'un thème que si vous possédez de l'expérience avec HTML et CSS, ainsi que des connaissances de base de Liquid.

Développer votre entreprise

Si vous souhaitez ajouter des fonctionnalités ou un code personnalisés, mais que vous n’avez pas d’expérience en développement de sites web avec HTML, CSS et JavaScript, songez à engager un(e) expert(e) Shopify.

Avant de personnaliser votre thème

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. Cela facilite l'annulation de vos modifications et vous permet de recommencer, si nécessaire.
• Assurez-vous de bien comprendre le niveau d'assistance disponible.
• En savoir plus sur les exigences et les meilleures pratiques pour mettre en ligne des images.

Modifier le code de votre thème

Vous pouvez modifier le code de votre thème.

Étapes

Bureau

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

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

Android

1. Dans l'application Shopify, appuyez sur Boutique.
2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.
3. Appuyez sur Gérer les thèmes.

1. Cliquez sur ... > Modifier le code.

L'éditeur de code affiche un répertoire des fichiers de thème sur la gauche, et un espace pour afficher et modifier les fichiers sur la droite.

Lorsque vous cliquez sur un fichier dans le répertoire de gauche, il s’ouvre dans l’éditeur de code. Vous pouvez ouvrir et modifier plusieurs fichiers à la fois. Tous les fichiers que vous modifiez afficheront un point à côté de leur nom :

Cela peut vous aider à savoir où vous avez apporté des modifications.

Revenir à une ancienne version de votre thème

Si vous avez modifié des fichiers du thème et que vous devez les rétablir, vous pouvez revenir aux fichiers individuels .liquid précédant la date et l'heure auxquelles vous les avez modifiés.

Remarque

Les fichiers situés dans le dossier Ressources de l’éditeur de code, y compris les fichiers theme.scss.liquid et theme.js, n’enregistrent pas les versions précédemment modifiées. Si vous apportez des modifications aux fichiers du dossier Ressources, vous devrez peut-être contacter l’assistance pour les thèmes ou engager un expert Shopify.

Bureau

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

2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

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

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

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

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

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

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

1. Sous l’en-tête Modèles, cliquez sur l’un des fichiers .liquid que vous avez récemment modifiés.

2. Cliquez sur Version actuelle sous le nom de fichier .liquid.

3. Cliquez sur le menu déroulant pour sélectionner une ancienne version. Si vous cliquez sur un horodateur, le code revient à la version enregistrée.

4. Facultatif : cliquez sur Aperçu de la boutique pour vérifier que l’erreur a été corrigée.

Theme Check

L’éditeur de code inclut Theme Check, une fonctionnalité qui permet d’éviter les erreurs en fournissant un retour d’expérience immédiat pendant l’écriture du code, et non au moment de l’utilisation de votre thème.

Dans l’éditeur de code, Theme Check peut identifier les erreurs suivantes dans le code modifié :

• Blocage des scripts par l’analyse, ce qui peut ralentir une boutique en ligne
• Incohérences entre les fichiers de traduction, telles que des clés de traduction manquantes ou des traductions non concordantes dans un fichier de paramètres régionaux
• Modèles manquants

Les erreurs sont signalées par une ligne rouge sous le code. Pour afficher l’erreur, survolez la ligne soulignée avec votre souris.

Tutoriels sur la personnalisation du code des thèmes

Vous pouvez suivre des tutoriels de personnalisation du code des thèmes pour vous aider à modifier votre boutique en ligne. Les tutoriels sont organisés en fonction du type de page ou de la fonctionnalité qu'ils modifient.

Les tutoriels de personnalisation de thème sont divisés par la version de l’architecture de thème qu’ils utilisent. Découvrez comment identifier la version de l’architecture de votre thème.

• Personnalisation d'un thème Online Store 2.0
• Personnalisation du thème vintage

Obtenir de l'assistance pour les personnalisations

Si vous avez besoin d'aide pour apporter des modifications à votre thème, vous pouvez contacter le développeur de votre thème pour obtenir de l'assistance.

Pour voir les autres ressources disponibles pour vous aider à personnaliser les thèmes, voir Ressources supplémentaires pour le support des thèmes.