Personnaliser votre boutique en ligne avec l’éditeur de thème
Vous pouvez utiliser l’éditeur de thème pour personnaliser les zones de votre thème, comme les couleurs, et gérer le contenu de votre thème avec des sections et des blocs. L’éditeur de thème comporte les sections suivantes :
- La barre de menus affiche des outils qui vous permettent d’en savoir plus sur votre thème, d’accéder aux différents modèles de votre thème (comme les pages de produit), d’ajuster l’affichage selon la taille de l’écran et de gérer vos actions de personnalisation.
- Le menu de la barre latérale affiche une vue en arborescence de l’intégralité du contenu du modèle que vous êtes en train de consulter. Vous pouvez gérer les sections, les blocs et les paramètres à partir de ce dernier.
- La fenêtre d’aperçu affiche votre thème, et se met à jour automatiquement lorsque vous effectuez des modifications. Vous pouvez sélectionner différentes options d’affichage dans la barre de menus pour prévisualiser votre thème sur une mise en page bureau ou mobile. Vous pouvez également activer Preview Inspector pour gérer le contenu d’un modèle de thème dans la fenêtre d’aperçu.
Sur cette page
- Accéder à l’éditeur de thème
- Barre de menus
- Consulter la documentation, obtenir une assistance et vérifier la version de votre thème
- Obtenir de l'assistance pour les personnalisations
- Utiliser des raccourcis clavier dans l’éditeur de thème
- Modèles
- Aperçu des modèles avec des ressources spécifiques
- Preview Inspector
- Afficher des tailles d’écran différentes dans l’éditeur de thème
- Menu de la barre latérale
- Sections et blocs
Accéder à l’éditeur de thème
Vous pouvez accéder à l’éditeur de thème depuis votre interface administrateur Shopify.
Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Cliquez sur Personnaliser à côté du thème que vous souhaitez modifier.
Barre de menus
La barre de menus contient des informations sur votre thème, des menus pour accéder à plus d’informations et à différentes zones de votre thème, ainsi que des commandes pour personnaliser votre thème.
La barre de menus affiche les informations supplémentaires et les options de navigation suivantes :
- Utilisez le bouton
pour retourner à votre interface administrateur Shopify. - Consultez le nom de votre thème.
- Consultez le statut de votre thème. Votre thème publié affiche l’étiquette de statut Utilisé. Les thèmes non publiés affichent l’étiquette de statut Brouillon.
- Utilisez le menu
pour accéder aux options supplémentaires suivantes :
- Utilisez 
Modifier le code pour ouvrir l’éditeur de code.
- Utilisez 
Modifier le contenu du thème par défaut pour modifier le libellé par défaut de votre thème.
- Utilisez 
pour ouvrir un aperçu de votre thème.
- Utilisez 
Afficher la documentation pour ouvrir la documentation de votre thème.
- Utilisez 
pour consulter tous les raccourcis clavier disponibles pour l’éditeur de thème.
- Utilisez 
Obtenir de l’aide pour obtenir de l’aide.
Vous pouvez accéder à différents modèles et différentes mises en page de marché via les menus suivants :
Vous pouvez utiliser les commandes suivantes dans la barre de menus pour personnaliser votre thème :
- Activez ou désactivez Sidekick.
- Activez ou désactivez Preview Inspector.
- Modifiez la taille de l’écran à l’aide des commandes de taille de l’écran.
- Gérez votre session de personnalisation actuelle à l’aide des commandes annuler et rétablir.
- Utilisez le bouton Enregistrer pour enregistrer vos modifications.
Consulter la documentation, obtenir une assistance et vérifier la version de votre thème
Vous pouvez afficher les informations disponibles sur votre thème, telles que la version du thème et les informations sur le développeur, ainsi que les liens vers la documentation et les informations d’assistance de votre thème dans le menu de la barre de menus.
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.
Utiliser des raccourcis clavier dans l’éditeur de thème
Vous pouvez utiliser des raccourcis clavier pour accéder à l’éditeur de thème et y effectuer des actions.
| Catégorie | Action | Raccourci sur Windows | Raccourci sur macOS |
|---|---|---|---|
| Menu général | Annuler |
CTRL + Z
|
⌘ + Z
|
| Rétablir |
CTRL + Y
|
⌘ + Y
| |
| Enregistrer |
CTRL + S
|
⌘ + ⇧ + S
| |
| Voir tous les raccourcis |
CTRL + /
|
⌘ + /
| |
| Outils | Preview Inspector |
CTRL + SHIFT + |
|
⌘ + ⇧ + |
|
| Mode Aperçu |
⊞ + CTRL + |
|
⌘ + ⌃ + |
| |
| Sidekick |
CTRL + .
|
⌘ + .
| |
| Navigation | Sections |
⊞ + CTRL + Z
|
⌘ + ⌃ + 1
|
| Paramètres de thème |
⊞ + CTRL + Z
|
⌘ + ⌃ + 2
| |
| Applications intégrées |
⊞ + CTRL + Z
|
⌘ + ⌃ + 3
| |
| Sections et blocs | Masquer et afficher |
CTRL + SHIFT + H
|
⌘ + ⇧ + H
|
| Supprimer |
SHIFT + ⭠
|
⇧ + ⌫
| |
| Sélectionner précédent |
SHIFT + ←
|
⇧ + ▲
| |
| Sélectionner suivant |
SHIFT + →
|
⇧ + ▼
| |
| Ouvrir l’élément sélectionné |
SHIFT + ENTER
|
⇧ + ▼
| |
| Développer toutes les sections |
CTRL + SHIFT + O
|
⌘ + ⇧ + O
| |
| Réduire toutes les sections |
CTRL + SHIFT + P
|
⌘ + ⇧ + P
|
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
Vous pouvez afficher un aperçu de votre modèle avec n’importe quelle ressource compatible de votre boutique. Par exemple, si vous affichez un modèle de produit, vous pouvez le tester avec n’importe quel produit de votre boutique.
Vous devez quand même attribuer le modèle à la ressource dans l’interface administrateur Shopify.
Vous pouvez également rechercher des modèles et des ressources en utilisant la barre de recherche du sélecteur de page, dans l’outil Ajouter une section ou Ajouter un bloc, ou encore dans les intégrations d’applications.
Étapes :
Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Cliquez sur Personnaliser à côté du thème que vous souhaitez modifier.
Dans le menu des modèles, sélectionnez le modèle que vous souhaitez prévisualiser.
Dans le menu de la barre latérale, dans la section Aperçu , cliquez sur Modifier.
Dans le menu Sélectionner, sélectionnez la ressource dont vous souhaitez obtenir un aperçu.
Preview Inspector
La fonction Preview Inspector 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 réorganiser, masquer ou dupliquer 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 cliquer sur le bouton 
pour activer ou désactiver la fonction pendant votre session de modification.
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é.
Preview Inspector affiche l’une des deux bordures suivantes autour des sections et des blocs activés dans la fenêtre d’aperçu :
- La ligne bleue pleine indique la section active. Le paramètre correspondant dans le menu de la barre latérale est surligné en gris.
- La ligne bleue pointillée indique le bloc associé à la section. Vous pouvez cliquer sur l’élément de la fenêtre d’aperçu pour ouvrir 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 l’inspecteur d’aperçu, vous pouvez ajouter des sections et des blocs à votre thème directement depuis la fenêtre d’aperçu. Pour utiliser l’inspecteur d’aperçu dans l’application Shopify, restez appuyé sur une section pour pouvoir la gérer.
| Outil | Description |
|---|---|
| Ajouter une section | Le 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 en dessous de la section sélectionnée. |
| Ajouter un bloc | Le bouton Ajouter un bloc s’affiche lorsque vous survolez un bloc existant avec votre curseur. Pour ajouter un bloc, placez votre curseur sur le bouton  . 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
Grâce à la fonction Preview Inspector, vous pouvez déplacer, masquer, dupliquer ou supprimer des sections ou des blocs dans l’éditeur de thème.
| Outil | Action | Description |
|---|---|---|
 | Positionner plus haut | Cliquez sur ce bouton pour déplacer une section ou un bloc vers la position suivante ou la position précédente à l’aide des icônes de flèche dans Preview Inspector. Si la section sélectionnée se trouve en haut de votre page, le bouton sera grisé. De même, si votre section se trouve en bas de votre page, vous ne pouvez pas utiliser le bouton  . |
| Bouton | Positionner plus bas | |
Bouton  | Dupliquer une section ou un bloc | Cliquez sur ce bouton pour dupliquer une section ou un bloc et son contenu. |
 | Masquer une section ou un bloc | Cliquez sur ce bouton pour masquer une section ou un bloc. Lorsqu’une section ou un bloc est masqué, vous ne pouvez pas l’afficher dans Preview Inspector. Pour afficher une section ou un bloc masqué, vous pouvez cliquer sur le bouton  dans la barre de menus, ou sur le bouton dans le menu de la barre latérale à côté de la section ou du bloc en question. |
Bouton  | Supprimer une section ou un bloc | Ce bouton supprime la section ou le bloc sélectionné dans Preview Inspector. |
Afficher des tailles d’écran différentes dans l’éditeur de thème
Vous pouvez afficher différentes tailles d’écran dans votre éditeur de thème. Vous pouvez modifier l’éditeur de thème pour afficher les versions bureau, mobile ou plein écran afin d’optimiser vos modifications pour différentes tailles d’écran et de vérifier les mises en page alternatives pour bureau et mobile. Cliquez sur les boutons suivants dans la barre de menus pour modifier la taille de l’écran :
- Cliquez sur le bouton
pour la version bureau. - Cliquez sur le bouton
pour version mobile. - Cliquez sur le bouton
pour la version plein écran.
Annuler et rétablir des actions
Vous pouvez utiliser les boutons et 
pour annuler ou rétablir une personnalisation non enregistrée. Une fois vos modifications enregistrées, il ne sera plus possible de les annuler ou de les rétablir.
Si aucune personnalisation non enregistrée ne peut être rétablie, annulée ou les deux, le bouton correspondant est grisé.
Menu de la barre latérale
Le menu de la barre latérale affiche une vue en arborescence de l’intégralité du contenu du modèle que vous êtes en train de consulter. Vous pouvez gérer les sections, les blocs et les paramètres à partir du menu de la barre latérale.
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.
Pour afficher l’éditeur de thème en mode barre latérale unique sur un grand écran, réduisez la largeur de la fenêtre de votre navigateur jusqu’à ce que le panneau de configuration disparaisse ou se place au-dessus de la barre latérale de navigation.
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.
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 composant l’en-tête ou le pied de page sont réduites par défaut. Vous pouvez cliquer sur le bouton 
à côté du nom d’une section pour en afficher le contenu.
Groupes de sections
Les sections sont regroupées dans les zones suivantes de chaque modèle de page dans votre thème :
- La zone En-tête comprend votre en-tête, votre barre d’annonces ainsi que toutes les applications et le code Liquid personnalisé.
- La zone Modèle 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é.
- La zone Pied de page comprend votre pied de page, votre inscription à la liste de diffusion et toutes les applications et le code Liquid personnalisé.
Votre en-tête et votre pied de page apparaissent sur toutes les pages de votre boutique en ligne. Par exemple, si vous ajoutez un bloc de code Liquid personnalisé dans 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.
Développer et réduire les sections et les blocs
Développez un nœud de section à l’aide du bouton pour afficher ses blocs, ou réduisez-le à l’aide du bouton 
pour masquer les blocs. Vous pouvez cliquer sur la section ou le bloc de votre choix pour en afficher les paramètres.
Déplacer des sections et des blocs
Vous pouvez déplacer une section ou un bloc d’une zone de la page à une autre à l’aide du bouton
pour sélectionner et faire glisser la section ou le bloc, puis les déposer à un autre endroit disponible.
Si vous essayez de déplacer une section ou un bloc vers un emplacement non autorisé, la section ou le bloc reviennent à leur emplacement d’origine.
Retirer des sections et des blocs
Vous pouvez retirer une section ou un bloc d’un modèle de l’une des deux manières suivantes :
Déplacez votre curseur à côté du nom de la section, puis cliquez sur le bouton
: 
Cliquez sur le nom de la section, puis sur Retirer la section dans les détails des paramètres de la section :
Étapes :
Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Cliquez sur Personnaliser à côté du thème que vous souhaitez modifier.
Dans la barre latérale de l’éditeur de thème, cliquez sur la section ou le bloc que vous souhaitez supprimer.
Cliquez sur Retirer la section ou Retirer le bloc.
Cliquez sur Enregistrer. Si vous modifiez un thème publié, cliquez sur Publish (Publier) pour enregistrer vos modifications et les appliquer dans votre boutique.
Masquer les sections et les blocs
Vous pouvez masquer la section ou le bloc de votre choix à l’aide du bouton :
