Intégrer un filtre à facettes horizontal sur PrestaShop (ép. 137)

Sur un site e-commerce l’accès aux produits doit être facilité au maximum, la navigation filtre à facettes a été créée dans ce but. Voici une méthode « nouvelle génération » pour l’intégrer sur votre site PrestaShop !

Filtre ou pas filtre tel est la question ?

Sur les gros sites e-commerce le filtre à facettes et quasiment tout le temps en place, mais c’est moins le cas chez les petits et moyens e-commerçants. Pourquoi ? Parce que pour avoir un filtre efficace, cela demande un peu plus de temps sur la saisie des produits.

Les systèmes de filtre élaborés fonctionnent souvent avec des caractéristiques que l’on greffe sur les produits, cela implique d’ajouter des données supplémentaires sur vos produits, afin de les rendre filtrables… ce qui peut augmenter considérablement le temps de saisie des articles.

Même si vous n’avez pas encore poussé vos produits jusqu’à ce niveau, le filtre natif PrestaShop vous permet quand même de filtrer par marque, déclinaisons, prix, catégories… ce qui peut donc correspondre pour la plupart des e-commerçants, sans devoir effectuer un travail de saisie supplémentaire.

L’emplacement du filtre ? Ou est-ce le mieux ?

Hum, c’est une très bonne question… j’ai l’impression que cela a évolué avec le temps… À l’époque où le responsive n’était pas encore la tendance, le filtre se rangeait plutôt dans la colonne de gauche de la navigation.

En ce moment, j’ai plutôt l’impression que le filtre s’est déplacé au centre de l’écran dans la colonne principale, notamment à cause du mobile first, car la navigation mobile devient de plus en plus le support de référence.

Du côté de PrestaShop, le filtre à facettes est resté en positionnement « rétro » si on peut dire ça (en restant dans la colonne de gauche) sans proposer d’autres alternatives d’affichage.

Remise en question de la structure du layout PrestaShop

Dans PrestaShop, il y a des options sur le thème qui permettent de gérer les modes d’affichage des colonnes, de base vous avez des options 1 à 2 colonnes pilotables sur l’ensemble des pages pour proposer un peu de souplesse.

Actuellement on est en 2021, bientôt en 2022… et une question fondamentale que chaque e-commerçants devrait se poser c’est : « Faut-il utiliser une structure « mono-colonne » sur ma boutique afin de m’aligner avec les exigences du mobile qui représentent plus de 50% du trafic ? ».

Si on regarde les grandes entreprises e-commerce, on peut constater que pour beaucoup les colonnes gauches et droites ont totalement disparu la zone de navigation centrale est en un seul bloc, occupé principalement par l’affichage des produits.

Les thèmes PrestaShop mobile first ? Un argument marketing ?

En écrivant ces lignes, je viens d’aller voir un site qui propose des templates PrestaShop et qui sont orientés mobile first. Les templates que je viens de voir utilisent une structure à 2 colonnes, tout l’inverse des grandes sociétés… Whaaaaat ?

C’est bien ça aussi l’un des problèmes, c’est que les développeurs de thèmes revendiquent des avantages qui sont largement discutables (c’est aussi le cas pour les avantages SEO). Les thèmes PrestaShop mobiles first que je viens de voir n’étaient pas forcément mieux que des thèmes premium habituel.

Comme le positionnement des composants du shop est influencé par la structure du template, cela vaut la peine de bien réfléchir lors de son choix. Sur le thème par défaut PrestaShop j’ai pu trouver une astuce facilement intégrable en moins de 30 lignes de code et qui permet d’aller dans ce sens.

Des produits « bien structurés » feront votre force

Chez beaucoup d’e-commerçants je vois des catalogues assez touffus, on peut bien sûr naviguer avec les catégories et descendre dans l’arborescence pour trouver les produits, mais parfois l’opération est assez pénible et implique des rechargements de page intempestifs.

Quand le doigt est mis sur ce point qui fait mal, souvent l’argument qui revient c’est qu’étoffer les produits demande trop de temps et de travail. Pourtant, cela est contre-productif, je le vois bien par exemple quand on fait de la publicité (qui coûte cher) pour amener du trafic et que les utilisateurs repartent ensuite les mains vides.

Le filtre n’est pas toujours en cause, mais parfois l’accès au produit « désiré » demande trop de manipulations de navigation et l’internaute se décourage. Ou alors vous pouvez aussi miser sur une optimisation du moteur de recherche interne ou utiliser un système externe du type Doofinder.

Pour ce tutoriel PrestaShop vous avez à disposition :

• 1 x custom.js (pour déplacer le filtre)
• 1 x custom.css (pour mettre en forme filtre)

Télécharger

Résumé de la vidéo : Intégrer une navigation à facettes horizontale sur PrestaShop

• Pour commencer on va voir un exemple sur un grand site e-commerce pour voir comment est présenté le système de filtre et s’en inspirer.
• On va laisser la colonne de gauche active (pour des raisons techniques), mais l’occulter son l’affichage pour laisser une place majeure aux produits.
• Ensuite, on va intégrer un peu de JavaScript pour déplacer le filtre au centre de l’écran et refaire une mise en forme avec de nouvelles règles CSS pour l’affichage tablette / ordinateur.