Les filtres e-commerce doivent refléter la façon dont les clients choisissent : une origine de café, une série de racks ou la doublure d'un short. Ces exemples montrent plusieurs façons de présenter ces choix. Faites attention à ce qui se passe après la sélection, lorsque les acheteurs ont besoin de voir le résultat et de changer d'avis.
GSI Outdoors transforme les filtres appliqués en pastilles et propose une action Remove All (Tout effacer). Les sélections sont également conservées dans l'URL. Les clients peuvent voir pourquoi les résultats se sont affinés et supprimer un choix sans avoir à rouvrir chaque groupe de filtres.
Pour votre boutique
Affichez les valeurs sélectionnées aussi clairement que les options disponibles.
Intelligentsia dote ses filtres sur mobile d'un tiroir en plein écran avec des groupes extensibles et une action Appliquer en bas. L'étude n'a pas entièrement testé les mises à jour des résultats. La mise en page offre de la place pour faire plusieurs choix, mais l'implémentation doit toujours indiquer si ces changements sont en attente ou déjà appliqués.
Pour votre boutique
Rendez explicite le moment où les sélections prennent effet.
TRNK déploie ses filtres sur ordinateur dans une barre latérale intégrée, et la grille de produits se réorganise à côté. Les meubles restent visibles pendant que les clients affinent la sélection. L'état ouvert nécessite suffisamment de largeur pour avoir des images de produits utiles, avec une transition stable lors de l'ouverture ou de la fermeture du panneau.
Pour votre boutique
Vérifiez la lisibilité des cartes produits lorsque la barre latérale de filtres est ouverte.
Smith Teamaker place ses filtres dans une barre d'outils sur ordinateur et les déplace dans un tiroir dédié sur mobile. Les libellés restent reconnaissables bien que le conteneur change. Les clients ont tout de même besoin de savoir si choisir une option met immédiatement à jour la grille ou nécessite une action Appliquer distincte.
Pour votre boutique
Gardez des libellés de filtres cohérents entre l'ordinateur et le mobile.
Borough Kitchen affiche les filtres sélectionnés sous forme de pastilles au-dessus des produits. Chaque pastille supprime son propre choix, permettant au client d'élargir progressivement une combinaison. Les libellés doivent avoir du sens en dehors de leur menu déroulant d'origine, surtout lorsque la même valeur pourrait décrire plusieurs attributs.
Pour votre boutique
Rendez les filtres actifs individuellement supprimables et compréhensibles par eux-mêmes.
Momentous utilise des onglets d'objectifs qui modifient les titres et les groupes de produits en dessous. Il s'agit plutôt d'une navigation guidée par catégorie que d'un grand ensemble de filtres combinables. Quelques parcours bien nommés peuvent convenir à une petite gamme lorsque les clients commencent avec un objectif et ont besoin d'aide pour trouver le groupe pertinent.
Pour votre boutique
Utilisez quelques catégories pertinentes lorsqu'un grand panneau de filtres serait inutile.
Athletic Brewing propose des filtres de style de bière et de profil de saveur dans sa barre latérale sur ordinateur. La grille se met à jour à mesure que les choix sont appliqués, avec les sélections actives affichées au-dessus. Ces attributs correspondent à la façon dont les clients décrivent une boisson, rendant la qualité et la cohérence des libellés de produits sous-jacents particulièrement importantes.
Pour votre boutique
Créez des filtres à partir des critères que les clients utilisent pour choisir.
Horizn Studios déploie les filtres directement dans la page de collection. Sur ordinateur, les groupes sont disposés en colonnes ; sur mobile, ce sont des sections imbriquées. Les produits restent liés aux commandes, bien que la zone étendue ajoute de la hauteur à la page. Des valeurs actives et un état de fermeture clair aident à le distinguer du contenu de collection ordinaire.
Pour votre boutique
Utilisez des filtres intégrés pour un ensemble de choix ciblé et gardez leur état visible.
Our Place ouvre les commandes de filtres sur ordinateur à l'intérieur de la mise en page et décale la grille de produits à côté. Les clients peuvent voir à la fois les options et les ustensiles de cuisine tout en faisant leur sélection. Vérifiez la taille des cartes dans chaque état, y compris après la fermeture du panneau, pour que la grille reste lisible de bout en bout.
Pour votre boutique
Conservez des images de produits utiles, que les filtres soient ouverts ou fermés.
Ten Thousand met à jour les informations sur les résultats au fur et à mesure que les clients choisissent la taille, la couleur et la doublure. Sur mobile, un tiroir en plein écran est utilisé. Ce retour montre quand une combinaison a considérablement réduit le choix avant que le client ne retourne à la grille. Les mises à jour doivent également être annoncées clairement aux personnes utilisant des technologies d'assistance.
Pour votre boutique
Montrez comment les sélections affectent les résultats avant de quitter le panneau de filtres.
REP Fitness garde Apply Filters (Appliquer les filtres) dans une zone fixe en bas de son tiroir mobile, avec Clear All (Tout effacer) vers le haut. Les options incluent les séries de racks. La mise à jour du résultat final n'a pas été entièrement testée dans la capture. Sur un téléphone, la zone d'action doit rester visible au-dessus des encoches de l'appareil à mesure que les groupes s'étendent.
Pour votre boutique
Gardez les choix spécifiques à l'équipement et l'action Appliquer utilisables sur un téléphone.
Les filtres mobiles de The Foggy Dog passent d'une liste de groupes à un panneau d'options dédié avec une action retour. L'ordinateur utilise des menus déroulants intégrés. L'écran supplémentaire donne plus de place aux options, mais la liste des groupes doit conserver des indicateurs de sélection lorsque les clients reviennent d'un sous-panneau.
Pour votre boutique
Gardez la navigation de retour claire et les valeurs sélectionnées visibles entre les panneaux.
Nourished présente le type, le bénéfice et le tri sous forme de sélecteurs compacts. Dans la capture, les filtres modifient la sélection visible tandis que le tri recharge la page. Cette différence est facile à manquer si l'on ne se fie qu'à l'apparence. Les valeurs sélectionnées et la position du client doivent survivre à l'un ou l'autre type de mise à jour.
Pour votre boutique
Testez la façon dont chaque sélecteur met à jour les résultats et préserve l'état actuel.
Proud Mary Coffee combine des filtres d'origine et de traitement avec des regroupements de saveurs expressifs. Les acheteurs expérimentés peuvent utiliser des critères techniques, tandis que les autres visiteurs peuvent commencer par le goût qu'ils recherchent dans leur café. Les choix appliqués apparaissent sous forme de pastilles, gardant les deux approches visibles dans la sélection finale.
Pour votre boutique
Proposez des libellés de saveurs accessibles aux côtés de filtres techniques précis.
Dinosaur Designs combine des groupes de filtres extensibles et des pastilles actives avec un bouton en bas indiquant le nombre d'articles correspondants. Le nombre change avec les sélections, et le bouton Reset (Réinitialiser) se trouve dans la même zone d'action. Les clients peuvent évaluer une combinaison avant de fermer le tiroir, y compris lorsqu'elle devient trop restrictive.
Pour votre boutique
Affichez le nombre de correspondances à l'endroit où les clients retournent vers les produits.
Proud Mary Coffee offre aux clients à la fois des filtres d’origine et de traitement, ainsi que des regroupements de saveurs plus expressifs. REP Fitness inclut des séries de racks, une distinction pratique pour les acheteurs d’équipement. Les étiquettes fonctionnent car elles décrivent des décisions spécifiques à ces produits. Un catalogue plus restreint ne nécessitera peut-être que quelques parcours guidés, comme le montre Momentous avec ses onglets d’objectifs.
Avant de concevoir les commandes, examinez les données produit qui les sous-tendent. Fusionnez les étiquettes en double, comblez les lacunes importantes et supprimez les attributs qui n’aident pas à distinguer les articles. Essayez ensuite des combinaisons qu’un client pourrait réellement choisir. Un panneau de filtres bien espacé devient vite frustrant si des produits équivalents utilisent des valeurs de taille, de matériau ou de compatibilité incohérentes.
Ten Thousand met à jour les informations sur les résultats pendant que les clients sélectionnent la taille, la couleur et la doublure. Dinosaur Designs place le nombre de résultats correspondants et le bouton Réinitialiser dans sa zone d’action inférieure. Ce retour d’information permet aux acheteurs de voir quand une combinaison est devenue trop restrictive avant de retourner aux produits.
D’autres tiroirs capturés utilisent une action Appliquer. Précisez clairement si les modifications sont en attente ou déjà reflétées dans la grille ; les enregistrements d’Intelligentsia et de REP Fitness n’ont pas permis d’établir tous les comportements de mise à jour des résultats. Après avoir fermé le panneau, gardez les choix visibles et supprimables. GSI Outdoors et Borough Kitchen utilisent des pastilles actives à cet effet. Testez une combinaison à zéro résultat sans annuler silencieusement les sélections du client.
Choisissez des attributs que les clients comparent et renseignez-les de manière cohérente sur tous les produits. La taille, la coupe, le matériau, la compatibilité et l'usage prévu sont de bons candidats lorsqu'ils aident à distinguer les articles de cette collection.
Les mises à jour immédiates et un bouton explicite Appliquer peuvent tous deux fonctionner. Indiquez à quel moment les choix prennent effet, conservez-les lorsque le tiroir se ferme et évitez les sauts inattendus dans la grille de produits.
Gardez les sélections actives visibles et permettez aux clients d'en supprimer une ou de toutes les réinitialiser. Expliquez qu'aucun produit ne correspond à la combinaison au lieu de modifier silencieusement les filtres.
Le filtrage réduit le nombre de produits affichés ; le tri modifie leur ordre. Nourished expose les deux commandes, avec un comportement de mise à jour différent dans la capture. Conservez les valeurs sélectionnées et la position de l'acheteur lorsque l'une des commandes met la page à jour.
Affichez chaque choix actif avec sa propre action de suppression, comme le font GSI Outdoors et Borough Kitchen avec des pastilles. Ajoutez une option de réinitialisation clairement étiquetée pour l'ensemble. Une pastille doit nommer l'attribut lorsque sa valeur serait autrement ambiguë.
Donnez à Fudge un objectif et une référence. Il suggère des modifications pour votre boutique, prépare un brouillon dans votre thème Shopify et vous fait un retour. Vous examinez chaque changement avant sa mise en ligne.
Découvrez comment fonctionne l'éditeur de boutique