Menus et méga-menu

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

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. Si chaque sous-élément (au moins deux) mène à une collection, un produit ou un article qui a une image, la liste devient une rangée de vignettes d’images.
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 « Tout voir dans … » placé au pied du panneau (en tête de chaque panneau dans le tiroir de menu).

La vitrine d’images du méga-menu

Dans un méga-menu, Faubourg 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 principale du premier produit de la collection ;
• 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.

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.
• L’en-tête livré avec le thème contient déjà une mise en avant sous le premier élément (Élément de menu 1), avec un texte d’exemple et sans image : tant que vous n’avez pas choisi d’image ou supprimé le bloc, une illustration de remplacement s’affiche sous cet élément, s’il a des sous-éléments.
• 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, et chaque panneau commence par un lien « Tout voir dans … » vers la page de l’élément. Dès que vous êtes dans un panneau, la barre du haut du tiroir affiche une flèche de retour avant son titre, et ce titre devient le chemin des éléments ouverts, par exemple Menu > Boutique > Femme. 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.