Le menu d’un site e-commerce c’est une zone emblématique et stratégique pour chaque e-commerçant… Pourtant, je vois régulièrement des erreurs qui peuvent être pénalisantes pour vos futurs acheteurs. Vérifiez, si vous aussi vous faites ces erreurs !

Le menu horizontal PrestaShop doit tenir sur une seule ligne

C’est quelque chose de facile à comprendre, mais c’est encore très souvent « boycoté »… Je vois de nombreux sites e-commerce de PME ou d’indépendants, dont le menu s’étend sur 2 lignes… Vous allez me dire : « Oui, mais c’est quoi le problème ? ça fonctionne ! ».

Hum, en fait cela complexifie déjà la lecture, car la densité de texte demande plus de concentration. De plus, quand vous survolez un élément qui contient un sous-menu, cela provoque parfois des troubles d’affichage et des difficultés pour atteindre l’élément désiré (régulièrement l’ergonomie est altérée).

Il faut absolument réduire le nombre de catégories à la racine, dites-vous bien que Zalando avec ses milliers de produits démarre avec « Femme », « Homme », « Enfant » tout est une question de perspective. Si vous pensez que vous ne pouvez pas simplifier vos 15 catégories racines, c’est certainement que vous n’avez pas encore trouvé le bon angle d’approche.

Mon menu PrestaShop est responsive, donc il est très bien !

Si vous avez respecté l’étape précédente et que votre menu PrestaShop tient sur une seule ligne, vous pouvez être satisfait… mais je vois souvent un autre problème sous-jacent à celui-ci… Comme je le montre en vidéo, quand je réduis la taille de fenêtre c’est souvent là que le processus d’affichage se complique.

En fait le problème le plus fréquent, c’est sur toutes les résolutions entre le début de la tablette jusqu’au format ordinateur. Vous avez plein de résolutions intermédiaires où le menu va s’afficher sur plusieurs lignes parce que l’espace n’est plus suffisant (vu que la largeur du support est plus étroite).

Je conseille en principe pour cela de simplifier un maximum les libellés du menu, de réduire les points d’entrées du niveau 1 et bien sûr d’ajouter une ou deux règles responsive (voir dans ma vidéo) qui vont réduire les marges du menu et réduire la taille de police afin de garder toujours le menu uniforme peut importe la résolution d’écran.

Ne pas oublier les liens vers les pages emblématiques

Bien sûr un site e-commerce est constitué principalement de pages de catégories, mais vous avez aussi des pages plus spéciales, comme par exemple : les promotions, les marques, les nouveautés, peut-être même certaines pages CMS, que vous voulez absolument montrer à vos visiteurs.

La grande question à se poser, c’est de savoir si cela est explicite de les intégrer au menu… Mettre en avant des promotions alors qu’il y a uniquement 1 ou 2 produits qui trainent à l’intérieur peut provoquer un effet de réticence chez le visiteur (il en va de même pour les nouveautés ou les marques). La notion de choix et d’offre étoffée doit se faire ressentir pour gagner en crédibilité.

Ce qu’il faut comprendre aussi c’est que plus de 50% de vos clients sont sur mobile, si vous avez fait un lien vers vos promotions ou vos nouveautés sur la page d’accueil, il y a de fortes chances pour qu’ils passent à côté. En revanche, si ces liens stratégiques sont présents dans le menu, la garantie d’accès à ces liens est beaucoup plus forte.

Avez-vous fait une réflexion de votre menu sur papier ?

Ce qu’on fait tous en principe, c’est qu’on se lance sur la création des catégories sur PrestaShop et on le fait d’instinct au fur et à mesure… Puis le temps passe, on s’y habitue à notre structure de menu et il perdure ainsi des années durant, puis pour finir dans notre tête cela ancre la certitude que ce qu’on avait fait à l’époque était optimal.

C’est un problème, car avec le temps qui passe on ne se rend plus compte de nos lacunes… Ce qu’il faut faire idéalement, c’est déconnecter de l’informatique et créer une arborescence sur papier avec une vision « nouvelle » pour être certain que l’expérience client va être au rendez-vous.

L’ordre des sous-catégories est aussi important, il faut les prioriser et ordonner en fonction de vos offres et du chiffre d’affaires généré. Ne copiez pas aveuglément vos fournisseurs ou vos concurrents… Ce n’est pas parce qu’ils sont plus gros que vous, que forcément leur e-commerce a été le fruit d’une réflexion plus poussée / élaborée.

L’ordre des produits dans les listings des catégories

Forcément, l’une des fonctions classiques sur un site e-commerce c’est lorsqu’on clique sur une catégorie afin de voir la liste des produits qu’elle contient… Et là, je vois très souvent un mauvais réglage survenir, c’est l’affichage des produits par position défini via le back-office.

En soi le tri par position (à la main) est une très bonne chose, à condition que le tri soit réellement effectué avec minutie pour chaque catégorie. C’est un travail titanesque qui demande forcément beaucoup d’attention et d’autant plus si vous avez beaucoup de catégories et de produits.

Dans la plupart des cas il est préférable de commencer par un tri automatique, vous pouvez changer cela dans les préférences produits en back-office. Bien souvent c’est le tri « ascendant » par nom de produit qui est utilisé, mais il y a aussi d’autres alternatives notamment pour prioriser le tri en fonction des quantités en stock.

Pour ce tutoriel PrestaShop vous avez à disposition :

• 1 x fichier custom.css (exemple de règle pour ajuster le menu)

Télécharger

Résumé de la vidéo : Les 5 erreurs les plus fréquentes sur les menus de boutiques PrestaShop

• Tout d’abord on va prendre connaissance de l’espace disponible sur la zone du menu en gardant en tête que le but c’est que le menu s’affiche dans tous les cas sur une seule ligne.
• On va ensuite tester le responsive progressif pour voir comment le menu se comporte sur les résolutions intermédiaires et appliquer un patch CSS pour corriger le comportement sur certaines résolutions.
• Il ne faut pas oublier d’ajouter les pages stratégiques à votre menu, comme les promotions, les nouveautés, les marques (mais cela dépendra du contexte, chaque e-commerce est différent).
• Dans le bloc-notes, vous pouvez créer une nouvelle structure de vos catégories… Ne le faites pas directement sur PrestaShop, cette approche vous évite de procéder à du tâtonnement back-office.
• Enfin, sur le listing des produits, il est important que l’affichage soit cohérent et logique. Evitez le tri « par position » qui risque d’être dissuasif si vous ne le managez pas de manière minutieuse.