Modification d'un thème

Vous pouvez modifier votre thème pour personnaliser le contenu, la présentation, la typographie et les couleurs de votre boutique en ligne. Chaque thème fournit des sections et des paramètres, qui vous permettent de modifier l’esthétique de votre thème sans modifier aucun code.

Avant de personnaliser votre thème

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

Éditeur de thème

L’éditeur de thème affiche l’arborescence de la totalité du contenu du modèle que vous consultez actuellement dans la barre latérale. Agrandissez un nœud de section à l’aide de l’icône d’agrandissement pour voir ses blocs, ou réduisez-le à l’aide de l’icône de réduction pour masquer les blocs. Vous pouvez cliquer sur la section ou le bloc de votre choix pour en afficher les paramètres.

Agrandir et réduire les sections pour afficher les blocs

Accéder à l’éditeur de thème

  1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

  2. Cliquez sur Personnaliser à côté du thème que vous souhaitez modifier.

  3. Cliquez sur Sections.

Preview Inspector

Preview Inspector est une nouvelle fonctionnalité de l’éditeur de thème. Elle vous permet de naviguer dans les sections et les blocs directement depuis la fenêtre d’aperçu et de trouver les paramètres correspondants plus rapidement et plus facilement. Grâce à cette fonction, vous pouvez recommander, masquer ou supprimer des sections et des blocs directement depuis votre fenêtre d’aperçu.

La fonction Preview Inspector est disponible pour tous les thèmes gratuits de Shopify et est activée par défaut. Vous pouvez activer ou désactiver la fonction Preview Inspector pendant votre session de modification.

Activer ou désactiver la fonction Preview Inspector dans la barre des menus de la page d’accueil

Lorsque la fonction Preview Inspector est activée, vous pouvez cliquer sur n’importe quel élément encadré pour ouvrir le paramètre correspondant. Sur un appareil mobile, lorsque la fonction Preview Inspector est activée, vous pouvez cliquer sur n’importe quel élément pour sélectionner le paramètre correspondant. Vous pouvez ouvrir la feuille du bas pour apporter des modifications par le biais de ce paramètre sélectionné.

La fonction Preview Inspector avec la section Image avec texte sélectionnée et les paramètres correspondants chargés dans la barre latérale

la fonction Preview Inspector sur un appareil mobile

La fonction Preview Inspector affiche deux bordures différentes autour des sections et des blocs activés dans la fenêtre d’aperçu :

  • Ligne bleue unie : la section active. Le paramètre correspondant de la barre latérale est grisé en surbrillance.
  • Ligne bleue pointillée : bloc associé à la section. En cliquant sur l’élément de la fenêtre d’aperçu, vous ouvrirez les paramètres du bloc ou de la section.

Lorsque vous cliquez sur n’importe quelle partie de votre site web dans la fenêtre d’aperçu, cela charge les paramètres correspondants dans votre barre latérale. Sur un appareil mobile, en appuyant deux fois, vous naviguerez sur le site comme le ferait un client.

Ajouter des sections et des blocs à la fonction Preview Inspector

Lorsque vous utilisez fonction Preview Inspector, vous pouvez ajouter des sections et des blocs à votre thème directement à partir de la fenêtre d’aperçu. Sur les appareils mobiles, vous pouvez ajouter, dupliquer, masquer, déplacer et supprimer des sections à l’aide du mode de modification dans la feuille inférieure.

Option Ajouter une section de la fonction Preview Inspector

Option Ajouter un bloc de la fonction Preview Inspector

Description des boutons Ajouter des sections et Ajouter des blocs dans l’inspecteur de prévisualisation.
OutilDescription
Ajouter une sectionLe bouton Ajouter une section s’affiche en haut et en bas de la section sélectionnée. Cliquez sur le bouton Ajouter une section pour insérer une nouvelle section au-dessus ou au-dessous de la section sélectionnée.
Ajouter un blocLe bouton Ajouter un bloc s’affiche lorsque vous survolez un bloc existant avec votre curseur. Pour ajouter un bloc, cliquez sur l’icône +. Un menu contextuel s’affiche avec les blocs de thème et d’application qui peuvent être ajoutés à la section sélectionnée. Cliquez sur le bloc que vous souhaitez ajouter. La fenêtre des paramètres du nouveau bloc se charge dans la barre latérale droite.

Outils de la fonction Preview Inspector

Avec la fonction Preview Inspector, vous pouvez déplacer, masquer, dupliquer ou supprimer des sections et des blocs depuis l’éditeur de thème.

Ensemble des outils de la fonction Preview Inspector

Liste des outils d’aperçu disponibles, y compris le déplacement, la duplication, le masquage et la suppression de sections ou de blocs.
OutilDescription
Passer à la position suivante/précédenteVous pouvez déplacer une section ou un bloc à la position suivante ou précédente au moyen des icônes fléchées de la fonction Preview Inspector. Si la section sélectionnée se trouve en haut de votre page, le bouton Positionner plus haut sera grisé. De même, si votre section se trouve au bas de votre page, vous ne pouvez pas utiliser le bouton Positionner plus bas.
Dupliquer une section ou un blocCliquez sur l’icône de copie pour dupliquer une section ou un bloc et son contenu.
Masquer une section ou un blocCliquez sur l’icône de l’œil pour masquer une section ou un bloc. Si une section ou un bloc est masqué, vous ne pourrez pas l’afficher depuis Preview Inspector. Vous pouvez soit cliquer sur le bouton Annuler de la barre de menus de votre page d’accueil, soit fermer le panneau des paramètres pour revenir à la page d’accueil de l’éditeur de thème, où vous verrez tous les blocs ou sections masqués répertoriés sur votre barre latérale avec l’icône de l’œil barré. Cliquez sur cette icône pour afficher la section ou le bloc.
Supprimer une section ou un blocCliquez sur l’icône de la corbeille pour supprimer la section ou le bloc sélectionnés dans la fonction Preview Inspector.

Modes de la barre latérale

L’éditeur de thème propose deux modes pour utiliser tout l’espace sur votre écran.

Le mode double barre latérale est destiné aux fenêtres de navigateur plus larges et aux écrans de plus grande taille ; le mode barre latérale simple est affecté aux fenêtres de navigateur plus étroites et aux écrans de plus petit format. Le mode de la barre latérale détermine l’endroit où le panneau des paramètres s’affiche dans l’éditeur.

Mode double barre latérale

Si vous avez un écran dont la largeur dépasse 1 600 pixels et que la fenêtre de votre navigateur est agrandie au maximum, ou si elle est agrandie sur une largeur d'au moins 1 600 pixels, vous verrez deux barres latérales. Celle de gauche contient le panneau de navigation, et celle de droite contient le panneau de configuration.

Le panneau des paramètres s’affiche à droite sur l’écran, en mode double barre latérale

Mode barre latérale simple

Pour conserver l’espace de l’aperçu du thème, les navigateurs plus étroits ne présentent qu’une seule barre latérale. Lorsque vous cliquez sur une section ou un bloc pour le modifier, le panneau de configuration s’ouvre au-dessus de votre panneau de navigation dans la barre latérale.

Le panneau des paramètres s’affiche sous forme de superposition du panneau de navigation en mode barre latérale simple

Groupes de sections

Les sections sont regroupées dans les zones suivantes de chaque modèle de page :

  • En-tête : cette zone comprend votre en-tête, votre barre d’annonces ainsi que la totalité des applications ou du code Liquid personnalisé.
  • Modèle : cette zone comprend les sections qui constituent le corps principal de votre page. Par exemple, les sections de modèle peuvent inclure des articles de blog, des collages, des listes de collections ou du code Liquid personnalisé.
  • Pied de page : cette zone comprend votre pied de page, votre inscription à la liste de diffusion ainsi que la totalité des applications ou du code Liquid personnalisé.

Votre en-tête et votre pied de page figurent sur toutes les pages de votre boutique en ligne. Par exemple, si vous ajoutez un bloc de code Liquid personnalisé à l’en-tête, ce code Liquid personnalisé s’affiche sur toutes vos pages de produit, sur votre page d’accueil et sur toutes les autres pages. Vous pouvez réorganiser les sections autant que nécessaire.

Sections et blocs

Dans la liste des sections et des blocs, tous les blocs des sections d’une page sont affichés par défaut.

Les sections qui constituent l’en-tête ou le pied de page sont réduites par défaut, mais vous pouvez les afficher en cliquant sur l’icône d’agrandissement à côté du nom de la section.

Déplacer des sections et des blocs

Vous pouvez déplacer une section ou un bloc d’une zone de la page à une autre en utilisant l’icône ⋮⋮. Cliquez sur la section ou le bloc, faites-les glisser puis déposez-les à un autre endroit disponible.

Si vous essayez de déplacer une section ou un bloc là où ce n’est pas permis, la section et le bloc reviennent à leur emplacement d’origine.

Suppression de sections

Si vous souhaitez supprimer une section ou un bloc dans un modèle, vous pouvez le faire depuis l’écran des paramètres de chaque élément. Le bouton Retirer la section s’affiche au bas des paramètres de la section.

Supprimer une section avec le bouton « Supprimer la section »

Étapes :

  1. Dans la barre latérale de l’éditeur de thème, cliquez sur la section ou le bloc que vous souhaitez supprimer.
  2. Cliquez sur Retirer la section ou Retirer le bloc.
  3. Cliquez sur Save (Enregistrer). Si vous modifiez un thème publié, cliquez sur Publish (Publier) pour enregistrer vos modifications et les rendre actives dans votre boutique.

Masquer des blocs

Vous pouvez masquer la section ou le bloc de votre choix à l’aide de l’icône de l’œil.

Supprimer une section avec le bouton « Supprimer la section »

Modèles

Vous pouvez accéder à tous les modèles de votre thème à partir du sélecteur de page dans la barre supérieure de l’éditeur de thème.

Si vous utilisez un thème Online Store 2.0, vous pouvez également créer un modèle directement à partir du sélecteur de page en cliquant sur l'option Nouveau modèle.

Aperçu des modèles avec des ressources spécifiques

Lorsque vous affichez un modèle, vous pouvez obtenir un aperçu de l'aspect qu'il aura dans votre boutique avec n’importe quelle ressource compatible. Par exemple, si vous affichez un modèle de produit, vous pouvez le tester avec n’importe quel produit de votre boutique.

Étapes :

  1. Dans le sélecteur de page de l’éditeur de thème, sélectionnez le modèle dont vous souhaitez obtenir un aperçu.
  2. Dans le panneau de navigation, dans la section Aperçu, cliquez sur Changer.
  3. Dans le menu Sélectionner, sélectionnez la ressource dont vous souhaitez obtenir un aperçu.

Annuler et rétablir des actions

Les boutons Annuler et Rétablir se trouvent en haut à droite de l’éditeur de thème.

Les boutons Annuler et rétablir dans la barre du haut de l’éditeur de thème.

Modification en ligne des données personnalisées

Lorsque vous travaillez avec des données personnalisées pour créer des pages de métaobjet, vous pouvez modifier vos champs méta et vos métaobjets directement en ligne sans devoir accéder à l’interface administrateur pour apporter des modifications. Ceci fonctionne pour les champs méta d’image, de vidéo, de couleur, de produit, de page, de collection et de texte.

Étapes :

  1. Sélectionnez un paramètre compatible dans votre thème faisant référence à votre métaobjet.
  2. Sélectionnez et modifiez la valeur du champ méta dans votre entrée de métaobjet depuis le panneau des paramètres.
  3. Enregistrez votre travail et votre page de destination s’actualisera automatiquement avec les informations mises à jour.

Consultation de la documentation, obtention d’assistance et vérification de la version de votre thème

Les liens vers la documentation de votre thème et les informations relatives à l’assistance se trouvent dans le menu Plus de la barre de menu. Dans ce menu, vous pouvez également consulter la version du thème et les informations sur son/sa créateur(-trice).

Utilisez le bouton « Plus » pour accéder aux informations du 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.

Dans cette section

Vous ne trouvez pas les réponses que vous recherchez ? Nous sommes là pour vous aider.