Mega Menu

Le Mega Menu transforme votre navigation en une expérience riche et visuelle. Au lieu d'un simple dropdown, il affiche un panneau large avec des colonnes de liens, des images, des produits en vedette et des bannières promotionnelles.

Guide : Configurer votre mega menu en 5 minutes

Suivez ces étapes pour passer d'un dropdown simple à un mega menu riche et visuel.

Étape 1 : Préparez votre menu Shopify

Le mega menu fonctionne à partir de la structure à 3 niveaux de votre menu Shopify (Admin > Boutique en ligne > Navigation).

Niveau 1 : Femme                ← Apparaît dans la barre de navigation
  Niveau 2 : Hauts              ← Devient un titre de colonne dans le mega menu
    Niveau 3 : T-shirts         ← Lien cliquable dans la colonne
    Niveau 3 : Chemises
    Niveau 3 : Pulls
  Niveau 2 : Bas
    Niveau 3 : Jeans
    Niveau 3 : Jupes

Étape 2 : Activez le mega menu dans le header

1. Ouvrez l'éditeur de thème > cliquez sur le Header
2. Dans les settings du Header, trouvez Type de menu desktop
3. Sélectionnez Mega menu (au lieu de Dropdown)
4. Choisissez un style : Colonnes, Onglets ou Full

Étape 3 : Ajoutez du contenu enrichi (optionnel)

Pour rendre votre mega menu visuellement riche, ajoutez des blocs dans la section Header de l'éditeur :

1. Cliquez sur Ajouter un bloc dans le header
2. Choisissez parmi : Image, Collection ou Bannière
3. Dans le champ Déclencheur, tapez le nom exact de l'élément de menu (ex : "Femme")
4. Configurez le contenu du bloc (image, collection, texte...)

Étape 4 : Prévisualisez et ajustez

Survolez les éléments de votre menu dans la prévisualisation pour voir le mega menu en action. Ajustez :

• La position des images (gauche, droite, haut, bas)
• Le nombre de produits affichés dans les blocs collection
• Les textes des bannières promotionnelles

Étape 5 : Testez sur différents menus

Survolez chaque élément de premier niveau pour vérifier que :

• Les colonnes s'affichent correctement
• Les blocs enrichis apparaissent au bon endroit
• Les liens "Voir tout" fonctionnent
• L'animation est fluide

Activer le mega menu

Le mega menu se configuré dans les settings du Header :

Les 3 styles de mega menu

1. Colonnes (columns)

Le style par défaut. Chaque élément de premier niveau du menu Shopify devient un titre de colonne. Les sous-éléments s'affichent en liste sous chaque titre.

Fonctionnement :

• Les éléments de niveau 2 du menu Shopify deviennent les titres de colonnes
• Les éléments de niveau 3 deviennent les liens sous chaque titre
• Maximum 8 liens par colonne sont affichés (au-delà, un lien "Voir tout" apparaît)

Contenu enrichi (sidebar) :

• Des blocs images et/ou produits de collection peuvent être ajoutés à droite ou à gauche des colonnes
• La position de la sidebar (gauche, droite, haut, bas) est configurable par bloc

2. Onglets (tabs)

Les éléments de premier niveau du menu s'affichent sous forme d'onglets cliquables en haut du mega menu. Cliquer sur un onglet affiche le contenu de cette catégorie.

Fonctionnement :

• Chaque élément de premier niveau avec des sous-éléments devient un onglet
• L'onglet actif (celui survole dans le menu) est sélectionné par défaut
• Animation de transition fluide entre les onglets (fade + slide)
• Chaque onglet peut avoir ses propres blocs enrichis (images, collections)

3. Full

Tous les éléments du menu principal s'affichent en même temps dans une grille large. Chaque catégorie de premier niveau est un bloc avec ses sous-catégories.

Fonctionnement :

• Tous les éléments du menu sont visibles simultanément
• Les éléments de premier niveau sont des titres de catégories
• Les éléments de deuxième niveau sont des sous-catégories
• Les éléments de troisième niveau sont des liens (max 5 par sous-catégorie)
• Les blocs images sans trigger spécifique s'affichent comme sidebar globale

Blocs enrichis

Le mega menu supporte 3 types de blocs que vous pouvez ajouter via l'éditeur Shopify dans la section Header :

Bloc Image

Ajoute une image cliquable avec titre, sous-titre et bouton CTA dans le mega menu.

Tailles d'image

Ratios d'image

Position de l'image

La position déterminé ou le bloc image apparaît par rapport aux colonnes de liens :

Bloc Collection

Affiche les produits d'une collection directement dans le mega menu. Idéal pour mettre en avant vos best-sellers ou nouveautes.

Chaque produit affiche :

• Image miniature (150px)
• Titre du produit (tronque a 30 caractères)
• Prix

Bloc Banniere

Ajoute une bannière promotionnelle pleine largeur en haut ou en bas du mega menu. Parfait pour les offres speciales et les annonces.

Declenchement du mega menu

Hover

Le mega menu apparaît lorsque le curseur survole un élément de premier niveau. Il disparait avec un léger délai (250ms) quand le curseur quitte la zone, pour éviter les fermetures accidentelles.

Click

Le mega menu s'ouvre et se ferme au clic sur l'élément de menu. Ce mode est plus adapte aux écrans tactiles et aux utilisateurs qui préfèrent un contrôle explicite.

Animation

• Fade : Le mega menu apparaît avec un fondu simple
• Fade + Slide : Le mega menu apparaît avec un fondu et un léger mouvement de haut en bas (plus dynamique)

Comportement mobile

Sur mobile, le mega menu n'existe pas en tant que tel. Les sous-menus s'affichent dans le drawer mobile avec deux modes possibles :

Accordion

Les sous-niveaux se deplient sur place. Une flèche indique les éléments avec des enfants. L'animation est fluide grâce à grid-template-rows.

Drilldown

Navigation page par page : cliquer sur un élément avec des enfants fait glisser une nouvelle "page" de liens. Un bouton "Retour" en haut permet de revenir en arrière.

Lien "Voir tout"

Quand active, un lien "Voir tout ->" apparaît :

• Sous chaque colonne qui a plus de 8 liens (styles Colonnes et Onglets)
• Sous chaque sous-catégorie qui a plus de 5 liens (style Full)
• En bas de chaque catégorie (style Full)

Structure du menu Shopify

Pour que le mega menu fonctionne correctement, votre menu Shopify doit être structure sur 3 niveaux :

Niveau 1 : Femme               <-- Titre de la colonne / onglet
  Niveau 2 : Hauts              <-- Titre de sous-section
    Niveau 3 : T-shirts          <-- Liens individuels
    Niveau 3 : Chemises
    Niveau 3 : Pulls
  Niveau 2 : Bas
    Niveau 3 : Jeans
    Niveau 3 : Jupes
    Niveau 3 : Pantalons

Exemples de configurations

Boutique mode

• Style : Colonnes
• Blocs images : 1 image "Nouvelle collection" à droite pour chaque catégorie
• Banniere bas : "Livraison offerte des 50 EUR"

Boutique high-tech

• Style : Onglets
• Un onglet par univers (PC, Mobile, Audio, Gaming)
• Bloc collection avec les best-sellers dans chaque onglet

Boutique mono-produit

• Style : Full
• Peu de catégories, toutes visibles en même temps
• Images globales pour les promos en cours

Résumé des settings

Prochaines étapes

• **Header** — Configurez le header complet avec logo, navigation et icônes
• **Barre d'annonce** — Ajoutez un bandeau promotionnel défilant au-dessus du header
• **Recherche prédictive** — Activez la recherche instantanée intégrée au header
• **Page collection** — Optimisez les pages vers lesquelles vos liens de menu redirigent