Menu principal

Liens en vedette

1. Documentation de Company XYZ sur le bloc Main menu
2. Documentation Shopify sur les sections et les blocs
3. Documentation de Company XYZ sur les paramètres de couleurs de la bannière
4. Documentation de Company XYZ sur les paramètres de visibilité
5. Documentation de Company XYZ sur l’utilisation de la vidéo
6. Documentation de Company XYZ sur les icônes

Vidéos utiles

Vidéo de Shopify Academy : personnaliser votre boutique

Vidéo de Shopify Academy : personnaliser votre boutique

Utilisez ce bloc pour afficher un menu de navigation standard avec des menus déroulants automatiques lorsque le menu sélectionné inclut des liens imbriqués. Vous pouvez aussi ajouter une bannière et une barre de fonctionnalités en option, ce qui rend ce bloc utile pour combiner la navigation avec une promotion légère ou un message de marque. Consultez Menu principal.

Pour un aperçu plus large de la structure du thème, consultez la documentation Shopify sur les sections et les blocs

Sur mobile, tous les blocs Menu et Mega menu sont combinés dans une seule interface de navigation. Vérifiez-les ensemble afin que le menu mobile reste clair et facile à utiliser.

Paramètres de base

Commencez par choisir le menu que ce bloc doit afficher. Décidez ensuite si la bannière ou la barre de fonctionnalités en option apporte un contexte utile, comme une promotion, une annonce saisonnière ou quelques courts points forts de service.

Utilisez ces éléments supplémentaires avec prudence. La navigation doit toujours rester avant tout une navigation, alors évitez d’ajouter tellement de contenu d’accompagnement que la découverte des liens devienne plus difficile.

Paramètres d’alignement

Ces paramètres affinent l’emplacement du menu dans le bloc sur ordinateur. Ils sont généralement les plus importants lorsque le bloc occupe l’espace supplémentaire ou utilise une mise en page pour ordinateur plus large.

Si les changements d’alignement vous semblent subtils, vérifiez d’abord vos choix de mise en page. La mise en page a généralement l’effet le plus important, tandis que l’alignement agit davantage comme un ajustement final.

Paramètres de mise en page

Utilisez ces paramètres pour contrôler l’espace horizontal utilisé par le menu sur ordinateur et sa position sur la ligne. Les mises en page gauche, centre et droite conviennent mieux aux en-têtes plus traditionnels, tandis qu’une mise en page pleine largeur peut rendre la navigation plus équilibrée dans des en-têtes plus larges.

Remplir l’espace disponible est utile lorsque le bloc doit s’étendre dans l’espace restant au lieu de rester compact. Comme cela s’applique uniquement sur ordinateur, prévisualisez toujours le résultat sur des écrans plus grands.

Astuce

Si l’en-tête semble déséquilibré, essayez d’ajuster la mise en page avant de modifier l’alignement. Une mise en page plus large résout souvent les problèmes d’espacement plus proprement.

Arrière-plan de la bannière

Ces paramètres contrôlent le média derrière la bannière en option. Vous pouvez utiliser une image ou une vidéo en arrière-plan, et définir un média mobile distinct lorsque l’élément pour ordinateur ne se recadre pas bien sur les petits écrans.

Choisissez un média d’arrière-plan qui soutient le message sans le dominer. Des images simples et des vidéos courtes, peu distrayantes, fonctionnent généralement le mieux dans les zones de navigation.

Attention

Des médias d’arrière-plan chargés ou à fort contraste peuvent rendre le contenu lié au menu plus difficile à parcourir. Si la lisibilité diminue, simplifiez le média ou renforcez l’overlay et le contraste du texte.

Pour des conseils de configuration de vidéo, consultez les bonnes pratiques pour les fichiers vidéo.

Premier plan de la bannière

Ces paramètres contrôlent le contenu superposé à l’arrière-plan de la bannière. Les champs vides restent masqués, ce qui vous permet de garder la bannière minimale ou de créer un message promotionnel plus complet.

Utilisez l’icône, la légende, le titre et le sous-titre pour créer une hiérarchie de contenu claire. Les champs d’icône acceptent des emoji ou des icônes nommées, ce qui peut être utile pour mettre l’accent lorsqu’ils sont utilisés avec parcimonie et de manière cohérente. Pour des conseils de mise en forme des icônes, consultez le guide des icônes du thème.

Les paramètres du bouton vous permettent d’ajouter une action directe et de contrôler son style, l’emplacement de l’icône et la largeur sur mobile. Si vous activez un style de lien sur tout le bloc, les liens à l’intérieur du texte du sous-titre sont supprimés, donc cette option fonctionne mieux lorsque toute la bannière doit envoyer les visiteurs vers une seule destination.

Choisissez un seul modèle d’interaction principal pour la bannière. Si toute la bannière est cliquable, évitez d’y superposer des liens supplémentaires concurrents ou un message trop complexe.

Média de premier plan de la bannière

Ajoutez une image de premier plan lorsque la bannière a besoin d’un logo, d’un badge, d’une visuel de produit ou d’un autre élément graphique qui doit se placer au-dessus de l’arrière-plan. Cela fonctionne particulièrement bien lorsque l’arrière-plan est plus atmosphérique et que l’image de premier plan porte le véritable point focal.

Utilisez le paramètre de largeur de l’image pour garder le graphique proportionné au texte. Un traitement d’image pleine largeur peut convenir à des visuels marquants, mais des largeurs plus petites sont généralement préférables pour les logos et les visuels d’accompagnement.

Si vous rendez le média de premier plan cliquable, veillez à ce que cette destination reste cohérente avec le reste de la bannière afin d’éviter un mélange déroutant de cibles de lien.

Couleurs de la bannière

Ces paramètres remplacent les choix de couleur de bannière plus larges pour ce bloc uniquement. Utilisez-les lorsque cette bannière a besoin d’un contraste différent, d’un branding plus fort ou de plus de contrôle sur la manière dont le texte se superpose au média. Consultez la documentation Company XYZ sur les couleurs de la bannière

Les contrôles d’overlay sont particulièrement utiles pour la lisibilité. Augmentez l’overlay uniquement autant que nécessaire pour soutenir le texte, car des overlays trop marqués peuvent donner à la bannière un aspect plat ou dense.

Paramètres standard du bloc

Paramètres de visibilité

Utilisez les contrôles de visibilité pour afficher ou masquer ce bloc selon la taille de l’appareil. C’est utile lorsque vous souhaitez une disposition de navigation différente sur ordinateur et sur mobile. Consultez la documentation Company XYZ sur les paramètres de visibilité

Comme la navigation mobile combine les blocs basés sur le menu dans une seule interface, vérifiez toujours le résultat mobile complet après avoir modifié la visibilité.

Paramètres de l’éditeur

Utilisez le titre de l’éditeur pour renommer le bloc dans la barre latérale de l’éditeur. C’est pratique lorsque vous avez plus d’un bloc lié au menu et que vous souhaitez des libellés plus clairs pendant la modification.

Notes d’utilisation

1. Concentrez-vous sur les liens de premier niveau. Utilisez des libellés de menu concis et n’ajoutez des niveaux de sous-menu que lorsqu’ils aident réellement les visiteurs à trouver le contenu plus rapidement.
2. Vérifiez l’ensemble sur mobile. Puisque les blocs basés sur le menu se combinent sur mobile, évaluez l’expérience finale de navigation mobile plutôt que ce bloc seul.
3. Utilisez la bannière avec retenue. N’ajoutez du contenu promotionnel que lorsqu’il soutient la découverte sans concurrencer la navigation principale.
4. Priorisez la lisibilité. Lorsque vous utilisez des arrière-plans image ou vidéo, ajustez les couleurs et les overlays jusqu’à ce que le texte et les actions restent faciles à parcourir.
5. Adaptez la mise en page à l’espace de l’en-tête. Utilisez des mises en page plus larges ou basées sur le remplissage lorsque le menu doit équilibrer un en-tête large, et des mises en page plus compactes lorsque d’autres éléments de l’en-tête doivent passer en priorité.
6. Vérifiez les deux points de rupture. Les contrôles pour ordinateur et mobile peuvent affecter différemment la mise en page, l’alignement et la visibilité des médias, alors prévisualisez les deux tailles avant de publier.
7. Utilisez les remplacements de média de manière intentionnelle. Veillez à ce que les choix d’arrière-plan pour ordinateur et mobile restent alignés avec le contenu et le comportement de recadrage souhaités, et attendez-vous à ce que des médias distincts paraissent plus indépendants du reste de l’en-tête.