E-commerce
26 juin 2026
Quand un catalogue grossit, le client ne veut pas « voir tout ». Il veut réduire le choix jusqu’à trouver le produit qui correspond à sa taille, son budget, son usage, sa couleur, sa compatibilité ou son délai.
Les filtres produits sont donc un outil de conversion, pas un détail de thème. Mal conçus, ils cachent les bons produits. Bien conçus, ils transforment une collection dense en parcours de choix clair.
Cet article #30 n’est pas un doublon de la fiche filtres produit. Il donne un playbook pratique pour prioriser, configurer, tester et mesurer les filtres sur un catalogue e-commerce, notamment Shopify.
Sommaire
Pourquoi les filtres produits influencent-ils la conversion ?
Un filtre utile réduit l’effort mental. Le client ne compare plus 160 produits, mais 12 options crédibles. Cette réduction du bruit accélère le clic produit, diminue les retours arrière et limite les questions pré-achat.
Shopify présente la navigation à facettes comme un moyen de faire gagner du temps aux acheteurs, tout en rappelant que son implémentation doit rester maîtrisée côté SEO (Shopify, faceted navigation).
L’angle de cet article est donc l’UX catalogue : comment aider à choisir plus vite, pas seulement définir ce qu’est un filtre.
Quels filtres choisir selon votre catégorie ?
Ne partez pas d’un template universel. Partez des questions que le client se pose avant d’acheter.
Mode : taille, couleur, coupe, matière, longueur, occasion, disponibilité
Mobilier : dimensions, pièce, matière, couleur, style, livraison, prix
Électronique : compatibilité, marque, connecteur, capacité, garantie, stock
Beauté : type de peau, ingrédient, parfum, format, routine, prix
Alimentaire : régime, allergènes, format, origine, conservation, lot
Méthode simple : prenez vos 50 derniers tickets ou chats pré-achat. Si une question revient plusieurs fois, elle mérite soit un filtre, soit une information visible sur la carte produit.
Ajoutez aussi les filtres qui évitent un mauvais achat : compatibilité, dimensions, allergènes, entretien, délai de livraison. Ils convertissent parfois moins de clics immédiats, mais évitent des retours coûteux.
Comment prioriser les facettes ?
L’ordre des filtres doit suivre la décision client, pas l’ordre alphabétique de vos attributs.
Placez d’abord le critère bloquant : taille, compatibilité, dimensions ou disponibilité.
Ajoutez ensuite le budget : prix, promotion, livraison offerte si pertinent.
Puis les préférences : couleur, matière, style, marque, note avis.
Gardez les filtres secondaires sous « Plus de filtres » si la liste devient longue.
BTNG Studio recommande d’ordonner les facettes par priorité décisionnelle : le filtre qui élimine le plus de produits non pertinents doit apparaître tôt (BTNG Studio, filter UX).
Quelles règles UX appliquer à la navigation facettée ?
OR dans une facette : Bleu OU rouge dans la couleur
AND entre facettes : Bleu ET taille M ET moins de 100 €
Comptages dynamiques : afficher Bleu (24), Taille M (8), etc.
Filtres actifs visibles : chips au-dessus de la grille avec suppression unitaire
Tout effacer : bouton accessible sans chercher
État conservé : retour navigateur et tri ne doivent pas supprimer les filtres
Broken Rubik résume bien les fondamentaux 2026 : logique OR/AND, comptages, chips actifs et drawer mobile sont les bases d’une bonne navigation facettée (Broken Rubik, faceted search).
Comment réussir l’expérience mobile ?
Sur mobile, les filtres doivent être visibles sans manger l’écran.
Pattern recommandé
Un bouton « Filtrer » au-dessus de la grille, un drawer plein écran ou une bottom sheet, puis un bouton sticky « Voir 37 résultats ». Les cases doivent être larges, lisibles et faciles à cocher au pouce.
Erreurs fréquentes
Slider prix trop fin : préférez aussi des tranches tap-friendly
Application à chaque clic : préférez appliquer après sélection sur mobile lent
Aucun résumé : le client oublie qu’il a déjà filtré
Bouton invisible : le drawer se ferme sans feedback clair
Testez avec un petit écran, une connexion moyenne et une vraie collection. Le dernier iPhone ne révèle pas les frictions de la majorité des clients.
Pensez accessibilité : libellés clairs, contraste suffisant, boutons de taille confortable et état sélectionné compréhensible sans couleur seule. Un filtre utilisable au clavier et au lecteur d’écran est souvent plus clair pour tout le monde.
Comment éviter les pages zéro résultat ?
Un zéro résultat après filtres est une sortie de route. Le client a fourni un effort, puis votre interface lui répond qu’il n’y a rien.
Prévenir : désactiver ou griser les valeurs qui mènent à zéro
Expliquer : message clair : aucun produit ne correspond à ces critères
Réparer : proposer de retirer le filtre le plus restrictif en un clic
Suggérer : montrer produits proches, best-sellers ou tailles voisines
Apprendre : analyser les combinaisons zéro résultat chaque mois
Si « Bleu + XL » revient souvent sans résultat, ce n’est pas seulement une question UX. C’est peut-être un signal assortiment, stock ou merchandising.
Comment configurer les filtres sur Shopify ?
Sur Shopify, commencez par l’app native Search & Discovery. Elle permet d’ajouter des filtres basés sur disponibilité, prix, type produit, options, métachamps et métaobjets.
Ordre pratique
Nettoyez vos données produits : tailles, couleurs, matières, compatibilités.
Créez des métachamps normalisés au lieu de tags libres quand l’attribut est important.
Ajoutez les filtres dans Search & Discovery.
Réordonnez par priorité client, pas par priorité interne.
Testez sur vos collections les plus visitées avant déploiement global.
Shopify précise que les filtres personnalisés peuvent s’appuyer sur options, métachamps ou métaobjets, avec des bonnes pratiques spécifiques pour les filtres visuels comme les couleurs (Shopify Help Center, filters).
Exemple : une boutique mono-marque n’a souvent pas besoin du filtre vendor, mais elle a besoin de taille, couleur, disponibilité et matière. Supprimer les filtres inutiles est aussi important qu’en ajouter de nouveaux.
Pourquoi les métachamps sont-ils plus propres que les tags ?
Les tags deviennent vite désordonnés : `bleu`, `Bleu`, `blue`, `couleur-bleu`. Un filtre construit sur ces valeurs renvoie une expérience incohérente.
Métachamp couleur : valeurs contrôlées et réutilisables
Métachamp matière : coton, lin, cuir, bois avec orthographe unique
Métachamp compatibilité : modèle ou appareil ciblé
Métachamp dimension : type numérique quand le filtre doit comparer
Booléens : vegan, rechargeable, étanche, made in France
Pour un grand catalogue, gardez une liste courte de métachamps universels. Un « méga-filtre » rempli d’attributs hétérogènes ralentit le choix au lieu de l’aider.
Avant migration, exportez vos produits en CSV et repérez les doublons de valeur : « coton bio », « Coton biologique », « organic cotton ». Décidez d’une valeur affichée, puis nettoyez en masse plutôt que produit par produit.
Comment gérer SEO et URLs filtrées ?
Les filtres peuvent générer des centaines de combinaisons d’URL. Toutes ne méritent pas d’être indexées.
Canonical : renvoyer les combinaisons faibles vers la collection principale
Noindex : éviter l’indexation des paramètres sans demande SEO
Pages dédiées : créer une vraie collection pour les requêtes utiles, par exemple robes lin été
URL lisibles : paramètres propres pour analytics, partage et retour navigateur
Search Console : surveiller le crawl excessif après refonte
La règle pragmatique : les filtres servent l’utilisateur, les pages éditoriales servent le SEO. Ne laissez pas des paramètres techniques devenir votre stratégie de longue traîne.
Quels KPI suivre pour améliorer les filtres ?
Taux d’usage : sessions collection avec au moins un filtre appliqué
Conversion filtrée : conversion sessions filtrées vs non filtrées
Zéro résultat : combinaisons qui ne renvoient rien
Temps jusqu’au clic produit : avant et après refonte filtres
Filtres inutilisés : facettes qui encombrent sans aider
Mobile drawer : ouvertures, abandons, clic sur appliquer
Ne jugez pas un filtre seulement sur son nombre de clics. Un filtre taille peut être peu glamour, mais décisif : si le client ne trouve pas sa taille, il n’achète pas.
Analysez aussi le temps après filtre : si les clients appliquent trois filtres puis quittent sans cliquer produit, l’ordre ou la qualité des résultats n’aide pas assez. Le bon filtre doit rapprocher du choix, pas seulement réduire la liste.
Comment Qstomy complète les filtres produits ?
Qstomy complète les filtres quand le client ne sait pas quel critère utiliser, ou formule son besoin en langage naturel.
Scénario DTC
Une boutique Shopify mode a 600 SKU et 8 collections principales. Après nettoyage des métachamps taille, matière et occasion, Qstomy répond aux questions comme « robe lin bleue pour mariage moins de 150 € » et renvoie vers la collection filtrée. Objectif pilote : 18 % de clics produit en plus sur les sessions assistées, 120 questions pré-achat résolues et 35 demandes taille évitées.
Qstomy ne remplace pas Search & Discovery : il traduit l’intention client en recommandation ou lien filtré. Voir assistant vente IA, intégration Shopify et demander une démo.
Quels playbooks appliquer cette semaine ?
Playbook 1 : auditer une collection
Choisissez votre collection la plus visitée. Listez les filtres visibles, leur ordre, leurs valeurs vides et le temps nécessaire pour trouver un produit précis.
Playbook 2 : nettoyer trois attributs
Normalisez taille, couleur et matière sur vos meilleurs produits. Remplacez les variantes incohérentes par des valeurs contrôlées.
Playbook 3 : corriger le mobile
Ajoutez un drawer clair, un bouton sticky « Voir X résultats » et des chips actifs visibles après fermeture.
Playbook 4 : récupérer zéro résultat
Ajoutez un message utile, un bouton retirer le filtre principal et des produits proches.
Maillage utile
Collection : optimiser une page collection Shopify
Searchandising : searchandising e-commerce
Produit : optimisation fiche produit
Glossaire : filtres produit
Enzo
26 juin 2026
