Verschiebe Kategorie-Filter auf Mobilgeräten in einen Slide-In-Drawer. Filter-Button mit Zähler-Badge, „Alle löschen“, Sticky Anwenden.
Want more control? See the expanded prompt ›
Ersetze die Inline-Kategorie-Filter auf Mobilgeräten durch einen „Filter“-Button, der einen Slide-In-Drawer von rechts öffnet. Zeige ein Zähler-Badge auf dem Button, einen „Alle löschen“-Link im Drawer und einen Sticky „Anwenden“-CTA am unteren Rand.
- Der Filter-Button zeigt die Anzahl der aktiven Filter als Badge.
- Slide-In-Drawer vom rechten Rand.
- Sticky Anwenden-CTA am unteren Rand des Drawers.
- „Alle löschen“ kehrt in den ungefilterten Zustand zurück.
Was du erreichen willst
Mobile Inline-Filter fressen wertvollen Scroll-Platz und zwingen Käufer dazu, gleichzeitig zu scannen und zu filtern. Ein Off-Canvas-Drawer ermöglicht es ihnen zu stöbern, sich für einen Filter zu entscheiden, in eine fokussierte Filter-Ansicht einzutauchen und mit Ergebnissen zurückzukehren — drei separate Schritte, die jeweils einfacher sind als die zusammengefasste Version.
Worauf du achten solltest
- Touch-Ziele — Fudge kümmert sich darum: Filter-Chips sind für Daumen-Tipps dimensioniert.
- Drawer-Höhe — Fudge kümmert sich darum: Standardmäßig volle Höhe; als Bottom-Sheet konfigurierbar.
- Scroll Lock — Fudge kümmert sich darum: Scrollen der Seite wird blockiert, solange der Drawer offen ist.
- Zurück-Geste — Fudge kümmert sich darum: Der Drawer schließt sich bei Swipe nach rechts oder System-Zurück-Geste.
Wie Fudge das macht
Fudge dupliziert dein Live-Theme in einen Entwurf, baut die Section als bearbeitbare Shopify-Section mit der Platzierung und dem Verhalten, das dein Prompt vorgibt, und verknüpft sie mit deinen echten Produktdaten und deinem Marken-Styling. Alles startet als Entwurf — schau dir die Vorschau in deinem Store an, nimm Anpassungen über den Theme-Editor vor und veröffentliche erst, wenn du bereit bist. Dein Live-Store bleibt dabei unangetastet.
Warum mobile Kategorie-Filter in ein Drawer-Menü gehören
Inline-Filter funktionieren auf dem Desktop, wo Platz ist. Auf dem Smartphone quetschen sie das Produkt-Grid ein und sorgen für eine vertikale Scroll-Fatigue (Scroll-Müdigkeit). Das Off-Canvas-Drawer-Pattern – Filter-Button → Slide-In-Drawer → Anwenden → Schließen – gibt mobilen Käufern die volle Grid-Breite zurück.
Wann sich die Umsetzung lohnt
Baue die Off-Canvas-Filter für jeden Shop mit mobilem Kategorie-Traffic und relevanter Filternutzung. Bei Shops, in denen Kunden nie filtern, kannst du es weglassen.
Was es großartig macht
- Filter-Button mit Zähler-Badge (Applied-Count) — zeigt, wie viele Filter aktiv sind.
- Slide-In von rechts — gängiges Mobile-Pattern.
- „Alle löschen“-Link (Clear all) — Escape-Hatch zum Zurücksetzen.
- Sticky „Anwenden“-CTA unten — bestätigt die Änderungen.
Kombiniere das mit Tag-basierten Filtern und Sortierung und einem Mobile UX Audit.