Optimiser une page collection Shopify : 6 corrections qui font cliquer
La page collection est souvent la première page qui doit vendre. Tri, filtres, produits par page, vignettes, mobile : les 6 corrections qui comptent et comment les faire sur Shopify.
Dans les tests utilisateurs du Baymard Institute, les sites dont les listes de produits étaient médiocres affichaient entre 67 et 90 % d'abandon pendant la recherche de produit. Avec des outils à peine optimisés, ce taux tombait entre 17 et 33 % (Baymard, recherche Product Lists & Filtering).
Mêmes produits. Mêmes prix. La seule différence : la façon dont la page liste aidait les gens à trouver ce qu'ils cherchaient.
Sur Shopify, cette page, c'est votre page collection. La plupart des marchands passent des semaines sur leurs fiches produit et laissent leurs collections en mode « grille par défaut du thème ». C'est une erreur. Pour une bonne partie de votre trafic (pub Meta qui pointe vers « Robes d'été », clic dans le menu, résultat Google sur « bougie parfumée artisanale »), la collection est la première page qui doit vendre.
Voici quoi corriger, dans quel ordre, et comment le faire avec les outils que Shopify fournit déjà.
Pourquoi la page collection mérite plus d'attention
Une page collection a un seul objectif : faire cliquer le client sur le bon produit, vite. Pas raconter l'histoire de la marque. Pas faire rêver. Réduire la distance entre « je cherche un truc » et « c'est celui-là ».
Baymard a audité 344 grands sites américains et européens : 36 % présentaient des défauts carrément nuisibles à la capacité des utilisateurs à trouver et choisir un produit (source). On parle de gros e-commerçants avec des équipes UX. Une boutique Shopify avec un thème jamais retouché a peu de chances de faire mieux.
La bonne nouvelle : la plupart des corrections se font dans les réglages, sans toucher au code.
Les 6 erreurs qui plombent une page collection
Tableau de diagnostic rapide. Chaque ligne vient des recherches de Baymard sur les listes produits, avec la part des sites étudiés qui se trompent (articles Baymard sur les listes produits).
Erreur | Part des sites concernés | Correction sur Shopify |
|---|---|---|
Pas les 4 tris clés (prix, note, meilleures ventes, nouveautés) | 64 % | Réglages de tri du thème + app d'avis compatible |
Au moins un des 5 types de filtres essentiels absent | 57 % | Filtres de l'app Search & Discovery |
Mauvais nombre de produits chargés par défaut | 52 % | Réglage « produits par page » du thème |
Pas de récapitulatif des filtres appliqués | 28 % | Option du thème ou mise à jour du thème |
Pas de filtre pour les infos affichées sur les vignettes | 38 % | Ajouter les filtres correspondants (couleur, taille, matière) |
Le client ne revient pas au même endroit après une fiche produit | 13 % | Éviter les scrolls infinis mal codés |
On les prend dans l'ordre où je les traiterais.
1. Commencez par le tri par défaut
C'est le gain le moins cher de la liste. Shopify trie une collection selon le réglage choisi dans l'admin (Produits > Collections > choisir la collection > Trier). Beaucoup de boutiques le laissent sur « Meilleures ventes » ou « Manuel » et n'y reviennent jamais.
Ce que je recommande :
- Collections principales : gardez « Meilleures ventes », mais vérifiez que la première ligne ne contient pas de produits en rupture ou à faible marge.
- Collection Nouveautés : tri par date, du plus récent au plus ancien.
- Collection Soldes : tri manuel, avec vos meilleures affaires et les produits dispo dans toutes les tailles en haut. Indispensable pendant les soldes d'hiver et d'été, quand le stock fond par taille.
Ensuite, laissez le client retrier lui-même. Baymard a constaté que 64 % des sites ne proposent pas les quatre tris prix, note, meilleures ventes et nouveautés. Le tri par note client est celui qui manque le plus souvent sur Shopify : vérifiez que votre thème et votre app d'avis le permettent vraiment.
2. Ajoutez les filtres que les gens utilisent vraiment
L'app gratuite Search & Discovery de Shopify gère les filtres sur tout thème compatible. D'après le centre d'aide Shopify, vous pouvez filtrer par disponibilité, catégorie, prix, type de produit, tags et fournisseur, ainsi que par options (taille, couleur) et par métachamps produit, catégorie ou variante.
La mise en place prend dix minutes :
- Dans l'admin, allez dans Applications > Search & Discovery > Filtres.
- Cliquez sur Ajouter un filtre et choisissez une source (par exemple l'option « Taille »).
- Renommez le libellé si besoin, regroupez les valeurs proches (« Marine », « Bleu foncé » dans « Bleu »), triez les valeurs.
- Enregistrez, puis glissez les filtres dans l'ordre voulu.
Quelques limites à connaître avant de construire votre stratégie de filtres :
- 25 filtres maximum par boutique, standards et personnalisés confondus.
- Les collections de plus de 5 000 produits n'affichent pas de filtres. Un gros catalogue doit être découpé en sous-collections.
- Un filtre affiche au maximum 100 valeurs sur la boutique.
- Par défaut, les valeurs d'un même filtre se combinent en OU et les filtres différents en ET. C'est le bon réglage : « Bleu OU Noir » en taille M.
Une remarque pour les boutiques bilingues (France et Belgique, ou Suisse romande et alémanique) : toujours selon Shopify, les valeurs des filtres Fournisseur et Tags ne sont pas traduites, et le filtre par tags n'apparaît que dans la langue par défaut. Si vous vendez en plusieurs langues, préférez les options produit ou les métachamps aux tags.
Quels filtres en priorité ? Baymard note que 38 % des sites n'ont pas de filtre pour des informations pourtant affichées sur leurs vignettes produit. Si vos vignettes montrent des pastilles de couleur, il vous faut un filtre couleur. Règle simple : chaque critère qui fait qu'un client écarte un produit mérite un filtre.
Sur une boutique de prêt-à-porter, je mettrais : Taille, Couleur, Prix, Disponibilité, puis un ou deux filtres métier comme Coupe ou Matière. Sur une boutique de cosmétiques : Type de peau, Besoin (hydratation, anti-âge), Prix, et pourquoi pas « Fabriqué en France » si c'est un argument chez vous. Restez sous les huit filtres par collection. Au-delà, c'est du bruit.
3. Réglez le bon nombre de produits par page
Baymard a constaté que 52 % des sites chargent un nombre de produits mal calibré par défaut. Trop peu : le client enchaîne les pages. Trop : la page devient lente et écrasante, surtout sur mobile.
La plupart des thèmes Shopify permettent de régler « Produits par page » dans le modèle de collection (Boutique en ligne > Thèmes > Personnaliser > modèle Collection). Il n'y a pas de chiffre magique. Avec 30 produits par collection, affichez tout. Avec 400, il faut une pagination ou un bouton « Afficher plus », couplés à de bons filtres.
Mon avis : préférez un bouton « Afficher plus » au scroll infini pur. Le scroll infini casse souvent le bouton retour, et Baymard a relevé que 13 % des sites ne ramènent pas l'utilisateur au même endroit de la liste quand il revient d'une fiche produit. Chaque retour en haut d'une grille de 200 produits vous fait perdre un peu plus le client.
4. Faites travailler les vignettes produit
La vignette (photo, nom, prix, éventuel badge) est l'endroit où se décide le clic. Les recherches de Baymard pointent plusieurs erreurs récurrentes :
- Pastilles couleur sur mobile : 57 % des sites n'affichent pas toutes les couleurs disponibles sur les vignettes mobiles pour les produits où le visuel compte. Si vous vendez un même article en plusieurs coloris, montrez-les sur la vignette. On a comparé deux apps de swatches Shopify dans ce comparatif.
- Prix à l'unité : 86 % des sites ne l'affichent pas pour les lots. Si vous vendez des packs (lot de 3 paires de chaussettes, cure de 60 gélules), le prix unitaire aide à comparer. En France, le consommateur y est habitué : il le voit sur chaque étiquette en grande surface.
- Nombre d'avis : seuls 5 % des sites l'omettent, preuve que c'est devenu un standard. Affichez les étoiles et le nombre d'avis, pas seulement les étoiles.
Gardez un style photo cohérent. Si la moitié de vos produits sont sur fond blanc et l'autre moitié en photos d'ambiance, la grille paraît brouillonne. Choisissez un style pour la première image et utilisez l'image au survol pour l'autre.
5. Affichez clairement les filtres appliqués
Quand un client sélectionne « Bleu », « Taille M » et « Moins de 50 € », il doit voir ces trois choix en haut de la liste, chacun avec une croix pour le retirer. Baymard a relevé que 28 % des sites zappent ce récapitulatif.
La plupart des thèmes Shopify récents l'intègrent. Si le vôtre ne le fait pas, c'est souvent le signe d'un thème vieillissant. Une mise à jour règle souvent ce point et plusieurs autres d'un coup.
6. Donnez du contexte à la collection (et du SEO)
Une courte description en haut de collection (deux ou trois lignes) remplit deux rôles : elle confirme au client qu'il est au bon endroit, et elle donne à Google du texte pour comprendre la page. Placez le texte SEO plus long en bas, sous la grille, pour ne pas repousser les produits.
À faire aussi :
- Une balise title et une meta description uniques par collection, rédigées avec les mots de vos clients (« pull col roulé femme » plutôt que « Collection Hiver Mode »).
- Des données structurées si votre thème le permet. Notre guide du balisage schema sur Shopify détaille l'essentiel.
- La vitesse de chargement. Une page collection charge des dizaines d'images, elle est souvent plus lourde qu'une fiche produit. Voir notre analyse vitesse et conversion.
Page collection sur mobile : les vérifications à faire
C'est sur petit écran que les pages collection souffrent le plus. Testez sur votre propre téléphone, pas dans un navigateur de bureau rétréci :
- Les filtres s'ouvrent dans un tiroir, pas dans une longue liste au-dessus des produits.
- Deux produits par ligne, avec noms et prix lisibles. Un seul par ligne rend la navigation pénible.
- Les boutons Filtrer et Trier restent visibles (collants) pendant le scroll.
- Les zones cliquables sont assez grandes. Des pastilles couleur grosses comme une tête d'épingle ne servent à rien.
- L'ajout rapide au panier fonctionne pour les produits sans variante, mais ne le forcez pas sur ceux qui demandent un choix de taille.
Comment mesurer l'effet de vos changements
Ne refaites pas tout d'un coup. Changez une chose, attendez deux à quatre semaines, regardez les chiffres.
Les indicateurs que je suivrais par collection, dans Shopify Analytics ou GA4 :
Indicateur | Ce qu'il vous dit |
|---|---|
Taux de clic collection vers fiche produit | La grille donne-t-elle envie de cliquer ? |
Taux d'utilisation des filtres | Les filtres servent-ils, ou sont-ils ignorés ? |
Taux de sortie sur la collection | Les gens abandonnent-ils ici ? |
Conversion des sessions qui arrivent sur la collection | Vend-elle quand c'est la page d'entrée ? |
Les heatmaps aident énormément. Si les visiteurs scrollent au-delà des deux premières lignes sans cliquer, c'est votre tri ou vos vignettes qui coincent. S'ils ouvrent le tiroir de filtres et le referment aussitôt, vos filtres ne correspondent pas à ce qu'ils cherchent. Notre guide des heatmaps Shopify explique comment les lire.
Après le clic : ne gâchez pas le travail
Une bonne page collection envoie des visiteurs plus qualifiés vers vos fiches produit. Si ces fiches sont faibles, vous n'avez fait que déplacer la fuite. Assurez-vous que la fiche termine le travail : description claire (voir notre méthode pour une fiche produit qui convertit), avis visibles, offre par quantité ou pack quand c'est pertinent. Des outils comme ConvertX ajoutent bundles et upsells sur la fiche produit, mais rien de tout ça ne compte si personne ne clique depuis la collection.
La liste de priorités, si vous n'avez qu'un après-midi
- Vérifiez le tri par défaut de vos 5 plus grosses collections.
- Installez Search & Discovery et configurez Taille, Couleur, Prix, Disponibilité.
- Vérifiez que les filtres appliqués s'affichent en haut sur mobile.
- Réglez le nombre de produits par page et testez le bouton retour depuis une fiche produit.
- Rédigez une description de deux lignes pour chaque collection principale.
Trois heures de travail, à peu près. À mon avis, c'est l'un des après-midis les plus rentables que vous puissiez passer sur une boutique Shopify : la collection se trouve entre votre trafic et vos fiches produit, et presque personne ne l'optimise.
Questions fréquentes
Visez quatre à huit filtres par collection : les universels (taille, couleur, prix, disponibilité) plus un ou deux propres à la catégorie. L'app Search & Discovery autorise jusqu'à 25 filtres par boutique au total, standards et personnalisés confondus.
Les causes les plus fréquentes citées par Shopify : votre thème n'est pas compatible avec les filtres Search & Discovery, ou la collection dépasse 5 000 produits, auquel cas les filtres ne sont pas affichés. Découper la collection en sous-collections règle le second cas.
Un bouton « Afficher plus » est généralement le choix le plus sûr. Le scroll infini pur casse souvent le bouton retour, et Baymard a relevé que 13 % des sites ne ramènent pas l'utilisateur au même endroit de la liste après la consultation d'une fiche produit.
Selon Shopify, les valeurs des filtres Fournisseur et Tags ne sont pas traduites et le filtre par tags n'apparaît que dans la langue par défaut. Pour une boutique en français et en néerlandais ou en allemand, appuyez-vous plutôt sur les options produit et les métachamps.
Oui. Une courte introduction en haut rassure le client et donne aux moteurs de recherche du texte pour comprendre la page. Gardez le texte long sous la grille de produits pour ne pas repousser les produits vers le bas.