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.

Avant de personnaliser votre thème

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

Éditeur de thème

L’éditeur de thème affiche l'arborescence de tout le 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 de développement pour afficher ses blocs, ou réduisez-le à l’aide de l’icône de réduction pour masquer les blocs. Vous pouvez cliquer sur n’importe quelle section ou bloc pour en afficher les paramètres.

Agrandir et réduire les sections pour afficher les blocs

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éactiver 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 fondamental pour ouvrir le paramètre correspondant.

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 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 : un 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.

Cliquez sur n’importe quelle partie de votre site web dans la fenêtre d’aperçu pour charger les paramètres correspondants dans votre barre latérale.

Ajouter des sections et des blocs à la fonction Preview Inspector

Lorsque vous utilisez la fonction Preview Inspector, vous pouvez ajouter des sections et des blocs à votre thème directement à partir de la fenêtre d’aperçu.

Option Ajouter une section de la fonction Preview Inspector

Option Ajouter un bloc de la fonction Preview Inspector

Ajouter des sections ou des blocs
Outil Description
Ajouter une section Le bouton Ajouter une section apparaît en haut et en bas de la section sélectionnée. Cliquez sur 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 apparaît lorsque vous passez sur un bloc existant. Pour ajouter un bloc, cliquez sur l'icône +. Un menu contextuel s’affiche avec le thème et les blocs 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 ou supprimer des sections et des blocs depuis l’éditeur de thème.

Ensemble des outils de la fonction Preview Inspector

Outils de la fonction Preview Inspector
Outil Description
Passer à la position suivante/précédente Vous pouvez déplacer une section ou un bloc vers la position suivante ou précédente à l’aide 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 retour à l'emplacement précédent sera grisé. De même, si votre section se trouve en bas de votre page, vous ne pouvez pas utiliser le bouton passer à la position suivante.
Masquer une section ou un bloc Cliquez sur l’icône représentant un œil pour masquer une section ou un bloc. Lorsqu’une section ou un bloc est masqué(e), vous ne pourrez pas l'afficher pour la fonction Preview Inspector. Vous pouvez soit cliquer sur le bouton Annuler de la barre des 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 les sections ou les blocs masqués répertoriés sur votre barre latérale avec l’icône représentant un œil barrée. 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 de barre latérale double est pour les fenêtres du navigateur plus larges et les écrans plus grands, et le mode de barre latérale unique est pour les fenêtres plus étroite et les écrans plus petits. Le mode de la barre latérale détermine l’endroit où le panneau de paramètre apparaît 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 de configuration apparaît sur le côté droit de 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 possèdent 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 de configuration apparaît comme une superposition du panneau de navigation en mode barre latérale simple

Sections et blocs

Dans la liste des sections et des blocs, tous les blocs des sections d’une page s’affichent 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.

Suppression de sections

Vous pouvez supprimer une section ou un bloc d'un modèle depuis l’écran de configuration de chaque article. Le bouton Retirer la section apparaît 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.

Déseffectuer et réeffectuer les 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.

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.

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

Essayez gratuitement