Modification du code 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.
Sur cette page
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
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Cliquez sur ... > Modifier le code.
iPhone
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Cliquez sur ... > Modifier le code.
Android
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- 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.
Étapes
Bureau
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Sous l’en-tête Modèles, cliquez sur l’un des fichiers .liquid que vous avez récemment modifiés.
- Cliquez sur Version actuelle sous le nom de fichier
.liquid
. - 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.
- Facultatif : cliquez sur Aperçu de la boutique pour vérifier que l’erreur a été corrigée.
iPhone
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Sous l’en-tête Modèles, cliquez sur l’un des fichiers .liquid que vous avez récemment modifiés.
- Cliquez sur Version actuelle sous le nom de fichier
.liquid
. - 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.
- Facultatif : cliquez sur Aperçu de la boutique pour vérifier que l’erreur a été corrigée.
Android
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Sous l’en-tête Modèles, cliquez sur l’un des fichiers .liquid que vous avez récemment modifiés.
- Cliquez sur Version actuelle sous le nom de fichier
.liquid
. - 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.
- 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.
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.