Exemples de boutiques Shopify

Exemples de méga menus : 15 designs de navigation Shopify

Ces exemples de méga menus mènent à des produits connus, à des échantillons de matériaux et à des conseils pour choisir. Les boutiques accordent des espaces différents à ces destinations. Comparez les groupes de liens et les images, puis examinez comment le même catalogue devient utilisable sur un écran tactile.

15 exemples Dernière révision

Heart Coffee Roasters

Chargement de la capture d'écran complète…

Intelligentsia

Chargement de la capture d'écran complète…

Intelligentsia

Des catégories de café à côté d'un produit mis en avant

Intelligentsia regroupe les liens de café par café filtre, espresso et torréfaction, avec une image de produit mis en avant et un bouton à côté. Les acheteurs qui connaissent les termes peuvent prendre un raccourci ; les autres ont un produit spécifique par lequel commencer. Le panneau sur ordinateur de bureau s'ouvrait au survol lors de la capture. Le comportement sur mobile nécessite une réflexion distincte.

Pour votre boutique

Associez les catégories spécialisées à un produit de départ reconnaissable.

Visiter le site web

Heart Coffee Roasters

Chargement de la capture d'écran complète…

Heart Coffee Roasters

Des conseils de préparation dans la section Apprendre

Le menu Apprendre de Heart rassemble des recettes, des vidéos et des rapports de transparence. Deux fiches avec images accompagnent les liens. Le menu accorde au contenu éducatif une place visible pour les visiteurs qui souhaitent comprendre le café ou comment le préparer. Le panneau capturé sur ordinateur de bureau se ferme lorsque le curseur quitte la zone de navigation.

Pour votre boutique

Placez les conseils d'achat et d'utilisation des produits pertinents dans la navigation principale.

Visiter le site web

TRNK

Chargement de la capture d'écran complète…

TRNK

La commande d'échantillons apparaît dans le menu

TRNK place des images de commande d'échantillons à côté des liens de meubles et de design. Un client qui envisage un tissu d'ameublement peut trouver une étape intermédiaire avant de choisir une pièce. La navigation mobile capturée se déplace dans un tiroir, donnant au catalogue une structure orientée vers le tactile.

Pour votre boutique

Rendez les échantillons de matières faciles à trouver avant un achat important.

Visiter le site web

Momentous

Chargement de la capture d'écran complète…

Momentous

Acheter par objectif à côté des catégories

Momentous sépare les achats par objectif, par catégorie et les meilleures ventes, puis ajoute deux fiches produits visuelles. Une personne arrivant avec un objectif a un point de départ différent d'un client fidèle qui recherche un complément connu. Les titres nécessitent des contenus distincts afin que ces parcours restent faciles à différencier.

Pour votre boutique

Proposez une navigation par objectif lorsque les clients risquent de ne pas connaître le nom du produit.

Visiter le site web

Athletic Brewing

Chargement de la capture d'écran complète…

Athletic Brewing

Des fiches illustrées pour l'histoire de la marque

Le menu Apprendre d'Athletic Brewing utilise de grandes fiches pour son histoire et ses informations sur les dons. Les images conviennent à un petit nombre de destinations éditoriales substantielles. Accorder le même espace à chaque lien utilitaire rendrait le menu difficile à parcourir ; ce traitement repose donc sur un ensemble restreint et sélectionné d'histoires.

Pour votre boutique

Réservez les grandes fiches de menu à quelques destinations substantielles.

Visiter le site web

Fable

Chargement de la capture d'écran complète…

Fable

Des catégories d'art de la table et un service best-seller

Fable regroupe la vaisselle, les plats de service, les couverts et les accessoires à côté d'une grande fiche d'un service de table. Un badge de meilleure vente explique le choix mis en avant. Les clients peuvent parcourir toute la gamme ou commencer par ce service. Le panneau observé reste ouvert tant que le pointeur reste dans la zone de navigation.

Pour votre boutique

Utilisez un produit mis en avant pour offrir un point de départ spécifique.

Visiter le site web

Horizn Studios

Chargement de la capture d'écran complète…

Horizn Studios

Des catégories stables à côté d'une série mise en avant

Horizn Studios conserve les catégories de bagages dans des colonnes de texte et utilise des fiches lifestyle adjacentes pour mettre en avant une série de produits. Les liens de catégories offrent des parcours de navigation familiers tandis que la zone d'image présente une gamme. Le contenu mis en avant peut changer sans nécessiter de modifier la navigation du catalogue.

Pour votre boutique

Gardez les parcours de catégories stables à mesure que les campagnes mises en avant changent.

Visiter le site web

Juniper Print Shop

Chargement de la capture d'écran complète…

Juniper Print Shop

De nouvelles œuvres d'art dans la navigation

Juniper Print Shop place une fiche de nouveautés à côté de ses colonnes de catégories. L'œuvre change automatiquement dans le menu enregistré, montrant de véritables impressions au fur et à mesure que les visiteurs naviguent. Les images en mouvement doivent laisser suffisamment de temps pour lire les liens ; une fiche statique pourrait présenter la même destination avec moins de distraction.

Pour votre boutique

Montrez l'œuvre clairement et évitez que le mouvement n'entre en concurrence avec la navigation.

Visiter le site web

The Foggy Dog

Chargement de la capture d'écran complète…

The Foggy Dog

La même hiérarchie dans des accordéons sur mobile

The Foggy Dog associe des liens groupés à des fiches promotionnelles sur ordinateur de bureau. La version mobile utilise un menu en plein écran avec des accordéons imbriqués. Les destinations restent reconnaissables même si leurs commandes changent. Les actions de retour et de fermeture sont importantes lorsqu'un client a ouvert plusieurs niveaux sur un petit écran.

Pour votre boutique

Gardez les noms de catégories reconnaissables lorsque la navigation s'adapte au tactile.

Visiter le site web

Nourished

Chargement de la capture d'écran complète…

Nourished

Créer, Acheter et Apprendre sur mobile

Nourished regroupe la navigation mobile sous Create (Créer), Shop (Acheter) et Learn (Apprendre). Des fiches illustrées mènent à son quiz et à son créateur de stack sur mesure, suivis de liens d'achat et d'information compacts et extensibles. L'ordre distingue la sélection guidée de l'achat d'un produit connu. Trop de fiches illustrées repousseraient les liens de catégories ordinaires vers le bas de l'écran.

Pour votre boutique

Donnez une place claire à la sélection guidée tout en gardant l'achat direct facile d'accès.

Visiter le site web

Slowdown Studio

Chargement de la capture d'écran complète…

Slowdown Studio

Des parcours séparés par objet et par marque

Slowdown Studio divise son menu en produits, accessoires pour la maison et marques, avec deux fiches de catégories visuelles à côté des liens. Les visiteurs peuvent naviguer par type d'objet ou suivre un designer qu'ils connaissent déjà. Les titres distincts expliquent ces parcours sans demander à chaque client d'utiliser le même point de départ.

Pour votre boutique

Séparez la navigation par type de produit de la navigation par créateur ou marque.

Visiter le site web

DedCool

Chargement de la capture d'écran complète…

DedCool

Un outil de recherche de parfum à côté des catégories de produits

DedCool combine des liens de catégories et des images promotionnelles avec une invitation à un quiz sur les parfums. Le quiz offre des conseils pour un produit que les clients ne peuvent pas sentir en ligne. Les parfums connus restent accessibles via les catégories ordinaires. La version mobile déplace la navigation dans un tiroir plein écran.

Pour votre boutique

Gardez un outil de recherche facultatif et préservez les parcours directs vers les produits.

Visiter le site web

Dinosaur Designs

Chargement de la capture d'écran complète…

Dinosaur Designs

Les bijoux et les articles pour la maison partagent une seule image éditoriale

Dinosaur Designs regroupe les collections, les bijoux et les articles pour la maison dans son menu Shop (Boutique), avec une grande image éditoriale à côté des liens. La photographie montre un style visuel partagé entre différents objets. La version mobile utilise un tiroir en accordéon. L'image mérite sa place lorsqu'elle représente la gamme décrite par les liens.

Pour votre boutique

Choisissez des images de menu qui représentent les catégories situées à côté.

Visiter le site web

rabbit

Chargement de la capture d'écran complète…

rabbit

Des photographies de course à pied à côté de catégories familières

rabbit place les hauts, les bas et les chaussures à côté de photographies de course à pied. Les étiquettes nomment les destinations d'achat tandis que l'image fournit le contexte d'utilisation. La version mobile utilise un menu latéral avec des accordéons imbriqués. Les termes fonctionnels des produits restent utiles dans les deux mises en page.

Pour votre boutique

Laissez les étiquettes de produits familières guider la navigation.

Visiter le site web

Versed

Chargement de la capture d'écran complète…

Versed

Les produits mis en avant incluent les prix et des badges de nouveautés

Versed place des fiches produits avec des images, des prix et des badges de nouveautés à côté des liens de catégories sur ordinateur. Les clients peuvent examiner quelques options concrètes depuis le menu. La version mobile utilise une liste plus simple sous forme de tiroir. Les fiches sur ordinateur nécessitent une sélection limitée et des détails lisibles pour rester un élément de navigation plutôt qu'une grille de produits surchargée.

Pour votre boutique

Donnez aux produits mis en avant suffisamment d'informations pour rendre la recommandation compréhensible.

Visiter le site web

Concevoir le méga menu autour de la première décision d’achat

Momentous propose aux acheteurs des parcours séparés par objectif, par catégorie et par meilleure vente. Slowdown Studio permet aux visiteurs de choisir par type de produit ou par marque. Les deux rendent la première décision explicite. Avant de disposer les colonnes, dressez la liste des différentes façons dont les clients décrivent ce dont ils ont besoin et supprimez les parcours dont les étiquettes promettent des choses différentes mais mènent au même assortiment.

Les images peuvent expliquer une autre destination. TRNK accorde une place visuelle aux échantillons de revêtement à côté des liens vers les meubles, tandis que Fable met en évidence un service de vaisselle à côté de ses catégories. Heart utilise son panneau Learn pour des recettes et des informations sur la transparence. Gardez les liens ordinaires lisibles et limitez les cartes mises en avant aux destinations qui méritent cet espace supplémentaire.

Adapter un méga menu e-commerce pour le mobile

The Foggy Dog et rabbit utilisent une navigation mobile imbriquée, tandis que DedCool déplace son menu dans un tiroir plein écran. Les colonnes sur ordinateur ne peuvent pas simplement se réduire pour adopter la même disposition. Les acheteurs ont besoin d’un point d’entrée clair pour chaque groupe, d’un moyen de revenir en arrière et d’une sortie qui reste disponible après l’ouverture de plusieurs niveaux.

Conservez des étiquettes de catégories familières sur toutes les tailles d’écran, puis examinez les contrôles séparément. Le comportement de survol capturé chez Intelligentsia et Heart décrit uniquement l’interaction sur ordinateur. Testez les commandes tactiles, les mouvements au clavier et les étiquettes traduites plus longues avant d’adopter ce comportement ailleurs. Les cartes promotionnelles doivent laisser les liens d’achat à portée de main, en particulier lorsqu’un menu mobile comporte plusieurs groupes développés.

Questions fréquentes

Combien de catégories le menu doit-il afficher ?

Utilisez des groupes que les clients peuvent distinguer, avec des titres clairs et peu de destinations répétées. Le menu n'a pas besoin d'exposer chaque collection interne si plusieurs collections répondent au même besoin de navigation.

Un menu sur ordinateur doit-il s'ouvrir au survol ou au clic ?

Les deux peuvent fonctionner avec un comportement d'ouverture stable et un accès au clavier. Les clients doivent pouvoir passer du déclencheur au panneau sans le fermer accidentellement. Le mobile nécessite une action tactile explicite.

Les images du menu augmentent-elles la conversion ?

Ces captures ne contiennent aucun résultat mesuré de conversion. Une image peut expliquer une catégorie ou un produit mis en avant ; testez si cela aide les visiteurs à naviguer sur votre propre boutique.

À quoi ressemble un méga menu ?

C'est un grand panneau de navigation qui présente des groupes de liens ensemble, souvent en colonnes. Ces exemples de boutiques utilisent également des fiches produits, des photographies de catégories et des liens éditoriaux. Les versions mobiles réorganisent généralement les destinations en tiroirs ou en groupes extensibles.

Les méga menus conviennent-ils à toutes les boutiques ?

Ils sont utiles lorsque les clients ont besoin de plusieurs itinéraires distincts dans un catalogue ou d'un contenu de support. Une petite gamme peut ne nécessiter qu'un menu court. Choisissez la structure à partir des destinations dont les clients ont besoin, puis vérifiez s'ils les trouvent facilement.

Faites le changement dans votre thème

Donnez à Fudge un objectif et une référence. Il suggère des modifications pour votre boutique, prépare un brouillon dans votre thème Shopify et vous fait un retour. Vous examinez chaque changement avant sa mise en ligne.

Découvrez comment fonctionne l'éditeur de boutique

Collections associées

Toutes les collections