Desktop Mega Menu Slide Menu Tab Bar

Baby Studio — un catalogue maman et bébé plus facile à parcourir sur Shopify grâce au Mega Menu, au Slide Menu et au Tab Bar

Comment Baby Studio a réorganisé sa navigation pour rendre son catalogue maman et bébé plus facile à explorer, sur desktop comme sur mobile.

BS
Baby Studio
babystudio.com.au
Vente puériculture et chambre de bébé Shopify Navigation mobile
En bref
Secteur
Baby & nursery retail
Plateforme
Shopify
Défi
Un catalogue à nombreux groupes de produits, avec une navigation encore plate
Navi+ menus
Desktop Mega Menu · Slide Menu · Tab Bar
Objectif
Explorer le catalogue sur desktop, manipuler rapidement sur mobile

Le problème du client

Baby Studio s'adresse à un public très particulier : les parents, les jeunes familles et les personnes qui achètent des cadeaux pour les tout-petits. Avec ce public, le besoin est souvent clair, mais le chemin vers le produit comporte de nombreuses branches : poussettes, sièges auto, chambre de bébé, repas, soins de bébé, jouets, accessoires, ainsi que des groupes de produits classés par âge ou par situation d'usage.

Lorsqu'un catalogue compte autant de groupes, le menu par défaut du thème commence vite à manquer de place. Sur desktop, une barre de menu plate ne peut pas représenter toute l'étendue du store. Sur mobile, si tout est caché derrière le menu hamburger, le visiteur doit ouvrir chaque niveau lui-même et deviner quel groupe contient le produit dont il a besoin.

Storefront desktop de Baby Studio avant Navi+ — navigation par catégories plate, sans mega menu
Baby Studio sur desktop : de nombreux groupes de produits, mais un header qui reste une barre de menu plate, sans déployer le catalogue en mega menu.

Le problème n'est pas un manque de produits. Le problème, c'est que les produits sont bons mais que la structure de navigation n'aide pas encore le visiteur à voir ce que le store vend, ce qui l'oblige à une étape de plus pour trouver la bonne section. Sur mobile, quelques étapes superflues suffisent pour que le visiteur passe à côté d'un groupe de produits important.

Menu mobile de Baby Studio avant Navi+ — premier niveau de navigation
Le menu mobile actuel : les groupes principaux se trouvent dans le drawer, le visiteur doit ouvrir le menu avant de voir le catalogue.

Ce que Navi+ résout

La bonne approche consiste à ne pas changer de thème et à ne pas refaire tout le store. Navi+ est utilisé comme une couche de navigation supplémentaire, qui répartit clairement les rôles selon chaque contexte : le desktop a besoin d'une vue d'ensemble, le mobile a besoin d'une manipulation rapide, et le visiteur en train d'acheter a besoin de raccourcis vers les points importants.

Desktop Mega Menu — montrer au visiteur ce que le store propose dès le départ

Le Mega Menu peut répartir les principaux groupes de produits en colonnes claires, par exemple : poussettes, sièges auto, chambre de bébé, repas, jouets, soins de bébé, soldes ou collections en vedette. Chaque groupe porte un libellé facile à comprendre et une image représentative, pour qu'un nouveau visiteur n'ait pas à cliquer au hasard.

Slide Menu — descendre en profondeur dans le catalogue sans alourdir le mobile

Le Slide Menu convient à un catalogue comportant de nombreux sous-groupes. Le visiteur peut passer d'un grand groupe à un sous-groupe écran par écran, dans une expérience plus proche d'une app que d'une longue liste de liens. C'est particulièrement utile lorsque le visiteur doit choisir selon son besoin, l'âge, le type de produit ou les accessoires associés.

Tab Bar — placer le menu, la recherche et le panier à portée de pouce

Sur mobile, le Tab Bar maintient les actions importantes toujours en bas de l'écran : Home, Shop/Menu, Search, Cart, Account ou Sale. Le visiteur n'a pas besoin de remonter vers le header pour rechercher, ouvrir le menu ou consulter son panier. Pour un public en train de parcourir de nombreux produits pour bébé, réduire ces actions répétées crée une expérience plus légère.

Le résultat — après Navi+

Après avoir réorganisé sa navigation avec Navi+, Baby Studio peut présenter son catalogue d'une manière plus proche du comportement d'achat réel : le desktop laisse voir davantage de groupes de produits, le mobile offre un chemin plus clair, et les actions principales se trouvent là où le visiteur peut facilement les toucher.

Mega menu desktop mis à jour de Baby Studio montrant la navigation Poussettes avec des images de produits
La version mise à jour sur desktop : la catégorie Poussettes est déployée en mega menu, avec ses sous-groupes et des produits en illustration.
Storefront mobile mis à jour de Baby Studio avec le Tab Bar Navi+ en bas de l'écran
La version mise à jour sur mobile : le Tab Bar place Menu, Catalog, Blogs, Support et More en bas de l'écran, exactement dans la zone d'action du pouce.
Slide menu mobile mis à jour de Baby Studio avec produits mis en avant et liens de catégories
Le Slide Menu après mise à jour : un panneau coulissant se superpose au storefront, conservant le contexte de la page en arrière-plan tout en réunissant les catégories, les produits phares et un raccourci de contact dans un même flux.

Le résultat visé n'est pas simplement un menu « plus joli ». Le résultat, c'est qu'un nouveau visiteur comprend rapidement ce que le store propose, que le visiteur mobile trouve la bonne section en moins de détours, et que le header peut s'alléger sans perdre les fonctions importantes comme la recherche, le panier et le menu.

  • Le desktop représente mieux l'étendue du catalogue grâce au Mega Menu.
  • Le mobile offre un chemin plus clair grâce au Slide Menu.
  • La recherche, le panier et le menu sont plus proches du pouce grâce au Tab Bar.
  • Le nouveau visiteur comprend plus vite ce que le store propose.
  • Un catalogue à nombreux groupes de produits devient plus facile à parcourir, sans avoir à changer de thème.

Principes à retenir

Des points applicables à la plupart des stores au catalogue ramifié — pas seulement Baby Studio.

  • Le desktop pour explorer : le mega menu déploie toute l'étendue du catalogue dès le header, pour qu'un nouveau visiteur voie ce que le store vend sans cliquer au hasard.
  • Le mobile pour aller en profondeur : le slide menu fait passer le visiteur d'un niveau à l'autre comme une app, idéal pour un catalogue regroupé par besoin ou par âge.
  • Les actions principales doivent rester à portée de pouce : placez le menu, la recherche et le panier dans le Tab Bar, et déchargez le header.
  • Ajouter une couche, sans changer la base : améliorer la navigation sans changer de thème ni abandonner les apps en place.

Vous avez un store similaire et vous aimeriez essayer Navi+ ? Découvrez les types de menus ou consultez la documentation.

K
Khoi — Founder, Navi+
Créateur de Navi+, il conseille directement les stores Shopify aux multiples catégories sur leur navigation.

Commencez avec Navi+ AI Menu Builder

Choisissez votre plateforme — gratuit à installer, en direct en minutes.