Réussi
Navigation principale
Personnalisez votre navigation principale avec des menus flexibles, la recherche, l’image de marque et un contrôle de la disposition adapté au mobile.
- Documentation Company XYZ sur le bloc de menu hamburger
- Documentation Company XYZ sur le bloc de logo
- Documentation Company XYZ sur le bloc de menu principal
- Documentation Company XYZ sur le bloc de méga-menu
- Documentation Company XYZ sur le bloc de recherche
- Documentation Company XYZ sur le bloc d’icône de compte
- Documentation Company XYZ sur le bloc de panier
- Documentation Company XYZ sur le bloc de bouton
- Documentation Company XYZ sur le bloc de sélecteurs de localisation
- Documentation Company XYZ sur le bloc d’icône avec texte
- Documentation Company XYZ sur le bloc de texte enrichi
- Documentation Company XYZ sur le bloc d’icônes de réseaux sociaux
- 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éparateurs
- Documentation Company XYZ sur les paramètres de visibilité
- Documentation Company XYZ sur les paramètres de largeurs de mise en page
- Documentation Shopify sur les sections et les blocs
- Documentation Shopify sur la personnalisation des sections
- Documentation Shopify sur l’éditeur de thème
Construisez votre navigation principale en combinant des blocs de menu, de branding, de recherche et utilitaires dans l’ordre dans lequel vous souhaitez les voir apparaître. L’ordre des blocs façonne la disposition globale, tandis que les blocs individuels peuvent toujours être positionnés différemment sur ordinateur et sur mobile pour un contrôle plus précis. Pour un aperçu plus large du fonctionnement des sections et des blocs de thème, consultez la documentation Shopify sur les sections et les blocs
Paramètres de base
Section intitulée « Paramètres de base »Ces paramètres influencent la façon dont les visiteurs interagissent avec la navigation dans l’ensemble de la section.
Interaction du menu
Section intitulée « Interaction du menu »Choisissez si les sous-menus s’ouvrent au clic ou au survol. Le clic est généralement l’option la plus sûre lorsque vous souhaitez une interaction plus intentionnelle, tandis que le survol peut sembler plus rapide sur les appareils à pointeur.
Si votre navigation inclut des structures de menu plus profondes ou du contenu promotionnel dans les menus déroulants, l’ouverture au clic est généralement plus facile à contrôler et moins sujette aux changements involontaires de menu.
État par défaut du menu mobile
Section intitulée « État par défaut du menu mobile »Vous pouvez afficher le premier élément du menu mobile ouvert par défaut. Cela fonctionne bien lorsque votre premier élément de niveau supérieur mène à une catégorie ou à une collection prioritaire, mais cela peut sembler encombré si cet premier élément contient trop de liens.
Paramètres de couleur
Section intitulée « Paramètres de couleur »Ces paramètres remplacent les choix de couleur de thème plus larges pour le texte et les icônes de navigation dans cette section. Ils sont particulièrement utiles lorsque la navigation se trouve sur un arrière-plan personnalisé ou a besoin d’un contraste plus fort que celui fourni par votre style par défaut.
Types de blocs pris en charge
Section intitulée « Types de blocs pris en charge »- Icône de compte
- Bouton
- Panier
- Menu hamburger
- Icône avec texte
- Sélecteurs de localisation
- Logo
- Menu principal
- Méga menu
- Recherche
- Texte enrichi
- Icônes de réseaux sociaux
Disposition des blocs et comportement partagé des blocs
Section intitulée « Disposition des blocs et comportement partagé des blocs »La plupart des blocs de cette section utilisent la même logique de positionnement. Leur paramètre de disposition détermine s’ils se trouvent dans le groupe gauche, central ou droit de la ligne principale, et l’ordre des blocs contrôle l’ordre à l’intérieur de chaque groupe. Certains blocs peuvent également se déplacer vers une ligne séparée pleine largeur.
Les paramètres d’alignement sont généralement secondaires. Ils sont les plus importants lorsqu’un bloc remplit l’espace disponible ou se trouve sur une ligne pleine largeur.
Disposition sur ordinateur et mobile
Section intitulée « Disposition sur ordinateur et mobile »De nombreux blocs vous permettent de choisir des positions différentes pour l’ordinateur et le mobile. C’est utile lorsque vous souhaitez un en-tête d’ordinateur plus complet mais une disposition mobile plus ciblée qui privilégie le bouton de menu, le logo, la recherche et le panier.
Remplir l’espace disponible
Section intitulée « Remplir l’espace disponible »Certains blocs peuvent s’étirer pour remplir l’espace restant sur la ligne d’ordinateur. Cela fonctionne mieux pour des blocs comme le logo, les menus ou la recherche lorsque vous souhaitez qu’ils ancrent la disposition et repoussent les autres actions vers l’extérieur.
Visibilité des blocs
Section intitulée « Visibilité des blocs »De nombreux blocs incluent leurs propres contrôles de visibilité. Utilisez-les lorsque vous souhaitez qu’un élément utilitaire apparaisse différemment selon l’appareil sans dupliquer l’ensemble de la section.
Types de blocs clés
Section intitulée « Types de blocs clés »Menu hamburger
Section intitulée « Menu hamburger »Le bloc de menu hamburger est le déclencheur mobile de la navigation. Il est requis pour que la navigation principale fonctionne sur mobile, il doit donc être considéré comme essentiel plutôt qu’optionnel.
Conservez-le dans une position claire et prévisible sur mobile, généralement à gauche ou à côté du logo. Évitez de le masquer sur mobile, sauf si vous disposez d’un autre moyen clair pour que les visiteurs ouvrent la navigation.
Supprimer ou masquer le bloc de menu hamburger sur mobile peut laisser les visiteurs sans moyen utilisable d’ouvrir la navigation principale.
Le bloc Logo affiche votre marque et revient au nom de votre boutique si aucune image de logo n’est définie. Des contrôles de largeur séparés pour ordinateur et mobile vous aident à garder le branding visible sans encombrer les petits écrans.
Un logo mobile compact produit généralement le résultat le plus propre. Si vous laissez le logo s’étirer trop largement, il peut faire disparaître des actions plus importantes.
Menu principal et méga menu
Section intitulée « Menu principal et méga menu »Utilisez le Menu principal pour une navigation déroulante standard et le bloc Mega menu lorsque vous avez besoin d’un flyout plus grand et plus éditorial. Sur mobile, tous les blocs Main menu et Mega menu sont regroupés dans une seule interface de navigation.
Les deux types de blocs peuvent inclure une bannière et une barre de fonctionnalités, ce qui les rend utiles à la fois pour la mise en avant des produits et pour la navigation. Mega menu ajoute également un contrôle plus poussé pour la navigation structurée, y compris des liens optionnels « voir tout » au niveau parent à l’intérieur des sous-menus.
Bannière et contenu promotionnel
Section intitulée « Bannière et contenu promotionnel »Les blocs de menu et de méga menu peuvent inclure leurs propres médias d’arrière-plan, contenu au premier plan, bouton et image d’accompagnement. Utilisez cela pour des campagnes saisonnières, des collections mises en avant ou des parcours clients clés qui méritent une attention supplémentaire.
Comportement sur mobile
Section intitulée « Comportement sur mobile »Comme plusieurs blocs basés sur des menus se fusionnent en une seule interface mobile, considérez l’ordinateur et le mobile comme des expériences liées mais différentes. Gardez les libellés de catégorie clairs et examinez le résultat mobile combiné si vous répartissez la navigation d’ordinateur sur plusieurs blocs de menu.
Recherche
Section intitulée « Recherche »Le Recherche ajoute la recherche sur l’ensemble de la boutique à la navigation. Vous pouvez l’afficher comme un déclencheur sous forme d’icône seule ou comme un petit champ, avec un comportement mobile séparé pour préserver l’espace.
Si les résultats prédictifs sont activés, vous pouvez également définir des menus de résultats par défaut et secondaires ainsi qu’un contenu promotionnel optionnel. Cela rend la recherche plus utile pour la découverte, pas seulement pour les requêtes directes.
Blocs utilitaires et d’action
Section intitulée « Blocs utilitaires et d’action »Ces blocs ajoutent des actions d’accompagnement courantes autour de votre navigation principale.
- Icône de compte pour la connexion et l’accès au compte
- Panier pour l’accès au panier, avec des remplacements de couleur optionnels
- Bouton pour une action mise en avant, comme une promotion ou un point d’entrée spécial
- Sélecteurs de localisation pour le changement de pays, de devise et de langue
Pour les en-têtes compacts, des contrôles plus petits ou sous forme d’icône seule fonctionnent généralement le mieux. Lorsque ces blocs sont en concurrence avec les menus et les logos pour l’espace, utilisez des dispositions spécifiques au mobile ou la visibilité des blocs pour simplifier l’expérience sur petits écrans.
Blocs d’information et sociaux
Section intitulée « Blocs d’information et sociaux »Ces blocs sont utiles lorsque la navigation sert aussi de barre utilitaire ou de messagerie.
- Icône avec texte pour de courts arguments de vente ou signaux de confiance
- Texte enrichi pour un contenu formaté bref
- Icônes de réseaux sociaux pour les liens sociaux de vos comptes configurés
Utilisez-les avec parcimonie dans la navigation principale. Ils fonctionnent mieux dans une ligne secondaire ou une disposition pleine largeur, où ils soutiennent l’en-tête sans concurrencer les parcours de navigation principaux.
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 »Utilisez les Paramètres d’arrière-plan de section pour ajouter une couleur, un dégradé, une image ou une vidéo derrière la navigation. Ces paramètres peuvent créer un en-tête plus marqué, mais ils peuvent aussi modifier l’espacement perçu et le poids visuel du haut de la page.
Les contrôles d’overlay aident à garder le texte lisible sur les arrière-plans médias. Si vous utilisez différents médias d’arrière-plan sur mobile, vérifiez soigneusement les deux points de rupture, car la navigation est une zone très utilisée. Si vous ajustez ces paramètres dans l’éditeur, la documentation Shopify sur la personnalisation des sections explique comment les paramètres de section sont modifiés dans l’éditeur de thème.
Paramètres d’espacement
Section intitulée « Paramètres d’espacement »Utilisez les Paramètres d’espacement pour contrôler l’espace au-dessus et en dessous du contenu de navigation. De petits changements ici peuvent rendre l’en-tête plus compact ou plus aéré.
Comme cette section apparaît sur l’ensemble du site, un espacement modéré est généralement plus facile à conserver de manière cohérente. L’espacement par défaut est léger, ce qui constitue un point de départ pratique à moins que votre logo ou votre combinaison de blocs n’ait besoin de plus d’espace.
Paramètres de séparateur
Section intitulée « Paramètres de séparateur »Utilisez les Paramètres de séparateur pour ajouter une ligne en haut ou en bas à la navigation. Cela est utile lorsque vous souhaitez une séparation plus nette entre l’en-tête et le contenu environnant sans utiliser un traitement d’arrière-plan complet.
Si la couleur du séparateur est laissée transparente, la section utilise le paramètre de couleur de bordure plus large. Définissez une couleur de séparateur personnalisée uniquement lorsque la couleur de bordure par défaut n’offre pas suffisamment de contraste.
Paramètres de visibilité
Section intitulée « Paramètres de visibilité »Utilisez les Paramètres de visibilité pour afficher ou masquer l’ensemble de la section selon le type d’appareil. C’est particulièrement utile lorsque vous souhaitez des modèles d’en-tête distincts pour l’ordinateur et le mobile.
Utilisez la visibilité au niveau du bloc lorsque seuls quelques éléments doivent changer. Utilisez la visibilité au niveau de la section lorsque toute la structure de navigation doit être remplacée pour une plage d’appareils donnée.
Paramètres de largeur
Section intitulée « Paramètres de largeur »Utilisez les Paramètres de largeur pour contrôler à la fois la largeur du contenu et la largeur globale du conteneur de section. Cela compte surtout lorsque votre navigation inclut des arrière-plans, des dispositions de menu larges ou des lignes pleine largeur.
La largeur du contenu est le contrôle principal pour la distance à laquelle les éléments de navigation peuvent s’étendre, tandis que la largeur de la section est surtout importante lorsque la section possède son propre traitement d’arrière-plan. L’éditeur peut sous-représenter les changements de largeur, alors vérifiez la boutique en ligne en direct avant de finaliser. Pour un aperçu rapide des contrôles d’éditeur disponibles, consultez la documentation Shopify sur l’éditeur de thème
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Priorisez l’accès mobile. Gardez le bloc de menu hamburger visible et facile à atteindre afin que les visiteurs puissent toujours ouvrir la navigation sur les petits écrans.
- Concevez par groupes de disposition. Utilisez d’abord le placement des blocs à gauche, au centre et à droite, puis affinez avec l’ordre des blocs et les paramètres de remplissage de l’espace au lieu de vous fier uniquement à l’alignement.
- Gardez des menus faciles à parcourir. Si vous utilisez plusieurs blocs basés sur des menus, examinez le menu mobile combiné pour vous assurer que les catégories restent claires et pas trop segmentées.
- Utilisez le contenu promotionnel avec parcimonie. Ajoutez des bannières, des boutons et des messages de mise en avant uniquement lorsqu’ils soutiennent la navigation au lieu de la détourner.
- Vérifiez le résultat en direct. Examinez le contraste, l’espacement et la largeur sur la boutique en ligne après avoir ajouté des arrière-plans, des couleurs personnalisées ou des changements de largeur.
- Examinez les deux états de la recherche. Comparez l’état de recherche vide et l’expérience avec requête saisie afin que les résultats prédictifs, le contenu par défaut et les éléments promotionnels soutiennent tous le même parcours client.
- Testez des dispositions distinctes selon l’appareil. Examinez l’ordinateur et le mobile après avoir modifié les positions des blocs, la visibilité ou l’alignement, car les deux vues peuvent se comporter différemment.
- Surveillez les remplacements de médias. Lorsque vous ajoutez des images d’arrière-plan, des vidéos ou des médias distincts pour l’ordinateur et le mobile, confirmez que le recadrage, l’apparence de remplacement et la lisibilité fonctionnent toujours bien.