En-tête et pied de page
Menus et méga-menu
Construire la navigation : menus déroulants, méga-menu, vitrine d’images et mises en avant.
Sur cette page
La navigation de l’en-tête est construite à partir d’un menu Shopify. Le type de panneau qui s’ouvre dépend uniquement de la profondeur de votre menu : vous n’avez aucun réglage à choisir.
Créer le menu
Ouvrez la navigation
Dans l’administration Shopify, allez dans Boutique en ligneNavigation et ouvrez le Menu principal (identifiant main-menu), ou créez un menu.
Ajoutez les éléments
Ajoutez des éléments de premier niveau, puis faites glisser des éléments sous un autre pour créer des sous-menus. Maison affiche trois niveaux au maximum.
Attribuez-le à l’en-tête
Dans l’éditeur de thème, section En-tête, choisissez ce menu dans Menu.
Menu déroulant ou méga-menu
| Structure de l’élément | Panneau affiché |
|---|---|
| Pas de sous-éléments | Un simple lien. |
| Des sous-éléments, sans troisième niveau | Un menu déroulant : une liste de liens. |
| Au moins un sous-élément a lui-même des sous-éléments | Un méga-menu : une colonne par sous-élément, avec ses liens en dessous. |
Un élément de premier niveau qui a des sous-éléments ouvre son panneau au lieu de mener à une page. Sa propre page reste accessible par le lien « Voir tout : … » placé en tête du panneau.
La vitrine d’images du méga-menu
Dans un méga-menu, Maison ajoute automatiquement une vitrine de deux images, à droite des colonnes. Elle est construite à partir des deux premiers sous-éléments (dans l’ordre du menu) qui ont une image :
- un lien vers une collection utilise l’image de la collection, ou à défaut la photo du premier produit de la collection qui en a une ;
- un lien vers un produit utilise sa photo principale ;
- un lien vers un article utilise son image.
Les autres types de liens (pages, blogs, adresses web) sont ignorés. Si aucun lien n’a d’image, il n’y a pas de vitrine et les colonnes occupent toute la largeur. La vitrine et les mises en avant ne s’affichent que sur ordinateur (990 px et plus).
Mise en avant du menu
Le bloc Mise en avant du menu remplace la vitrine automatique par un contenu éditorial de votre choix : une image, un titre, un texte et un lien.
| Réglage | Valeurs | À quoi il sert |
|---|---|---|
| Élément de menuEN : Menu item | Texte | Le titre exact de l’élément de menu principal sous lequel cette mise en avant apparaît, par exemple Femme. Laissez vide pour masquer la mise en avant. |
| Image | Image | — |
| Forme de l’imageEN : Image shape |
| — |
| TitreEN : Heading | Texte | — |
| TexteEN : Text | Texte enrichi | — |
| LienEN : Link | Lien | — |
| Libellé du lienEN : Link label | Texte | — |
Ajoutez le bloc
Dans la section En-tête, cliquez sur Ajouter un bloc > Mise en avant du menu.
Indiquez l’élément de menu
Dans Élément de menu, saisissez le titre exact de l’élément de premier niveau sous lequel la mise en avant doit apparaître, par exemple Femme. Les majuscules et les espaces autour sont ignorés.
Ajoutez le contenu
Image, titre, texte, lien et libellé du lien.
Bon à savoir :
- La mise en avant n’apparaît que sous un élément qui a des sous-éléments (un menu déroulant ou un méga-menu).
- Plusieurs mises en avant peuvent viser le même élément : une seule occupe une colonne, deux ou plus s’affichent sur deux colonnes.
- Dans un menu déroulant, la mise en avant s’affiche à côté de la liste, image et texte côte à côte.
- Sur téléphone, les mises en avant apparaissent en bas du sous-panneau de l’élément, dans le tiroir de menu.
- Sans image choisie, une illustration de remplacement s’affiche, y compris sur la boutique en ligne.
- Si un lien et son libellé sont renseignés, le libellé devient un lien souligné ; sinon, le titre ou à défaut l’image porte le lien.
Le tiroir de menu
Sur téléphone (et sur ordinateur avec Navigation sur ordinateur > Tiroir), le menu s’ouvre dans un tiroir latéral. Les trois niveaux s’y parcourent par panneaux successifs, chacun avec un bouton Retour et un lien « Voir tout : … ». Les sélecteurs de pays et de langue se trouvent en bas du tiroir. Sans JavaScript, le tiroir fonctionne toujours, sous une forme simplifiée.
Menu du compte client
Le réglage Menu du compte client de l’en-tête choisit le menu proposé dans le menu de compte (commandes, profil…). Par défaut, il s’agit du menu customer-account-main-menu créé par Shopify.
Maison 1.0.0