Réussi
Méga menu
Créez un grand menu déroulant avec des liens organisés et un contenu de bannière promotionnelle facultatif.
- Documentation Shopify sur les sections et les blocs
- Documentation de Company XYZ sur le bloc de méga-menu
- Documentation de Company XYZ sur l’utilisation de vidéos
- Documentation de Company XYZ sur les icônes
- Documentation de Company XYZ sur les paramètres de couleurs de bannière
- Documentation Shopify sur l’éditeur de thème
- Documentation de Company XYZ sur les paramètres de visibilité
Utilisez ce bloc pour transformer un élément de navigation de premier niveau en un grand menu déroulant avec des liens groupés et un contenu promotionnel facultatif. C’est un bon choix lorsque votre en-tête doit afficher de nombreuses destinations sans paraître encombré, et vous pouvez ajouter plusieurs blocs Méga menu pour développer un système de navigation plus large. Pour une vue d’ensemble plus large de la structure du thème, consultez la documentation Shopify sur les sections et les blocs. Consultez la référence Méga menu pour obtenir des indications supplémentaires sur la configuration.
Paramètres de base
Section intitulée « Paramètres de base »Les paramètres de base définissent le libellé de niveau supérieur, le menu qu’il ouvre et si des aides à la navigation supplémentaires ou du contenu promotionnel s’affichent.
Définissez le Title sur le libellé que les clients doivent voir dans l’en-tête, puis choisissez le Menu qui doit s’ouvrir à partir de cet élément. Vous pouvez également activer une bannière, une barre de fonctionnalités et des boutons « view all » pour les sous-menus lorsque vous souhaitez que le menu déroulant guide les acheteurs vers des pages de catégories plus larges plutôt que vers de simples liens plus profonds.
Paramètres d’alignement
Section intitulée « Paramètres d’alignement »Ces paramètres ajustent la manière dont le contenu se positionne dans l’espace disponible sur ordinateur. Ils sont surtout importants lorsque le bloc est plus large ou utilise une mise en page plus étendue.
Si les changements d’alignement vous semblent mineurs, vérifiez d’abord les paramètres de mise en page. Les choix de mise en page déterminent l’espace attribué au bloc, et l’alignement agit généralement comme un ajustement secondaire dans cet espace.
Paramètres de mise en page
Section intitulée « Paramètres de mise en page »Les paramètres de mise en page contrôlent l’espace horizontal occupé par le bloc dans l’en-tête et son positionnement sur ordinateur.
Utilisez Fill available space lorsque vous souhaitez que ce bloc s’étende et contribue à équilibrer la ligne d’en-tête. Choisissez la mise en page pour ordinateur qui correspond le mieux à la structure globale de votre en-tête, en particulier si vous souhaitez que cet élément de navigation paraisse plus centré ou occupe davantage de largeur.
Examinez ensemble la mise en page et l’alignement. Une mise en page en pleine largeur ou étirée peut modifier l’équilibre visuel de tout l’en-tête, pas seulement de ce bloc.
Arrière-plan de la bannière
Section intitulée « Arrière-plan de la bannière »Si vous activez la bannière, ce groupe contrôle le média affiché derrière elle. Vous pouvez utiliser une image ou une vidéo, ainsi qu’un média mobile distinct lorsque l’élément de bureau ne se recadre pas ou ne s’adapte pas bien sur les petits écrans.
Utilisez Cover pour des visuels immersifs et Contain lorsque l’image complète doit rester visible. Gardez les arrière-plans de bannière suffisamment simples pour que la navigation reste facile à parcourir.
Pour des indications sur la configuration vidéo, consultez using video.
Premier plan de la bannière
Section intitulée « Premier plan de la bannière »Ce groupe contrôle le contenu superposé à l’arrière-plan de la bannière, notamment le texte, les icônes et le bouton principal. Tous les champs laissés vides ne sont simplement pas affichés, ce qui facilite la création d’une bannière minimaliste.
Utilisez les commandes d’alignement pour positionner le contenu là où il sera le mieux lisible sur le média choisi. Des titres courts et un texte d’accompagnement concis fonctionnent généralement mieux ici qu’un long texte promotionnel.
Vous pouvez ajouter un emoji ou un nom d’icône pris en charge pour les champs d’icône et d’icône du bouton. Pour obtenir de l’aide sur les noms, consultez le icon guide.
Choisissez un style et une disposition de bouton qui soutiennent la bannière sans l’écraser. Si vous utilisez un style de lien sur tout le bloc, les liens à l’intérieur du sous-titre sont supprimés ; cette option convient donc mieux lorsque toute la bannière doit agir comme une seule destination claire.
Considérez la bannière comme une aide promotionnelle rapide, et non comme un second système de navigation. Si vous ajoutez un message fort et un bouton, gardez la structure de menu environnante particulièrement claire.
Média du premier plan de la bannière
Section intitulée « Média du premier plan de la bannière »Ce groupe ajoute une image au-dessus de la zone de contenu de la bannière, séparément de l’arrière-plan. Il est utile pour les logos, les découpes de produits ou les petites illustrations d’accompagnement.
Ajustez le style de l’image et la largeur maximale afin que le média soutienne le message sans le dominer. Un média du premier plan en pleine largeur peut fonctionner, mais il demande une attention particulière dans un contexte de navigation, car il peut rapidement dominer le menu déroulant.
Si vous ajoutez un lien au média, veillez à ce qu’il n’entre pas en concurrence avec le bouton principal ou le comportement de lien sur tout le bloc de la bannière.
Couleurs de la bannière
Section intitulée « Couleurs de la bannière »Ces paramètres remplacent, pour ce bloc uniquement, les choix de couleur plus larges de la bannière. Utilisez-les lorsque ce méga menu a besoin de son propre style de campagne ou lorsque le média sélectionné nécessite un contraste plus fort.
Les paramètres d’overlay sont souvent l’endroit le plus utile pour commencer, car un meilleur overlay peut améliorer la lisibilité sans vous obliger à recolorer chaque élément de texte. Pour plus d’informations, consultez Paramètres de couleur de bannière.
Paramètres standard de bloc
Section intitulée « Paramètres standard de bloc »Paramètres de visibilité
Section intitulée « Paramètres de visibilité »Utilisez les contrôles de visibilité pour afficher ce bloc sur ordinateur, sur mobile ou sur les deux. C’est particulièrement utile lorsque vous créez différents modèles de navigation pour différentes tailles d’écran.
Comme, sur mobile, les styles de menu sont combinés en une seule interface, assurez-vous que tout choix de visibilité spécifique à l’appareil laisse malgré tout aux clients un ensemble complet et compréhensible de chemins de navigation. Pour les détails de configuration spécifiques à l’éditeur, consultez la documentation Shopify sur l’éditeur de thème. Plus de détails sont disponibles dans Paramètres de visibilité.
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Conservez des libellés familiers. Utilisez des titres de niveau supérieur courts et clairs afin que les clients puissent prévoir quel type de liens contient chaque menu déroulant.
- Vérifiez les deux affichages. Examinez les résultats sur ordinateur et sur mobile après avoir modifié la mise en page, l’alignement, la visibilité ou le média, car chacun peut se comporter différemment.
- Utilisez intentionnellement le style de repli. Des couleurs vides ou au style par défaut préservent généralement le design environnant, tandis que des couleurs explicites, des dégradés ou un média rendent le bloc plus indépendant.
- Protégez la lisibilité. Lorsque vous utilisez des arrière-plans d’image ou de vidéo, ajustez l’overlay, les couleurs et la longueur du texte pour que les liens et les appels à l’action restent faciles à parcourir.
- Limitez les clics concurrents. Si la bannière inclut un bouton, un média lié ou un lien sur tout le bloc, assurez-vous qu’il reste une action principale clairement identifiable.