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
Inline Mobile-Filter nehmen wertvollen Platz beim Scrollen ein 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, einen fokussierten Filter-Screen zu öffnen und mit den Ergebnissen zurückzukehren: drei separate Schritte, von denen jeder einfacher ist als die kombinierte Variante.
Worauf du achten solltest
- Touch Targets: Filter-Chips sind groß genug, um sie mit dem Daumen anzutippen.
- Drawer-Höhe: standardmäßig volle Höhe, oder als Bottom Sheet, wenn du das bevorzugst.
- Scroll-Sperre: Die Seite im Hintergrund scrollt nicht mehr, solange der Drawer geöffnet ist.
- Zurück-Geste: Der Drawer schließt sich bei einem Wisch nach rechts oder über die 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 Badge für aktive Filter — zeigt, wie viele Filter angewendet wurden.
- Slide-in von rechts — Standard-Muster für Mobile.
- „Alle löschen“-Link im Inneren — Reset-Notausgang.
- Sticky „Anwenden“ CTA unten — bestätigt die Änderungen.
Kombiniere das mit tag-basierten Filtern und Sortierung und dem Mobile UX-Audit.
Fudge baut das als Teil seiner Merchandising-Arbeit.