E-Commerce-Filter sollten widerspiegeln, wie Kunden auswählen: die Herkunft eines Kaffees, eine Rack-Serie oder das Futter einer Shorts. Diese Beispiele zeigen verschiedene Wege, diese Auswahlmöglichkeiten zu präsentieren. Achte darauf, was nach der Auswahl passiert, wenn Käufer das Ergebnis sehen und ihre Meinung ändern wollen.
GSI Outdoors wandelt angewendete Filter in Chips um und bietet eine „Remove All“-Aktion. Die Auswahlen bleiben auch in der URL erhalten. Kunden können nachvollziehen, warum sich die Ergebnisseite verkleinert hat, und eine Auswahl entfernen, ohne jede Filtergruppe erneut öffnen zu müssen.
Für deinen Shop
Zeige ausgewählte Werte genauso klar an wie die verfügbaren Optionen.
Intelligentsia gibt mobilen Filtern einen Full-Screen Drawer mit erweiterbaren Gruppen und einer Apply-Aktion unten. Die Studie hat die Ergebnis-Updates nicht vollständig getestet. Das Layout bietet Platz für mehrere Auswahlen, aber eine Umsetzung muss trotzdem zeigen, ob diese Änderungen noch ausstehen oder bereits angewendet wurden.
Für deinen Shop
Mache deutlich, ab wann Auswahlen wirksam werden.
TRNK erweitert seine Desktop-Filter zu einer Inline-Sidebar, und das Produkt-Grid fließt daneben neu. Die Möbel bleiben sichtbar, während Kunden die Auswahl eingrenzen. Der offene Zustand braucht genug Breite für nützliche Produktbilder, mit einem stabilen Übergang, wenn das Panel geöffnet oder geschlossen wird.
Für deinen Shop
Prüfe die Lesbarkeit der Produktkarten bei geöffneter Filter-Sidebar.
Smith Teamaker platziert Filter in einer Desktop-Toolbar und verschiebt sie auf Mobile in einen dedizierten Drawer. Die Labels bleiben erkennbar, während sich der Container ändert. Kunden müssen trotzdem wissen, ob die Auswahl einer Option das Grid sofort aktualisiert oder eine separate Apply-Aktion erfordert.
Für deinen Shop
Halte Filter-Labels auf Desktop und Mobile konsistent.
Borough Kitchen zeigt ausgewählte Filter als Chips über den Produkten an. Jeder Chip entfernt seine eigene Auswahl, sodass ein Kunde eine Kombination schrittweise wieder erweitern kann. Labels müssen auch außerhalb des ursprünglichen Dropdowns Sinn ergeben, besonders wenn derselbe Wert mehr als ein Attribut beschreiben könnte.
Für deinen Shop
Mache aktive Filter einzeln entfernbar und für sich allein verständlich.
Momentous verwendet Ziel-Tabs (Goal Tabs), die die Überschriften und Produktgruppen darunter verändern. Das ist eher ein geführtes Category Browsing als ein großes Set kombinierbarer Filter. Ein paar benannte Routen können gut zu einem kleinen Sortiment passen, wenn Kunden mit einem Ziel starten und Hilfe brauchen, um die relevante Gruppe zu finden.
Für deinen Shop
Nutze ein paar aussagekräftige Kategorien, wenn ein großes Filter-Panel unnötig wäre.
Athletic Brewing bietet Filter für Biersorte und Geschmacksprofil in seiner Desktop-Sidebar. Das Grid aktualisiert sich, sobald Auswahlen angewendet werden, wobei die aktiven Auswahlen darüber angezeigt werden. Diese Attribute entsprechen der Art und Weise, wie Kunden ein Getränk beschreiben würden, weshalb die Qualität und Konsistenz der zugrunde liegenden Produkt-Labels besonders wichtig ist.
Für deinen Shop
Baue Filter aus den Kriterien auf, die Kunden bei ihrer Auswahl nutzen.
Horizn Studios klappt Filter innerhalb der Collection-Seite auf. Auf dem Desktop werden die Gruppen in Spalten angeordnet; auf Mobile werden verschachtelte Bereiche genutzt. Die Produkte bleiben mit den Controls verbunden, auch wenn der ausgeklappte Bereich die Seite verlängert. Aktive Werte und ein klarer Schließ-Status helfen, dies von gewöhnlichem Collection-Inhalt zu unterscheiden.
Für deinen Shop
Nutze Inline-Filter für ein fokussiertes Set an Auswahlen und halte ihren Status sichtbar.
Our Place öffnet Desktop-Filter-Controls innerhalb des Layouts und verschiebt das Produkt-Grid daneben. Kunden können sowohl die Optionen als auch das Kochgeschirr sehen, während sie eine Auswahl treffen. Überprüfe die Kartengrößen in jedem Zustand, auch nach dem Schließen des Panels, damit das Grid durchgehend lesbar bleibt.
Für deinen Shop
Behalte nützliche Produktbilder bei, egal ob die Filter geöffnet oder geschlossen sind.
Ten Thousand aktualisiert die Ergebnis-Infos, während Kunden Größe, Farbe und Futter auswählen. Auf Mobile wird ein Full-Screen Drawer genutzt. Das Feedback zeigt, wenn eine Kombination die Auswahl deutlich eingegrenzt hat, bevor der Kunde zum Grid zurückkehrt. Updates müssen auch für Personen, die Assistenztechnologien nutzen, klar angesagt werden.
Für deinen Shop
Zeige, wie sich Auswahlen auf die Ergebnismenge auswirken, bevor das Filter-Panel verlassen wird.
REP Fitness behält „Apply Filters“ in einem fixierten unteren Bereich seines Mobile Drawers, mit „Clear All“ weiter oben. Die Optionen umfassen Rack-Serien. Das finale Ergebnis-Update wurde bei der Erfassung nicht vollständig getestet. Auf einem Smartphone muss der Aktionsbereich über den Device Insets sichtbar bleiben, während Gruppen aufgeklappt werden.
Für deinen Shop
Halte ausrüstungsspezifische Auswahlen und die Apply-Aktion auf einem Smartphone nutzbar.
Die mobilen Filter von The Foggy Dog wechseln von einer Gruppenliste zu einem dedizierten Options-Panel mit einer Zurück-Aktion. Auf dem Desktop werden Inline-Dropdowns verwendet. Der zusätzliche Screen gibt Optionen mehr Raum, aber die Gruppenliste muss Auswahl-Indikatoren behalten, wenn Kunden von einem Sub-Panel zurückkehren.
Für deinen Shop
Halte die Zurück-Navigation klar und ausgewählte Werte zwischen Panels sichtbar.
Nourished präsentiert Typ, Benefit und Sortierung als kompakte Selektoren. Im Capture ändern Filter den sichtbaren Bereich, während das Sortieren die Seite neu lädt. Dieser Unterschied wird leicht übersehen, wenn man nur das Aussehen betrachtet. Ausgewählte Werte und die Position des Kunden müssen jede Art von Update überstehen.
Für deinen Shop
Teste, wie jeder Selektor Ergebnisse aktualisiert und den aktuellen Status beibehält.
Proud Mary Coffee kombiniert Herkunfts- und Verarbeitungsfilter mit ausdrucksstarken Geschmacksgruppierungen. Erfahrene Käufer können technische Kriterien nutzen, während andere Besucher damit starten können, wie der Kaffee schmecken soll. Angewendete Auswahlen erscheinen als Chips und halten beide Ansätze in der resultierenden Auswahl sichtbar.
Für deinen Shop
Biete zugängliche Geschmacks-Labels neben präzisen technischen Filtern an.
Dinosaur Designs kombiniert erweiterbare Filtergruppen und aktive Chips mit einem Button ganz unten, der die Anzahl der passenden Artikel anzeigt. Die Zahl ändert sich mit den Auswahlen, und „Reset“ befindet sich im selben Aktionsbereich. Kunden können eine Kombination bewerten, bevor sie den Drawer schließen, auch dann, wenn sie zu restriktiv wird.
Für deinen Shop
Zeige die Anzahl der Treffer dort, wo Kunden zu den Produkten zurückkehren.
Proud Mary Coffee bietet Kunden sowohl Ursprungs- und Verarbeitungsfilter als auch aussagekräftigere Geschmacksgruppierungen. REP Fitness integriert Rack-Serien, eine praktische Unterscheidung für Käufer von Equipment. Die Labels funktionieren, weil sie Entscheidungen beschreiben, die spezifisch für diese Produkte sind. Ein kurzer Katalog benötigt vielleicht nur wenige geführte Wege, wie Momentous mit seinen Ziel-Tabs zeigt.
Bevor du die Steuerelemente gestaltest, überprüfe die dahinterliegenden Produktdaten. Führe doppelte Labels zusammen, fülle sinnvolle Lücken und entferne Attribute, die nicht dabei helfen, Artikel zu unterscheiden. Probiere dann Kombinationen aus, die ein Kunde auch tatsächlich wählen würde. Ein gut strukturiertes Filter-Panel wird trotzdem frustrierend, wenn gleichwertige Produkte inkonsistente Größen-, Material- oder Kompatibilitätswerte verwenden.
Ten Thousand aktualisiert die Ergebnisinformationen, während Kunden Größe, Farbe und Futterstoff auswählen. Dinosaur Designs platziert die Trefferanzahl und den Reset-Button im unteren Aktionsbereich. Dieses Feedback zeigt Käufern, wann eine Kombination zu einschränkend geworden ist, bevor sie zu den Produkten zurückkehren.
Andere erfasste Drawers nutzen eine „Anwenden“-Aktion. Mach deutlich, ob Änderungen noch ausstehen oder bereits im Grid abgebildet sind; die Aufzeichnungen von Intelligentsia und REP Fitness zeigten nicht jedes Ergebnis-Aktualisierungsverhalten. Lass die Auswahl nach dem Schließen des Panels sichtbar und entfernbar. GSI Outdoors und Borough Kitchen nutzen dafür aktive Chips. Teste eine Kombination ohne Ergebnisse, ohne die Auswahl des Kunden stillschweigend zu verwerfen.
Wähle Attribute, die Kunden vergleichen, und pflege sie konsistent für alle Produkte ein. Größe, Passform, Material, Kompatibilität und Verwendungszweck sind gute Kandidaten, wenn sie dabei helfen, Artikel in dieser Kollektion zu unterscheiden.
Sowohl sofortige Aktualisierungen als auch ein expliziter „Anwenden“-Button können funktionieren. Mach deutlich, wann die Auswahl wirksam wird, bewahre sie, wenn sich der Drawer schließt, und vermeide unerwartete Sprünge im Produkt-Grid.
Lass die aktive Auswahl sichtbar und erlaube den Kunden, einzelne zu entfernen oder alle zurückzusetzen. Erkläre, dass keine Produkte zur Kombination passen, anstatt die Filter stillschweigend zu ändern.
Filtern schränkt ein, welche Produkte angezeigt werden; Sortieren ändert ihre Reihenfolge. Nourished zeigt beide Steuerelemente mit unterschiedlichem Aktualisierungsverhalten in der Aufnahme. Bewahre die ausgewählten Werte und die Position des Käufers, wenn eines der Steuerelemente die Seite aktualisiert.
Zeige jede aktive Auswahl mit einer eigenen Entfernen-Aktion, wie GSI Outdoors und Borough Kitchen es mit Chips machen. Füge einen klar beschrifteten Reset für alle Filter hinzu. Ein Chip sollte das Attribut benennen, wenn der Wert sonst mehrdeutig wäre.
Gib Fudge ein Ziel und eine Referenz. Das Tool schlägt Änderungen für deinen Shop vor, erstellt einen Entwurf in deinem Shopify-Theme und gibt dir Rückmeldung. Du überprüfst jede Änderung, bevor sie live geht.
Sieh dir an, wie der Shop-Editor funktioniert