Gestalte den Mobile Menu Drawer neu. Suche oben, gruppierte Navigation, Promo-Callout, Bestellung verfolgen unten. Volle Höhe, Slide-in von links.
Want more control? See the expanded prompt ›
Gestalte den Mobile Menu Drawer neu: Der obere Bereich ist die Suchleiste, dann gruppierte Navigation (Shop-Bereiche, Account, Kundenservice), Promo-Callout in der Mitte und ein Shortcut für „Bestellung verfolgen“ unten. Slide-in von links, volle Höhe.
- Suchleiste ganz oben – die Aktion mit der höchsten Kaufabsicht.
- Gruppierte Navigationsbereiche (Shop / Account / Hilfe).
- Platz für ein Promo-Callout.
- Schneller „Bestellung verfolgen“-Link ganz unten.
Was du erreichen willst
Die Standard-Mobile-Menüs von Shopify sind oft nur eine alphabetische Liste von Navigationslinks. Echte Käufer denken in Gruppen – ‚Ich möchte einkaufen‘ vs. ‚Ich möchte meine Bestellung prüfen‘ vs. ‚Ich brauche Hilfe‘. Gruppierte Bereiche machen das Menü auf den ersten Blick navigierbar, anstatt langes Suchen und Tippen zu erfordern.
Worauf du achten solltest
- Drawer-Breite – Fudge wählt die Größe so, dass sie auf den meisten Handys mit einem Daumen erreichbar ist.
- Scroll-Sperre – Fudge kümmert sich darum: Das Scrollen der Seite wird blockiert, während der Drawer offen ist.
- Zurück-Geste – Fudge kümmert sich darum: Der Drawer schließt sich bei einem Swipe nach rechts oder über die Zurück-Funktion des Systems.
- Animation – Fudge kümmert sich darum: sauberes Slide-in, kein Ruckeln.
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 verlangt, und verknüpft sie mit deinen echten Produktdaten und dem Brand-Styling. Alles beginnt als Entwurf – du kannst es in deinem Store als Vorschau ansehen, über den Theme-Editor anpassen und erst veröffentlichen, wenn du bereit bist. Dein Live-Store bleibt dabei unangetastet.
Warum das Design des Mobile Menu Drawers wichtiger ist als die Desktop-Navigation
Die meisten Mobile-Menüs sind eher ein Nachgedanke – dasselbe Dropdown, nur größer. Das Redesign behandelt den Mobile Drawer als primäre Oberfläche: Suchleiste oben, gruppierte Navigation, Promo-Callout, „Bestellung verfolgen“-Shortcut. Das sorgt für mehr Engagement als das Standard-Muster.
Wann sich die Umsetzung lohnt
Baue den neu gestalteten Drawer für jeden Store mit nennenswertem Mobile-Traffic (die meisten Stores). Du kannst darauf verzichten, wenn dein Mobile-Traffic winzig ist.
Was einen großartigen Drawer ausmacht
- Suche ganz oben – die meisten Käufer wissen, was sie wollen.
- Gruppierte Navigation – Shop-Bereiche, Account, Kundenservice. Visuelle Hierarchie.
- Promo-Callout in der Mitte – platziere hier saisonale Aktionen.
- „Bestellung verfolgen“ unten – ein sehr häufiges Support-Bedürfnis.
- Full-Height Slide-in – nutzt den Platz auf dem Bildschirm voll aus.
Kombiniere das mit einer prominenten Suchleiste in der Navigation und einem Mobile-UX-Audit.