Pages de catégorie qui convertissent : bonnes pratiques de mise en page, filtres et tri

La plupart des marchands PrestaShop concentrent leurs efforts sur les pages produit et traitent les pages de catégorie comme un réglage par défaut auquel ils ne touchent jamais. C’est l’inverse qu’il faut faire. Pour une très grande partie des boutiques, la page de catégorie est la première page sur laquelle arrive un visiteur — Google positionne les URL de catégorie sur des requêtes commerciales larges ("chaussures de running", "tuyaux d’arrosage", "chaises de bureau"), et l’acheteur qui arrive là compare encore, il n’a pas déjà choisi. La page produit conclut avec le client que vous avez déjà convaincu ; la page de catégorie décide s’il atteindra seulement une page produit. Ce guide porte sur le vrai travail de conception de cette grille : la mise en page, la fiche produit, l’ordre de tri, le nombre de produits à afficher et la manière dont les clients passent de l’un à l’autre — dans le back-office réel de PrestaShop et sa structure de templates, pas dans une théorie e-commerce générique.

Deux grands sujets qui vivent sur la page de catégorie ont déjà droit à un traitement approfondi, et cet article les renvoie volontairement vers leurs guides dédiés plutôt que de les survoler : le filtrage à facettes (la colonne de filtres elle-même) est traité dans aider les clients à trouver des produits dans de grands catalogues, et le titre en haut de page est un levier de conversion à part entière dans pourquoi le H1 de votre catégorie ne devrait pas être son nom. L’arborescence de catégories derrière les URL — profondeur, nommage, SEO — est abordée dans la structure des catégories PrestaShop. Ici, nous nous concentrons sur la mise en page et les mécanismes de listing.

Dernière révision en juin 2026 — chemins de réglage vérifiés sur PrestaShop 1.7 à 9 (thèmes Classic et Hummingbird).

Ce qu’est réellement une page de catégorie PrestaShop

Avant de modifier quoi que ce soit, il est utile de savoir ce que vous êtes en train d’éditer. Dans PrestaShop 1.7 à 9, une page de catégorie est générée par le CategoryController, qui étend la logique de listing de ProductListingFrontController. La grille visible provient du category.tpl de votre thème, qui inclut product-list.tpl et affiche chaque élément via le template de "miniature" produit catalog/_partials/miniatures/product.tpl. Trois états circulent dans l’URL et sont lus par le contrôleur à chaque requête :

• ?order= — le tri, par exemple ?order=product.price.asc ou ?order=product.name.desc.
• ?page= — la pagination, par exemple ?page=2.
• Les filtres à facettes — gérés par le module ps_facetedsearch, qui ajoute l’état des filtres à l’URL, généralement au moyen de paramètres de requête.

C’est important, car presque toutes les "bonnes pratiques" ci-dessous correspondent à un réglage à changer dans le back-office ou à une légère retouche de template — pas à une refonte. Qu’est-ce que cela change pour vous ? Vous pouvez corriger l’essentiel de ce qui fait perdre des ventes sur vos pages de catégorie sans facture de développement, et ces changements résistent aux mises à jour du thème parce que vous travaillez avec le système de listing natif de PrestaShop au lieu de le contourner.

Mise en page : grille, liste et nombre de colonnes vraiment adapté à vos produits

Le thème Classic de PrestaShop (depuis la 1.7) fournit uniquement une mise en page en grille — l’ancien bouton grille/liste de la 1.6 a disparu, si bien qu’une vraie vue liste vient désormais d’un thème qui l’intègre ou d’un module dédié, pas d’un commutateur d’URL natif. La grille convient à la grande majorité des catalogues parce qu’elle permet à l’acheteur de parcourir beaucoup de produits d’un seul coup d’œil. Mais ce choix n’est pas esthétique : il découle de ce qui vend le produit :

• Grille, 3 à 4 colonnes : lorsque l’image fait vendre — mode, bijoux, décoration, alimentation. La photo est l’accroche : laissez-lui de la place et gardez un texte de fiche minimal en dessous.
• Vue liste : lorsque la fiche technique fait vendre — électronique, pièces détachées, fournitures industrielles, B2B. Une ligne de liste offre de l’espace pour la description courte, les attributs clés et le stock, ce qui permet à un acheteur de comparer sans ouvrir chaque produit.
• Adaptez la vue au catalogue : avec le thème Classic, cela signifie assumer la grille et ajuster la fiche pour elle ; si vos produits ont réellement besoin d’une mise en page en liste, c’est une décision de thème ou de module qui mérite d’être prise délibérément. L’erreur consiste à adopter une vue qui lutte contre votre catalogue — une boutique de pièces serveur affichant des tuiles d’images sans caractéristiques, ou une boutique de mode tassée dans des lignes denses : dans les deux cas, l’information décisive est enterrée.

Pour le nombre de colonnes, la réalité pratique dans PrestaShop est qu’il est gouverné par la grille CSS de votre thème (les classes de colonnes Bootstrap dans product-list.tpl), et non par une liste déroulante dans le back-office. "Afficher 4 colonnes au lieu de 3" relève donc d’une petite modification de thème/CSS, idéalement dans votre thème enfant pour qu’une mise à jour ne l’écrase pas. Évitez d’aller au-delà de quatre colonnes sur ordinateur : passé ce seuil, les images rétrécissent au point de ne plus vendre.

La fiche produit : chaque élément doit mériter sa place ou disparaître

La tuile individuelle (la "miniature") est l’endroit où la page de catégorie persuade vraiment, et PrestaShop la génère depuis catalog/_partials/miniatures/product.tpl. Une fiche qui convertit affiche un ensemble resserré et intentionnel d’éléments — rien qui ajoute du bruit :

La discipline, c’est la soustraction. Les badges "nouveau", "promo", "livraison gratuite", les drapeaux, comptes à rebours et libellés semblent tous utiles pris séparément ; empilés sur une même tuile, ils transforment la grille en bruit visuel et ralentissent la page. Choisissez les un ou deux éléments qui correspondent à votre argument de vente le plus fort, et supprimez le reste.

Tri : choisissez un bon réglage par défaut, puis proposez peu d’options

Le tri par défaut est l’un des réglages les plus influents de toute la page, car la plupart des acheteurs ne le changent jamais — l’ordre que vous livrez est l’ordre selon lequel ils vous jugent. PrestaShop définit le tri par défaut pour tout le catalogue dans Paramètres de la boutique → Paramètres des produits ("Trier par défaut par" / "Méthode de tri par défaut"), et la liste déroulante de tri en front-office inscrit le choix dans le paramètre ?order=. Vos options, et les cas où chacune devrait être le réglage par défaut :

[capture d’écran : le panneau Paramètres des produits où "Trier par défaut par", "Méthode de tri par défaut" et "Produits par page" se trouvent tous sur le même écran]

• Pertinence / position (votre ordre éditorialisé) : le bon réglage par défaut pour la plupart des catégories — il vous permet de placer en haut les meilleures ventes et les produits à forte marge, catégorie par catégorie, en faisant glisser les produits dans Catalogue → Catégories. Le tri choisi continue de s’appliquer après sélection de filtres.
• Prix : du plus bas au plus élevé : le tri manuel le plus utilisé après le tri par défaut ; les acheteurs sensibles au prix le cherchent en premier, assurez-vous donc qu’il est présent.
• Prix : du plus élevé au plus bas : utile dans les catégories premium où les clients s’attendent à ce que la qualité coûte plus cher.
• Nouveautés d’abord (par date d’ajout) : pertinent comme réglage par défaut dans les catégories qui tournent vite — collections mode, nouvelles technologies.
• Meilleures ventes / ventes : la preuve sociale rendue visible ; puissant dans les catégories où le "populaire" est un vrai signal.

Limitez la liste déroulante à environ quatre à six choix. Chaque option de tri supplémentaire est une décision que vous demandez à l’acheteur de prendre au lieu d’acheter, et les options marginales ("nom Z–A") sont presque jamais utilisées. Un mauvais réglage par défaut, en revanche, peut vous coûter des ventes en silence : un tri "prix croissant" met en avant vos articles les moins chers et les moins rentables, et habitue les visiteurs à percevoir votre boutique comme un rayon à bas prix.

Produits par page, et comment les acheteurs parcourent la suite

Le nombre de produits affichés avant une rupture — et la façon dont l’acheteur accède au lot suivant — se règle dans Paramètres de la boutique → Paramètres des produits, via "Produits par page" (la valeur PS_PRODUCTS_PER_PAGE) ; certains thèmes ou modules peuvent aussi proposer un sélecteur par page en front-office, mais le contrôle natif est bien ce réglage du back-office. Les trois façons de gérer les "produits qui ne tiennent pas sur une page" :

Pour PrestaShop en particulier, la pagination est le réglage sûr précisément parce qu’elle produit de vraies URL indexables (/category?page=2) qui fonctionnent bien avec le cache pleine page et permettent à Google d’atteindre votre inventaire plus profond. Si vous voulez une sensation plus fluide, un bouton "Charger plus" est un meilleur compromis que le défilement infini — gardez le pied de page accessible et la position mémorisable. Pour le nombre de produits par page, 24 à 48 convient à la plupart des catalogues ; les valeurs très élevées (96+) alourdissent la page et dégradent le temps de chargement, ce qui nuit directement au taux de rebond sur une page de catégorie.

Le texte d’introduction : un court paragraphe, pas un mur, et pas un filtre

Une page de catégorie devrait contenir un bloc de texte unique — mais il est facile d’en faire trop. Le modèle qui respecte à la fois les acheteurs et les moteurs de recherche : une courte introduction (deux ou trois phrases) en haut, au-dessus de la grille, puis, si vous voulez davantage de profondeur SEO, une description plus longue sous les produits, là où elle ne repousse pas la grille sous la ligne de flottaison. PrestaShop vous donne exactement deux champs pour cela dans Catalogue → Catégories → [modifier] : le champ principal Description et, dans les versions actuelles (8.1+), un champ séparé Description supplémentaire, dont le texte d’aide indique qu’elle est "généralement affichée après la liste des produits sur la page de catégorie" — utilisez-les respectivement pour le haut et le bas. Gardez l’introduction du haut autour de 100 à 200 mots au total, rédigée d’abord pour un humain.

[capture d’écran : l’écran de modification de catégorie avec le champ Description principal et le champ Description supplémentaire visibles, afin que la séparation haut/bas soit évidente]

Une limite ferme : le bloc de texte ne remplace pas la navigation. Si les acheteurs ne peuvent pas affiner une grande catégorie, la solution est la colonne de filtres, pas un paragraphe de liens — voir le guide du filtrage à facettes. Et le titre placé au-dessus de cette introduction mérite sa propre réflexion ; une catégorie nommée "Chaussures" peut avoir un H1 qui vend réellement, comme expliqué dans le H1 de catégorie personnalisé.

Quand le catalogue est vaste : filtres et recherche font le gros du travail

La mise en page et le tri peuvent porter une catégorie de quelques dizaines de produits. Au-delà de ce volume, le facteur décisif devient la capacité de l’acheteur à affiner — et c’est un sujet assez vaste pour vivre ailleurs plutôt que d’être compressé ici. Deux articles voisins s’en chargent :

• Le filtrage à facettes (taille, couleur, marque, curseur de prix, en stock, "12 produits sur 156 affichés", filtres actifs supprimables) est la fonctionnalité décisive pour les grandes catégories, propulsée par ps_facetedsearch — la stratégie complète, y compris l’adaptation des filtres par catégorie, se trouve dans Filter Revolution.
• La recherche pour l’acheteur qui préfère taper plutôt que parcourir — lorsque la recherche par défaut de PrestaShop renvoie des résultats faibles, la solution est dans la recherche intelligente pour PrestaShop.

Sur téléphone, la page de catégorie est une autre page

Plus de la moitié du trafic des pages de catégorie est désormais mobile, et la grille desktop ne se contente pas de rétrécir proprement. La version téléphone nécessite ses propres décisions — des filtres repliés derrière un bouton "Filtrer" ouvrant un panneau plein écran (jamais en ligne, où ils dévoreraient l’écran), une grille à deux colonnes (une seule gaspille l’espace, trois rétrécissent trop les produits), une barre de filtre/tri sticky qui reste accessible pendant le défilement, et un aperçu rapide qui montre l’essentiel sans chargement de page complet. C’est une discipline assez complète pour avoir son propre guide — voir le commerce mobile — mais le principe clé pour les pages de catégorie est le suivant : concevez volontairement la mise en page mobile, ne vous contentez pas d’en hériter.

Testez la page de catégorie, parce que les chiffres se multiplient

Les pages de catégorie combinent un fort trafic et un impact direct sur le chiffre d’affaires, ce qui en fait le meilleur endroit de la boutique pour tester — un petit gain ici se multiplie sur tous les produits situés dessous. Des expériences utiles, toutes modifiables depuis les réglages ci-dessus :

• Produits par page — 24 contre 48 — en observant à la fois la conversion et le temps de chargement.
• Tri par défaut — votre "position" éditorialisée contre les "meilleures ventes".
• Contenu de la fiche — avec ou sans étoiles d’avis ; "Ajouter au panier" contre "Aperçu rapide".
• Emplacement du texte d’introduction — en haut contre en bas — et l’importance réelle de la grille au-dessus de la ligne de flottaison par rapport aux mots.

Mesurez sur un volume suffisant pour faire confiance au résultat — au moins quelques semaines et quelques centaines de sessions par variante, pas trois jours de bruit — et regardez le taux de clic de la catégorie vers le produit ainsi que la conversion finale, pas seulement les clics. La raison de faire cet effort est mathématique : augmenter la conversion ne serait-ce que de quelques points sur une page de catégorie qui reçoit dix mille visiteurs par mois représente des centaines d’acheteurs supplémentaires, et ce gain se répercute sur chaque produit de la catégorie.

Questions fréquentes

Où définir l’ordre de tri par défaut des pages de catégorie dans PrestaShop ?

Dans Paramètres de la boutique → Paramètres des produits, via "Trier par défaut par" et "Méthode de tri par défaut". Ce réglage définit le tri par défaut de tout le catalogue, que la plupart des acheteurs ne changent jamais. Pour organiser l’ordre dans une catégorie précise, faites glisser les produits dans Catalogue → Catégories et utilisez "position" / pertinence comme tri.

Combien de produits faut-il afficher par page de catégorie ?

24 à 48 convient à la plupart des catalogues. Le réglage se trouve dans Paramètres de la boutique → Paramètres des produits, sous "Produits par page". Des valeurs très élevées (96+) alourdissent la page et ralentissent le chargement, ce qui augmente directement le taux de rebond sur une page de catégorie — mieux vaut donc privilégier la pagination plutôt que d’afficher des centaines de produits d’un seul coup.

Puis-je ajouter une vue liste au thème PrestaShop Classic ?

Pas via un commutateur d’URL intégré. Le thème Classic (depuis la 1.7) a abandonné l’ancien sélecteur grille/liste de la 1.6 et ne fournit qu’une grille. Une vraie vue liste vient désormais d’un thème qui l’intègre ou d’un module dédié — c’est donc une décision de thème assumée, pertinente uniquement lorsque la fiche technique vend le produit (électronique, pièces, B2B) plutôt que l’image.

Faut-il utiliser la pagination ou le défilement infini sur les pages de catégorie ?

La pagination est le réglage sûr par défaut dans PrestaShop, car elle produit de vraies URL ?page= indexables, compatibles avec le cache pleine page, et permet à Google d’atteindre l’inventaire plus profond. Si vous voulez une sensation plus fluide, un bouton "Charger plus" est un meilleur compromis que le défilement infini, qui rend le pied de page inaccessible et ne fournit aucune position mémorisable.

Quel template génère une page de catégorie PrestaShop ?

Le CategoryController (qui étend ProductListingFrontController) la pilote ; la grille vient du category.tpl de votre thème, qui inclut product-list.tpl, et chaque tuile est rendue via catalog/_partials/miniatures/product.tpl. La plupart des optimisations relèvent d’un réglage de back-office ou d’une légère retouche dans votre thème enfant, pas d’une refonte de contrôleur.

La place de cette page dans votre boutique

La page de catégorie est le pont entre la façon dont les clients arrivent — votre navigation par méga-menu et votre page d’accueil — et la page produit qui conclut la vente. Soignez la grille, la fiche, le tri par défaut et la pagination, confiez le filtrage lourd et la recherche à ps_facetedsearch et à un vrai module de recherche, puis concevez volontairement la vue mobile. Rien de tout cela ne nécessite de forker votre thème ; presque tout se trouve dans Paramètres de la boutique → Paramètres des produits, Catalogue → Catégories, et dans une légère retouche de votre thème enfant. Le principe sous-jacent à chaque réglage est le même : un visiteur sur une page de catégorie a manifesté une intention, mais n’a pas encore choisi — votre seul rôle est de rendre ce choix évident, puis de vous effacer.

Continuer la lecture

• Filter Revolution : aider les clients à trouver des produits dans de grands catalogues — la colonne de filtres à facettes qui porte les catégories au-delà de quelques dizaines de produits.
• Structure des catégories PrestaShop : navigation optimisée pour le SEO — l’arborescence derrière ces URL : profondeur, nommage et slugs.
• Méga-menu PrestaShop : construire une navigation qui convertit — comment les acheteurs arrivent au bon endroit dès le départ.