Optimiser une page collection e-commerce : l'audit complet
La page collection est un rayon. Un rayon mal rangé ne vend pas, il fatigue. Et contrairement au rayon physique, personne ne le remet en ordre le soir : le désordre y est structurel, reconduit à chaque nouvelle collection, invisible pour l'équipe qui connaît son catalogue par cœur et n'a plus besoin de chercher.
C'est la machine à trier du site : la page que tout le monde traverse et que personne n'audite. Sur la plupart des boutiques que nous accompagnons, c'est aussi la typologie de page qui transforme le moins bien, et les benchmarks confirment que le problème dépasse nos client·e·s : le Baymard Institute classe 78 % des sites e-commerce mobiles en « médiocre ou pire » sur l'expérience des listes de produits, 58 % sur desktop.
Ses tests utilisateurs, menés dès 2015 et toujours cités en référence par l'institut, donnent la mesure de l'enjeu : sur une même tâche de recherche de produit, les sites aux listes médiocres voient 67 à 90 % des participant·e·s abandonner, contre 17 à 33 % sur les sites dont l'outillage de tri et de filtres est simplement correct. La même boutique, le même catalogue, et jusqu'à quatre fois plus de fiches produit atteintes.
La marque d'artisanat français de notre article pilier racontait cette histoire en trois chiffres sur son dernier trimestre audité. Ses pages collection envoyaient 31,6 % de leurs visiteur·euse·s vers une fiche produit : mieux que sa homepage (19,4 %), loin du travail attendu.
À lire aussi :
Jérémie Werner
Sa collection la plus fréquentée, première porte d'entrée du catalogue, faisait 28 % de passage à la fiche, 49 % de rebond, et zéro vente sur le trimestre. Pas peu de ventes : zéro.
Et la même collection, mêmes produits, vendue dans la langue de l'autre marché, passait de 23,3 % à 37,6 % de clics vers les fiches. Quatorze points d'écart que seuls le merchandising et le design de la grille expliquent.
Ce guide est le quatrième de notre série d'audit CRO. La méthode reste la même : des points de contrôle scorés en impact et en coût, et des hypothèses prêtes à entrer dans votre programme de tests.
La mission de la page collection, elle, tient en une phrase posée dans le pilier : amener chaque visiteur·euse vers la bonne fiche produit, avec le moins de frictions possible. Tout ce qui suit audite cette phrase, morceau par morceau.
Les filtres : la moitié de l'audit
Huit points de contrôle de la checklist concernent les seuls filtres. Ce n'est pas un hasard : le filtre est l'interface par laquelle la client·e dit ce qu'elle veut, et chaque défaut de cette interface la condamne à scroller à la place de chercher.
Points à plus fort impact :
- Des filtres existent, et ils sont adaptés à chaque collection. Filtrer des robes par pointure ou des sneakers par longueur de manche : le filtre incohérent est pire que l'absence de filtre, parce qu'il prouve que personne ne regarde.
- Les filtres sont cumulables. Une cliente qui cherche « robe, soie, taille 38, sous 200 € » pose une seule question en quatre critères ; un système qui n'en accepte qu'un la force à quatre recherches.
- L'application est instantanée : pas de bouton « Valider », pas de rechargement qui renvoie en haut de page.
- Les critères actifs restent visibles en permanence et chacun se retire d'un clic, sans toucher aux autres.
- Sur mobile, où les filtres vivent dans un panneau, le bouton qui les ouvre reste accessible pendant le scroll, et le bouton d'application affiche le nombre de résultats en temps réel (« Voir 43 produits »). L'application instantanée vaut pour le desktop ; dans un panneau, le compteur joue le même rôle : on sait où l'on va avant d'y aller.
- Le design des filtres est cohérent sur tout le site : mêmes emplacements, mêmes comportements, d'une collection à l'autre.
- Le résultat d'un filtrage s'annonce aussi sans écran : une région
aria-livequi déclare « 43 produits affichés » rend l'application instantanée perceptible au lecteur d'écran. Même logique que la navigation clavier du checkout : depuis juin 2025, l'European Accessibility Act en fait une exigence, pas une délicatesse.
Deux pratiques complètent ces points, hors checklist mais documentées par les mêmes recherches : promouvoir deux ou trois filtres clés directement au-dessus de la grille (le Baymard Institute relève que 61 % des sites ne le font pas, alors que c'est souvent le filtre promu qui déclenche le premier geste), et afficher le nombre de résultats associé à chaque valeur de filtre, pour qu'aucun clic ne mène à une page vide.
Et quand l'impasse survient malgré tout, la page zéro résultat est un point de contrôle à part entière. Une grille vide avec pour seul message « Aucun produit ne correspond » est une invitation à quitter le site ; la même page devient récupérable si elle propose des sorties utiles :
- suggérer l'élargissement du critère le plus restrictif,
- afficher les collections connexes,
- montrer les produits populaires de la catégorie.
Le zéro résultat n'est d'ailleurs presque jamais un problème de design : c'est le symptôme d'une donnée produit incomplète, d'une taxonomie incohérente entre collections, ou de filtres qui posent des questions auxquelles le catalogue ne sait pas répondre.
La recherche interne connaît exactement la même mécanique d'échec par une autre porte d'entrée ; le prochain guide de cette série lui est consacré.
Si nous promouvons les deux filtres les plus utilisés (taille et couleur) au-dessus de la grille, en accès direct, alors le taux d'utilisation des filtres et le taux de clic vers les fiches produit augmenteront, parce que le filtre visible déclenche un geste que le filtre replié attend.
Le tri : un choix éditorial déguisé en réglage technique
Le sélecteur de tri est l'élément le plus sous-estimé de la page, pour une raison simple : la majorité des visiteur·euse·s ne le touche jamais.
Ce qui signifie que l'ordre par défaut est la décision de merchandising la plus vue de votre boutique, et qu'elle est souvent prise par personne : c'est l'ordre d'import du catalogue, ou un « featured » que plus personne ne maintient.
Points à plus fort impact :
- Des options de tri existent et couvrent les attributs qui comptent : prix, nouveauté, popularité, pertinence.
- Une sélection de produits populaires ouvre la collection. Les premiers produits vus conditionnent le jugement porté sur toute la collection ; on n'ouvre pas un rayon sur les fonds de stock.
L'ordre par défaut mérite mieux qu'un réglage unique : c'est un terrain de personnalisation. Trier par nouveautés pour les client·e·s qui reviennent chaque semaine et par best-sellers pour le trafic froid d'acquisition sont deux bonnes réponses à deux questions différentes — et la version la plus simple ne demande aucune app : faire atterrir les campagnes d'acquisition sur l'URL de la collection triée par best-sellers, pendant que la navigation interne garde les nouveautés.
C'est exactement le genre de segmentation que nous défendons dans cet article :
Robin Marzin
Plus loin s'ouvre un troisième palier, le tri personnalisé par le comportement individuel (ce que la session a déjà regardé, l'affinité de cohorte), accessible sur Shopify via des apps de merchandising : un chantier coût 2 à 3 dans notre grille, pertinent à partir d'un catalogue large et d'un trafic segmentable.
Statique, segmenté, personnalisé : trois paliers, et la plupart des boutiques gagnent déjà beaucoup à passer du premier au deuxième.
Si l'ordre par défaut affiche les best-sellers pour le trafic d'acquisition et les nouveautés pour les visiteur·euse·s connu·e·s, alors le taux de clic vers les fiches produit augmentera sur les deux segments, parce que chaque audience voit en premier ce qu'elle est venue chercher.
Les cartes produit : des fiches produit miniatures
Chaque carte de la grille est une fiche produit compressée en quelques centimètres carrés, et l'audit lui applique la même question : que faut-il savoir pour décider de cliquer, et tout cela est-il visible sans clic ?
Points à plus fort impact :
- La qualité des visuels est irréprochable : c'est le premier critère de clic, et la grille est l'endroit où les codes visuels de la marque se voient le plus. Trois marques que nous avons analysées, Polène, Rains et Jacquemus, gagnent une part de leur identité précisément là, dans la discipline de leurs grilles. Sur la préparation des images elles-mêmes, notre guide des visuels s'applique aux cartes autant qu'aux fiches.
- Les variations disponibles sont visibles sur la carte : pastilles de couleurs, mention des tailles restantes. Une cliente qui clique pour découvrir que sa taille n'existe pas vous facture la déception en confiance.
- Les informations clés s'affichent sans clic : prix évidemment, mais aussi la note moyenne quand elle existe et le badge qui situe le produit.
- Les badges (nouveau, best-seller, promotion, stock faible) sont utilisés avec parcimonie. Un badge oriente ; cinq badges décorent. La règle d'or : jamais plus d'un badge par carte, le plus informatif.
- Un bouton favoris sur la carte capture l'intention de celles et ceux qui ne sont pas prêt·e·s à acheter maintenant : visible au survol sur desktop, en permanence sur mobile. Ce clic vaut de l'or en aval, parce qu'il arme les emails les plus ciblés du cycle de vie : alerte baisse de prix, retour en stock, rappel post-visite.
Si les cartes affichent les pastilles de couleurs disponibles et la mention des tailles en stock, alors le taux de clic baissera légèrement mais le taux de conversion liste → panier augmentera, parce que les clics perdus étaient des déceptions programmées.
Le conteneur de ces cartes mérite la même attention que leur contenu. La hauteur d'attaque d'abord : les premières cartes sont visibles sans scroller.
Un hero éditorial plein écran transforme le rayon en affiche, et l'affiche se paie en produits vus — c'est l'un des diagnostics qui revient le plus souvent dans nos audits de collections servant de page d'atterrissage. Ensuite la densité : sur mobile, le nombre de colonnes se décide dans les données, pas dans la maquette : deux colonnes distribuent l'attention et servent les catalogues profonds aux ventes réparties ; une colonne la concentre et sert les catalogues courts portés par quelques héros.
La structure réelle de vos ventes (lisible dans GA4) désigne la bonne réponse avant tout test.
Si nous passons d'une à deux colonnes sur mobile pour les collections de plus de 30 références aux ventes réparties, alors le taux d'ajout au panier augmentera, parce que la découvrabilité d'un catalogue profond croît avec la densité de produits visibles.
Un défaut technique propre à cette page, enfin, invisible dans les maquettes et fréquent sur les thèmes Shopify : la première rangée de cartes chargée en lazy loading. L'image la plus grande au-dessus de la ligne de flottaison est presque toujours une carte produit, donc c'est elle qui détermine le LCP de la page ; la différer dégrade structurellement la performance à chaque chargement de collection.
La règle tient en une ligne : chargement immédiat pour la première rangée, lazy loading pour tout le reste. Le détail d'implémentation est couvert dans notre guide technique des images Shopify. C'est un défaut, pas une hypothèse : on le corrige.
Le retour : la friction invisible
Le parcours réel d'une page collection n'est pas linéaire, il est pendulaire : liste, fiche, retour à la liste, autre fiche. Chaque aller-retour est un cycle de la machine à trier, et c'est au retour que la machine casse le plus souvent.
- La position dans la liste est conservée au retour depuis une fiche produit. Revenir en haut d'une grille de 200 produits après en avoir consulté un seul, c'est demander à la cliente de refaire un travail qu'elle a déjà payé. Le pilier classe cette perte de contexte parmi les frictions les plus sous-estimées du e-commerce, et nos enregistrements de session le confirment : c'est dans ces boucles de navigation que les abandons se décident.
- Les filtres et le tri appliqués survivent eux aussi au retour. Une sélection patiemment construite qui s'efface à la première consultation de fiche transforme le filtre en piège.
Le guide CRO fiche produit pose le point de contrôle jumeau, vu de l'autre rive : un bouton retour qui ramène exactement d'où l'on vient, position de scroll comprise. Les deux pages partagent cette couture, et c'est elle qui casse en premier.
Pas d'hypothèse de test ici : un retour qui perd la position est un défaut, pas un choix. On le corrige.
La description de collection : trois lecteurs, deux étages
La description de collection a mauvaise réputation
La description de collection a mauvaise réputation, et elle la mérite souvent : un pavé SEO de 400 mots que personne ne lit, posé entre le titre et les produits comme un péage. Le point de contrôle de la checklist dit seulement qu'une section de description doit exister ; l'audit dit où et pour qui.
L'architecture qui réconcilie ces lecteurs tient en deux étages : une à deux phrases utiles sous le titre (ce que contient la collection, pour qui, ce qui la distingue), et le développement complet en bas de page, après la grille, où il nourrit le référencement sans coûter un centimètre d'écran aux produits. Le lecteur humain reçoit le contexte sans le péage ; le moteur, classique ou génératif, reçoit un texte qui définit la catégorie.
Deux précisions pour le lecteur machine
Côté code, les schemas CollectionPage et ItemList exposent à la fois la définition de la catégorie et la liste structurée des produits qu'elle contient, position, URL et image comprises : c'est le format dans lequel un agent IA lit une collection.
Côté texte, la description du bas de page travaille mieux quand elle définit que quand elle remplit : pour qu'un moteur génératif cite votre collection en réponse à « où trouver des robes en soie responsables », il lui faut un texte qui associe explicitement le contenu, la clientèle visée et les caractéristiques distinctives. Un paragraphe vague n'installe pas cette association ; une définition précise le fait, et elle se trouve être aussi le texte le plus utile à l'humain qui scrolle jusqu'ici.
Dernier arbitrage, à la frontière du SEO
Toutes les combinaisons de filtres ne doivent pas exister pour Google, mais une poignée de combinaisons à forte demande (« robes en soie », « manteaux en laine ») mérite mieux qu'une URL filtrée : une vraie sous-collection, avec sa propre description en deux étages. C'est la même décision que le catalogue effectif de la section suivante, prise par l'autre bout : ce que vos client·e·s cherchent assez souvent pour le filtrer mérite d'exister comme un rayon, pas comme un réglage.
Mesurer la page collection
Le taux de conversion global ne dit presque rien de cette page. Quatre indicateurs la jugent vraiment.
Le taux de clic liste → fiche produit d'abord : c'est la mission de la page, mesurée directement.
Le taux d'utilisation des filtres ensuite, avec sa déclinaison la plus parlante, le taux de résultats vides : chaque combinaison de filtres qui aboutit à zéro produit est une impasse que vous avez construite.
La profondeur de scroll enfin, croisée avec la position des produits cliqués : si 80 % des clics se concentrent sur la première rangée, votre ordre par défaut fait tout le travail, et le reste du catalogue est un entrepôt. La version actionnable de cette mesure est votre catalogue effectif : la profondeur à partir de laquelle la probabilité de clic s'effondre délimite le nombre de produits que vos visiteur·euse·s voient réellement, et la question qui en découle vaut une réunion de merchandising : maintenir 200 références dans une collection dont 8 sont vues, ou découper en sous-collections que l'on expose vraiment.
La marque d'artisanat de l'introduction donnait à cette question sa réponse la plus ironique : la collection la moins visitée de sa boutique (0,3 % du trafic) convertissait à 2,67 %, cinq fois la moyenne du site. Personne n'y était envoyé, et c'était la page la plus performante du catalogue. La mesure ne sert pas qu'à trouver ce qui casse ; elle sert aussi à trouver ce qu'on a caché.
Côté instrumentation, ces quatre indicateurs coûtent moins cher qu'ils n'en ont l'air : view_item_list et select_item existent nativement dans le e-commerce GA4 et donnent le taux de clic liste → fiche tel quel ; l'usage des filtres et le zéro résultat demandent deux événements personnalisés (le filtre appliqué avec ses critères, le compte de résultats quand il tombe à zéro). Une heure de GTM, et cette page cesse d'être aveugle.
Un croisement de cohortes complète le tableau : comparez la profondeur de scroll et le taux de clic entre les sessions avec filtres actifs et sans filtres. Un écart net confirme que vos filtres font leur travail ; un écart faible suggère que les filtres proposés ne correspondent pas aux critères de décision réels de votre clientèle, et c'est l'un des diagnostics les plus rapides à lire dans Clarity.
Les enregistrements de session complètent ces chiffres avec le pattern propre à cette page : les boucles. Une personne qui enchaîne liste, fiche, retour, fiche, retour à rythme accéléré ne se promène pas, elle ne trouve pas, et la cause est presque toujours en amont : des cartes qui ne disent pas assez, un tri qui montre les mauvais produits d'abord, des filtres qui ne posent pas la bonne question. La méthodologie complète de lecture de ces sessions est dans notre diagnostic Clarity.
FAQ
Quels filtres proposer sur une boutique de mode ?
Six filtres couvrent l'essentiel des parcours : la taille, la couleur, le prix, la matière, la coupe ou le style, et la disponibilité.
La taille et la couleur méritent un accès direct au-dessus de la grille. Chaque collection ajuste ensuite ses filtres à son contenu : filtrer par taille de bonnet n'a de sens qu'en lingerie, et un filtre sans objet dans une collection doit en disparaître.
Faut-il une description sur les pages collection ?
Oui, en deux étages : une à deux phrases de contexte sous le titre, et le développement complet en bas de page, après les produits.
Cette architecture sert les trois lecteurs de la page : la cliente qui veut du contexte sans obstacle, le moteur de recherche qui indexe la catégorie, et le moteur génératif qui a besoin d'un texte définissant la collection pour pouvoir la citer en réponse.
Pagination, scroll infini ou bouton « Voir plus » ?
Chaque option a un coût. La pagination donne des repères mais interrompt l'élan. Le scroll infini supprime l'interruption mais rend le footer inaccessible et fragilise la mémoire de position au retour.
Le bouton « Voir plus », combiné au chargement progressif des images, cumule les avantages des deux : l'élan est préservé, la position reste adressable, le footer reste atteignable. C'est le compromis que nous recommandons par défaut, à valider sur vos propres données de scroll.
Comment mesurer la performance d'une page collection ?
Quatre indicateurs :
- le taux de clic liste → fiche produit (la mission de la page, mesurée directement),
- le taux d'utilisation des filtres,
- sa déclinaison critique qu'est le taux de résultats vides,
- et la profondeur de scroll croisée avec la position des produits cliqués.
Le taux de conversion global ne juge pas cette page : il mélange son effet avec celui de la fiche produit et du checkout, qui se mesurent chacun avec leurs propres indicateurs.
Recevez la checklist complète
Les points de contrôle de la page collection, avec leurs scores d'impact et de coût, leurs explications et leurs exemples visuels, font partie de la checklist CRO de 194 points disponible dans une base Notion duplicable, réservée aux membres de Conversion Club.
Jérémie Werner
Prochain guide de la série : la recherche interne, dix points de contrôle pour le moteur que vos client·e·s les plus décidé·e·s utilisent en premier.
