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 le design de votre thème sans modifier aucun code.
Sur cette page
- Avant de personnaliser votre thème
- Éditeur de thème
- Accéder à l’éditeur de thème
- Preview Inspector
- Modes de la barre latérale
- Groupes de sections
- Sections et blocs
- Modèles
- Modification en ligne des données personnalisées
- Consultation de la documentation, obtention d’assistance et vérification de la version de votre thème
- Obtenir de l'assistance pour les personnalisations
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.
É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.
Accéder à l’éditeur de thème
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Cliquez sur Personnaliser à côté du thème que vous souhaitez modifier.
- 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.
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 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.
| 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 au-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, 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.
| Outil | Description |
|---|---|
| Passer à la position suivante/précédente | Vous 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 bloc | Cliquez sur l’icône de copie pour dupliquer une section ou un bloc et son contenu. |
| Masquer une section ou un bloc | Cliquez 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 bloc | Cliquez 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.
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.
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.
Étapes :
- 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 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.
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 :
- Dans le sélecteur de page de l’éditeur de thème, sélectionnez le modèle dont vous souhaitez obtenir un aperçu.
- Dans le panneau de navigation, dans la section Aperçu, cliquez sur Changer.
- 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.
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 :
- Sélectionnez un paramètre compatible dans votre thème faisant référence à votre métaobjet.
- Sélectionnez et modifiez la valeur du champ méta dans votre entrée de métaobjet depuis le panneau des paramètres.
- 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).
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.