Réussi
Barre d’annonce
Ajoutez une barre supérieure flexible pour les promotions, les liens utilitaires et le contenu rapide de l’en-tête.
- documentation Shopify sur les sections et les blocs
- documentation Company XYZ sur le bloc Button
- documentation Company XYZ sur le bloc Icon with text
- documentation Company XYZ sur le bloc Localization selectors
- documentation Company XYZ sur le bloc Main menu
- documentation Company XYZ sur le bloc Social media icons
- documentation Company XYZ sur les paramètres d’arrière-plan de section
- documentation Company XYZ sur les paramètres d’espacement de section
- documentation Company XYZ sur les paramètres de séparateur
- documentation Company XYZ sur les paramètres de visibilité
- documentation Company XYZ sur les paramètres de largeur de mise en page
Utilisez la barre d’annonce pour placer une zone de message compact et de navigation utilitaire au-dessus de l’en-tête principal. Elle peut afficher une simple annonce avec un lien et un menu, ou un ensemble plus flexible de blocs comme des boutons, des menus, des sélecteurs de localisation, du texte enrichi et des icônes de réseaux sociaux. Pour un aperçu plus large des mises en page de thème, consultez documentation Shopify sur les sections et les blocs
Par défaut, la section utilise le texte d’annonce, le lien et le menu dans les paramètres principaux de la section. Si vous ajoutez des blocs, la mise en page des blocs prend le dessus afin que vous puissiez organiser la barre plus précisément.
L’ajout de blocs remplace le texte d’annonce par défaut et la sortie du menu des paramètres de la section. Utilisez l’une ou l’autre approche pour éviter toute confusion lors de la configuration de la barre.
Paramètres essentiels
Section intitulée « Paramètres essentiels »Utilisez les paramètres essentiels pour une barre supérieure simple sans créer de mise en page personnalisée. C’est l’option la plus rapide lorsque vous avez seulement besoin d’un court message promotionnel, d’un lien facultatif et d’un menu utilitaire simple.
Gardez le texte d’annonce bref afin qu’il reste lisible sur tous les appareils. Si vous avez besoin de plusieurs types de contenu, de zones d’alignement différentes ou de mises en page spécifiques à un appareil, passez aux blocs plutôt que d’essayer de tout faire tenir dans la configuration par défaut.
Paramètres de couleur
Section intitulée « Paramètres de couleur »Utilisez ces contrôles de couleur de section pour remplacer les couleurs plus larges du thème pour le texte et les icônes de la barre d’annonce. C’est utile lorsque la barre doit se démarquer pour une promotion, une alerte ou une campagne saisonnière.
Si vous utilisez également un arrière-plan personnalisé, vérifiez soigneusement le contraste. Une bonne lisibilité est ici plus importante qu’un style décoratif, car cette barre est conçue pour être parcourue rapidement.
Types de blocs pris en charge
Section intitulée « Types de blocs pris en charge »- Bouton
- Icône avec texte
- Sélecteurs de localisation
- Menu principal
- Texte enrichi
- Icônes des réseaux sociaux
La plupart des blocs de cette section incluent également leurs propres contrôles de disposition, d’alignement et de visibilité. Utilisez ces paramètres pour placer les éléments à gauche, au centre, à droite ou sur leur propre ligne, et pour simplifier la barre sur les écrans plus petits.
Utilisez le bloc Bouton pour une action claire comme une page de soldes, un lien d’inscription ou une page d’assistance. Voir bloc Bouton.
Les styles de bouton plus petits conviennent généralement le mieux à cette section. Si la barre contient déjà plusieurs éléments, évitez les styles de bouton trop grands qui peuvent donner une impression d’encombrement dans la zone d’en-tête.
Icône avec texte
Section intitulée « Icône avec texte »Utilisez ce bloc pour de courts messages comme la livraison gratuite, les retours faciles ou les offres à durée limitée. Voir bloc Icône avec texte.
Gardez le message court et direct. Ce bloc est le plus efficace lorsqu’il met en avant un avantage clé en un coup d’œil.
Sélecteurs de localisation
Section intitulée « Sélecteurs de localisation »Utilisez ce bloc pour afficher les sélecteurs de pays, de devise et de langue dans la barre supérieure. Voir bloc Sélecteurs de localisation.
Ce bloc nécessite une configuration de localisation complémentaire avant d’être utile. Sur mobile, le style de champ réduit peut forcer les sélecteurs à passer sur une nouvelle ligne ; prévisualisez donc toujours la barre sur des écrans plus petits après avoir modifié les styles des sélecteurs.
Menu principal
Section intitulée « Menu principal »Utilisez le bloc Menu principal pour ajouter une navigation secondaire comme Contact, FAQ, Suivi de commande ou des liens vers les politiques. Voir bloc Menu principal.
Vous pouvez ajouter jusqu’à deux blocs de menu si vous souhaitez des groupes de liens séparés. Cela fonctionne bien lorsque vous avez besoin d’une navigation utilitaire d’un côté et de liens promotionnels ou liés au compte de l’autre.
Texte enrichi
Section intitulée « Texte enrichi »Utilisez le bloc Texte enrichi lorsque vous avez besoin de plus de mise en forme que ne le permet le texte d’annonce par défaut. Il prend en charge le texte stylé et les liens intégrés pour des messages plus expressifs.
Utilisez-le avec parcimonie dans cette section. Un texte volumineux ou un contenu fortement stylé peut rendre la barre encombrée très rapidement.
Icônes des réseaux sociaux
Section intitulée « Icônes des réseaux sociaux »Utilisez ce bloc pour afficher les comptes sociaux déjà configurés dans les paramètres de votre thème. Voir bloc Icônes des réseaux sociaux.
Vous pouvez afficher tous les réseaux configurés ou en choisir un ensemble plus restreint. Les icônes pleines sont généralement les plus faciles à parcourir dans une barre supérieure compacte, tandis que le style sans texte convient mieux aux mises en page plus minimalistes.
Paramètres standard de section
Section intitulée « Paramètres standard de section »Paramètres d’arrière-plan de section
Section intitulée « Paramètres d’arrière-plan de section »Paramètres d’arrière-plan de section contrôlent l’arrière-plan de la barre, y compris les options de couleur, de dégradé, d’image, de vidéo et de superposition. Utilisez-les pour distinguer visuellement la barre de l’en-tête ou pour prendre en charge un style spécifique à une campagne.
Comme cette section est peu haute, les arrière-plans subtils fonctionnent généralement mieux que les médias détaillés. Si vous utilisez une image ou une vidéo, les superpositions peuvent aider à préserver la lisibilité du texte.
Paramètres d’espacement
Section intitulée « Paramètres d’espacement »Paramètres d’espacement contrôlent l’espace vertical au-dessus et en dessous du contenu de la barre. De petits changements ici peuvent avoir un effet notable sur l’importance visuelle de la barre.
Utilisez un espacement plus serré pour les mises en page axées sur l’utilitaire et un peu plus d’espacement lorsque la barre comprend des boutons ou plusieurs lignes. Vérifiez sur ordinateur et sur mobile afin que la barre ne devienne pas plus haute que prévu.
Paramètres de séparateur
Section intitulée « Paramètres de séparateur »Paramètres de séparateur vous permettent d’ajouter une ligne au-dessus ou en dessous de la barre. C’est utile lorsque la barre est proche de l’en-tête et a besoin d’une limite visuelle plus nette.
Si votre barre et votre en-tête utilisent des couleurs similaires, un séparateur peut rendre la mise en page plus facile à parcourir. La couleur de séparateur transparente revient au paramètre de couleur de bordure plus large.
Paramètres de visibilité
Section intitulée « Paramètres de visibilité »Paramètres de visibilité contrôlent si la barre entière s’affiche sur ordinateur, sur mobile ou sur les deux. C’est utile lorsque vous souhaitez une barre utilitaire plus complète sur les grands écrans mais une zone d’en-tête plus simple sur les téléphones.
Vous pouvez combiner la visibilité de section avec la visibilité au niveau du bloc pour créer des combinaisons de contenu spécifiques à un appareil sans dupliquer toute la configuration.
Paramètres de largeur
Section intitulée « Paramètres de largeur »Paramètres de largeur contrôlent la largeur maximale du contenu et la largeur globale de la section. Dans cette section, la largeur du contenu influence la proximité des éléments entre eux, tandis que la largeur de section est surtout importante lorsque vous utilisez un style d’arrière-plan.
L’éditeur n’affiche pas toujours les changements de largeur avec précision ; prévisualisez donc sur la boutique en ligne en direct lorsque vous affinez la mise en page. Une largeur de contenu plus étroite peut rendre le contenu utilitaire plus facile à parcourir, tandis qu’une section plus large ou en full-bleed fonctionne bien pour des traitements d’arrière-plan plus marqués.
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Choisissez une seule méthode de contenu. Utilisez le texte et le menu par défaut pour une barre simple, ou ajoutez des blocs pour une mise en page personnalisée, car les blocs remplacent le contenu par défaut.
- Vérifiez les deux fenêtres d’affichage. Les contrôles pour ordinateur et mobile peuvent modifier l’alignement, l’espacement, la visibilité et le retour à la ligne ; vérifiez donc les deux tailles après avoir ajusté la barre.
- Surveillez les remplacements d’arrière-plan. Les valeurs vides ou de style par défaut conservent généralement le style de secours, tandis que des couleurs, dégradés ou médias explicites rendent la barre plus indépendante du reste de l’en-tête.
- Traitez les médias avec précaution. Si vous utilisez des médias différents pour ordinateur et mobile, vérifiez le recadrage, le chargement et la lisibilité afin que la barre reste claire sur les deux appareils.
- Gardez une navigation intentionnelle. Les blocs de menu peuvent orienter le parcours client ; les liens masqués, réorganisés ou réservés au mobile doivent donc être examinés pour leur accessibilité et leur clarté.
- Utilisez la barre pour du contenu utilitaire. Réservez cet espace aux notices prioritaires, aux liens rapides et à la navigation légère plutôt que de répéter le contenu principal de l’en-tête.