Modification du code de thème

Cette page a été imprimée le Jun 26, 2022. Pour la dernière version, allez à https://help.shopify.com/fr/manual/online-store/themes/theme-structure/extend/edit-theme-code.

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.

Si vous modifiez le code de votre thème, vous pourriez le rendre inéligible pour les mises à jour automatiques. Ne modifiez le code de votre thème que si vous ne pouvez pas apporter les modifications dont vous avez besoin à l'aide d'un paramètre HTML ou Liquid ou d'une application Shopify.

Avant de personnaliser votre thème

Avant de personnaliser votre thème, il est conseillé d'effectuer les tâches suivantes :

Modifier le code de votre thème

Vous pouvez modifier le code de votre thème.

Étapes

  1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
  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. 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 Actions > 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.

Vous pouvez agrandir l'éditeur de code pour remplir l'écran en cliquant sur l'icône de développement :

L'icône de développement

Vous pouvez retourner la page à la normale en cliquant sur l'icône de réduction :

L'icône de réduction

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 :

Le répertoire des fichiers de thème montrant un point violet à côté des fichiers qui ont été modifiés

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.

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

  2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.

  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, puis cliquez sur Actions > Modifier le code.

  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, puis cliquez sur Actions > 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 Versions plus anciennes à côté du 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 et voyez si l’erreur a été corrigée.

Mode sombre

Lorsque l'éditeur de code est en mode plein écran, vous pouvez faire passer le modèle de couleur de l'éditeur de clair à sombre en cliquant sur les boutons en bas de la page.

Pour en savoir plus sur les avantages de l'utilisation de l'éditeur de couleurs sombres, consultez The Power of the Dark Side: Dark User Interfaces (La puissance du côté obscur : les interfaces utilisateurs sombres) sur le blog de Shopify Partners.

Tutoriels de personnalisation de code de thème

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.

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement