Il n’existe pas un jeu de menus unique qui conviendrait à toutes les boutiques. Une boutique de mode comptant des milliers de références a besoin d’une navigation très différente de celle d’un café qui vend quelques dizaines d’articles. Cet article rassemble la façon de combiner les menus Shopify selon le type de boutique, en m’appuyant sur ce que j’ai pu observer en gérant ma propre boutique et en regardant comment d’autres s’y prennent.
Avant le tableau, un point important : le menu sur ordinateur et le menu sur mobile ne devraient pas être identiques. Sur mobile, on tient son téléphone d’une main et on tape surtout avec le pouce. D’après les observations de Steven Hoober, environ 75 % des interactions sur mobile se font au pouce, et la zone la plus facile à atteindre est la moitié inférieure de l’écran. Sur ordinateur, c’est l’inverse : le regard balaie de haut en bas, un menu horizontal placé en haut a donc plus de sens. Deux contextes différents appellent deux façons différentes d’organiser le menu.
Un tableau de suggestions pour combiner les menus Shopify selon le type de boutique
| Type de boutique | Ordinateur | Mobile |
|---|---|---|
| Mode / Lifestyle, large catalogue | Mega Menu | Tab Bar + Slide Menu |
| Électronique, nombreuses catégories techniques | Mega Menu avec filtres | Slide Menu |
| Restauration / Local, peu de produits | Simple Nav (menu horizontal classique) | Tab Bar |
| Beauté / Soins de la peau | Mega Menu avec images | Tab Bar + FAB de chat |
| Dropshipping, nombreuses gammes de produits | Mega Menu | Slide Menu |
Ce tableau est un point de départ, pas une règle. Voici les raisons derrière chaque ligne, pour que vous puissiez l’adapter à votre propre boutique.
Mode et lifestyle : un large catalogue a besoin d’un Mega Menu sur ordinateur
Les boutiques de mode ont en général une structure profonde : Homme / Femme, puis Hauts / Bas / Accessoires, puis des gammes individuelles, par saison, par collection. Faire tenir tout cela dans un seul menu déroulant vertical oblige les clients à survoler de nombreux niveaux.
Sur ordinateur, un Mega Menu résout ce problème. Il répartit les catégories sur plusieurs colonnes à l’intérieur d’un grand panneau, si bien que l’utilisateur voit toute l’arborescence des produits d’un coup d’œil, au lieu de cliquer niveau par niveau. Pour une boutique de vêtements pour femmes comptant des dizaines de gammes, c’est en général l’approche la plus claire.
Sur mobile, c’est différent. Un écran étroit ne permet pas de déployer un Mega Menu. Une approche courante consiste donc à utiliser un Tab Bar pour les parcours les plus importants (Accueil, Catégories, Panier, Compte) épinglé en bas de l’écran, accompagné d’un Slide Menu pour la liste complète des catégories. Le Tab Bar reste toujours à portée de pouce, tandis que le Slide Menu accueille l’arborescence détaillée des produits pour les utilisateurs qui veulent aller plus loin.
Électronique : les catégories techniques ont besoin de filtres directement dans le menu
L’électronique a ses propres particularités. Les clients savent souvent assez bien ce qu’ils veulent : capacité, marque, gamme de prix, année du modèle. Pour une boutique d’électronique, le Mega Menu sur ordinateur devrait donc inclure quelques filtres ou sous-groupes directement dans le menu, ce qui permet à l’utilisateur de sauter droit vers la bonne branche au lieu de parcourir toute la page de catégorie.
Par exemple, une boutique d’accessoires informatiques pourrait diviser son Mega Menu en colonnes par type (souris, claviers, casques) et, à l’intérieur de chaque colonne, lister les gammes de prix ou les marques populaires.
Sur mobile, comme l’arborescence des catégories est longue et technique, un Slide Menu fonctionne mieux que de vouloir tout entasser dans un Tab Bar. Un Slide Menu permet au menu de s’imbriquer sur plusieurs niveaux tout en restant compact. Si vous l’utilisez, accompagnez les icônes d’intitulés textuels clairs. Le Nielsen Norman Group a mesuré ce point et constaté que les menus cachés (de type hamburger) réduisaient de près de moitié les chances que les utilisateurs trouvent la navigation, comparé aux menus visibles. Ne rendez donc pas le menu trop discret.
Restauration et local : avec peu de produits, ne compliquez pas inutilement
Les restaurants, boulangeries et commerces de proximité n’ont en général que quelques dizaines d’articles. Construire un Mega Menu pour une boutique de ce type est exagéré, et cela peut même rendre la page plus confuse que nécessaire.
Sur ordinateur, un Simple Nav, un menu horizontal avec quelques entrées comme Menu, À propos, Contact, suffit. Les clients n’ont pas besoin de fouiller en profondeur ; ils ont besoin de commander rapidement.
Sur mobile, un Tab Bar fonctionne bien ici. Quelques-uns des boutons les plus importants, par exemple Menu, Commander, Appeler, se tiennent prêts en bas de l’écran, juste dans la zone facile à atteindre au pouce. Un café qui vend en ligne pourrait épingler les boutons Commander et Appeler dans le Tab Bar, pour que les clients n’aient pas à faire défiler la page pour les trouver.
Beauté et soins de la peau : appui sur les images et le conseil
Les cosmétiques se vendent par l’image et la confiance. Les clients hésitent souvent sur le type qui convient à leur peau, le menu devrait donc refléter cela lui aussi.
Sur ordinateur, un Mega Menu avec images permet aux clients de voir le produit ou la gamme de soins directement dans le menu, au lieu de se contenter de lire du texte. Une boutique de beauté pourrait placer une image représentative pour chaque gamme (nettoyage, hydratation, protection solaire) à côté du nom de la catégorie.
Sur mobile, en plus d’un Tab Bar pour la navigation principale, un FAB de chat flottant dans un coin convient assez bien à ce secteur. Les clients ont tendance à avoir des questions avant d’acheter (ma peau peut-elle utiliser ce produit, va-t-il avec cet autre), et un bouton de chat toujours visible leur permet de poser leur question tout de suite. Réduire l’hésitation à ce stade en vaut la peine : d’après le Baymard Institute, le taux moyen d’abandon de panier dans le e-commerce tourne autour de 70 %, ce qui signifie que sur 10 personnes qui ajoutent au panier, environ 3 seulement finalisent l’achat. Répondre aux questions au bon moment est une façon d’en retenir une partie.
Dropshipping : nombreuses gammes, privilégiez un regroupement clair
Les boutiques de dropshipping vendent souvent de nombreuses catégories à la fois : ustensiles de cuisine, accessoires de téléphone, jouets, articles ménagers. La difficulté, c’est que ces groupes sont dispersés et sans lien les uns avec les autres.
Sur ordinateur, un Mega Menu aide à rassembler chaque catégorie dans sa propre colonne, si bien que les clients voient immédiatement ce que vend la boutique. Une structure claire compte plus qu’une belle apparence, car les clients arrivent souvent depuis des publicités et ne connaissent pas encore la boutique.
Sur mobile, un Slide Menu gère bien un grand nombre de catégories sans prendre de place. L’utilisateur l’ouvre, choisit une catégorie, puis approfondit.
Pourquoi vous devriez configurer mobile et ordinateur séparément
Le point commun des cinq cas ci-dessus, c’est que les deux versions sont configurées différemment. Ce n’est pas un détail mineur. La plupart des commandes proviennent désormais des téléphones, et un menu d’ordinateur transposé tel quel sur mobile est en général à la fois difficile à toucher et un poids pour le chargement de la page.
La performance mérite elle aussi qu’on y prête attention. Google fixe le seuil de bons Core Web Vitals à un LCP sous 2,5 secondes, un INP sous 200 ms et un CLS sous 0,1. Un menu trop lourd chargé sur chaque appareil tire facilement ces chiffres vers le bas. Sur mobile, chaque composant que vous ajoutez doit être léger.
C’est là qu’un outil comme Navi+ devient pratique : il vous permet de configurer séparément les menus pour ordinateur et pour mobile, de glisser-déposer sans code, et de conserver votre menu quand vous changez de thème. Vous pouvez définir un Mega Menu pour ordinateur et un Tab Bar plus un Slide Menu pour mobile, sans jamais toucher aux fichiers du thème.
En résumé, choisissez votre menu en fonction de la taille de votre catalogue et de la façon dont vos clients achètent, puis séparez la configuration des deux types d’écran. Le tableau ci-dessus est un point de départ ; le reste, c’est tester et ajuster en vous appuyant sur les chiffres réels de votre boutique.
Cet article fait partie du guide plus complet sur Comment choisir le bon type de menu pour votre boutique Shopify.