Das Wichtigste in Kürze
- Das Verhalten des Mobile-Menüs wird im Theme-Editor unter dem Bereich Header gesteuert.
- Zu den gängigen Optionen gehören der Hamburger-Icon-Style, Drawer- vs. Full-Screen-Menü und die Sichtbarkeit der Suchleiste.
- Unterschiedliche Menüpunkte für Mobile und Desktop erfordern Custom Code oder Fudge.
- Teste die Mobile-Navigation immer auf einem echten Gerät – die Vorschau im Theme-Editor ist nur eine Annäherung und bildet nicht alle Tap-Verhaltensweisen exakt ab.
Die Mobile-Navigation ist eines der am häufigsten genutzten Elemente in deinem Shopify-Store. Ein unübersichtliches Menü macht es Käufern schwerer, Produkte zu finden, was direkt zu weniger Conversions führt. Die gute Nachricht: Die meisten Themes geben dir richtig viel Kontrolle darüber, wie sich das Mobile-Menü verhält – ganz ohne an den Code zu müssen.
Wie ändere ich die mobile Ansicht bei Shopify?
Beginne mit der mobilen Vorschau im Theme Editor. Gehe zu Online-Shop → Themes → Anpassen und klicke dann auf das Smartphone-Icon oben im Editor. Navigiere zum Bereich Header in der linken Seitenleiste, um auf die Einstellungen für das mobile Menü zuzugreifen.
Verwandt: Hide Content on Mobile in Shopify.
Verwandt: Change the Mobile Menu in Shopify.
Was du im Theme Editor ändern kannst
Hamburger-Icon-Stil
Bei den meisten Themes hast du die Wahl zwischen:
- Linien (klassisches Hamburger-Menü) — drei horizontale Linien
- Linien + Label (der Text „Menü“ neben dem Icon)
- Icon-Variationen — einige Themes bieten alternative Icon-Stile an
Die Label-Option kann Nutzern helfen, die mit dem Hamburger-Icon nicht vertraut sind, insbesondere einem älteren Publikum. Eine vollständige Anleitung zum Bearbeiten von Inhalten und Links im mobilen Menü findest du unter So änderst du das mobile Menü in Shopify.
Menü-Typ — Drawer vs. Full-Screen
Dies ist die einflussreichste Einstellung:
Drawer-Menü — gleitet von links (oder rechts) herein und legt sich über den Inhalt. Beliebt bei den meisten modernen Shopify-Themes. Nutzer sehen so, dass sie die Seite nicht verlassen haben.
Full-Screen-Menü — nimmt beim Öffnen den gesamten Bildschirm ein. Eignet sich gut für Stores mit großen Navigationsbäumen, bei denen du mehr Platz brauchst, um alle Kategorien anzuzeigen.
Suche nach dieser Einstellung unter Header → Mobiler Menüstil (Name variiert je nach Theme).
Sichtbarkeit der Suchleiste auf Mobile
Du kannst oft einstellen, ob die Suchleiste angezeigt wird:
- Im mobilen Header (immer sichtbar)
- Im Drawer/Menü (nur sichtbar, wenn das Menü geöffnet ist)
- Komplett ausgeblendet (Suche nur auf dem Desktop)
Bei Shops mit vielen Produkten lohnt es sich, eine sichtbare Suchleiste auf mobilen Geräten beizubehalten – viele Käufer nutzen eher die Suche als die Navigation.
Sticky Header auf Mobile
Einige Themes ermöglichen es dir, den Header für Mobile und Desktop unabhängig voneinander zu steuern. Ein Sticky Header auf Mobile sorgt dafür, dass deine Navigation beim Scrollen erreichbar bleibt. Suche nach „Sticky Header“ in den Einstellungen des Header-Bereichs.
Wie ändere ich den Menüstil?
Schritt 1 — Öffne den Theme Editor. Online-Shop → Themes → Anpassen.
Schritt 2 — Wähle den Bereich Header aus. Klicke in der linken Seitenleiste auf „Header“ oder klicke auf den Header-Bereich im Vorschaufenster.
Schritt 3 — Durchsuche die Einstellungen. Suche im rechten Bereich nach Abschnitten mit der Bezeichnung „Mobiles Menü“, „Navigation“ oder „Menü“. Die genauen Bezeichnungen hängen von deinem Theme ab.
Schritt 4 — Wechsle zur mobilen Vorschau. Klicke auf das Smartphone-Icon, um das Ergebnis im Kontext zu sehen.
Schritt 5 — Speichern.
Ändern, welche Links auf Mobile erscheinen
Shopify verwendet standardmäßig dasselbe Navigationsmenü für Desktop und Mobile. Wenn du auf Mobile andere Links möchtest — zum Beispiel einen „Rufen Sie uns an“-Link auf Mobile, aber nicht auf dem Desktop, oder eine vereinfachte Kategorieliste — hast du zwei Optionen:
Option A — Erstelle ein separates mobiles Menü. Gehe zu Online-Shop → Navigation → Menü hinzufügen. Erstelle ein Menü „Mobile Navigation“ mit den gewünschten Links. In einigen Themes kannst du dieses Menü dann in den Header-Einstellungen speziell dem Slot für die mobile Navigation zuweisen.
Nicht alle Themes unterstützen ein separates mobiles Menü. Prüfe dazu die Dokumentation deines Themes.
Option B — Nutze Code oder Fudge. Für die volle Kontrolle darüber, was im mobilen Menü vs. Desktop erscheint, ist benutzerdefinierter Code erforderlich. Beschreibe Fudge, was du möchtest:
„Zeige einen ‚Rufen Sie uns an‘-Button im mobilen Menü an, der in der Desktop-Navigation nicht erscheint.“
Fudge generiert den Code als Entwurf zur Überprüfung, bevor er live geht.
Häufige Probleme mit dem mobilen Menü und Lösungen
Das Menü schließt sich nicht beim Tippen außerhalb. Das ist ein Problem mit dem JavaScript-Verhalten. Prüfe, ob ein Update für dein Theme verfügbar ist – in neueren Versionen ist dies oft behoben.
Untermenüs funktionieren mobil nicht. Dropdown-Menüs, die auf Hover-Zuständen basieren, funktionieren auf Touchscreens nicht. Dein Theme sollte Hover-Dropdowns auf Mobilgeräten in ein Tap-to-Expand-Verhalten umwandeln. Wenn das nicht der Fall ist, liegt eine Theme-Beschränkung vor.
Menüpunkte sind zu klein zum Antippen. Tap-Ziele sollten mindestens 44x44px groß sein (Apples Guideline). Wenn sich Menü-Links zu eng anfühlen, prüfe die Einstellungen im Theme Editor für die Größe der Menüpunkte oder die Schriftgröße. Per CSS kann auch das Padding der Nav-Links erhöht werden. In unserem Guide Shopify-Buttons klickfreundlicher machen findest du detaillierte Lösungen.
Menü überlappt Inhalte. Dies ist oft ein Z-Index-Konflikt mit einer App oder einer Custom Section. Überprüfe das mit den Browser-DevTools und erhöhe den Z-Index des Menü-Overlays.
Wann eine benutzerdefinierte mobile Navigation sinnvoll ist
Der Theme-Editor deckt die meisten Anwendungsfälle ab. Custom Code ergibt Sinn, wenn du Folgendes brauchst:
- Eine Bottom Navigation (wie bei einer Native App) anstelle eines Hamburger-Menüs
- Eine Tab-Navigation mit Icons für jede Kategorie
- Unterschiedliche Menüstrukturen je nach Kundengruppe (eingeloggt vs. Gast)
Wenn du zuerst ein Standard-Dropdown-Menü brauchst, schau dir wie man ein Dropdown-Menü in Shopify erstellt an. Um bestimmte Inhalte auf Mobilgeräten zu verstecken, anstatt das Menü zu ändern, siehe Inhalte auf Mobilgeräten in Shopify verstecken.
Das geht über die Standard-Theme-Anpassung hinaus, ist mit Fudge aber ganz unkompliziert.
FAQ
Meistens ein JavaScript-Bug in einer älteren Theme-Version, oder eine installierte App stört die Click-Outside-Handler. Prüfe, ob ein Update für dein Theme verfügbar ist – moderne Themes wie Dawn, Sense und Refresh handhaben das richtig. Wenn du eine Navigations-App installiert hast, deaktiviere sie vorübergehend, um zu testen, ob sie die Ursache ist.
Nicht nativ in einem Standard-Shopify-Theme. Der schnellste Weg: Beschreibe Fudge was du willst ("Füge eine fixed-bottom mobile nav mit Home-, Shop-, Search- und Cart-Icons hinzu, auf dem Desktop ausgeblendet") und es generiert die Section als nativen Theme-Code. Der Aufbau selbst ist simpel – Fixed-Bottom-Container, 3–5 Icon-Links, nur mobil per Media Query – aber es muss eben gebaut werden; kein Theme bietet das als Einstellung an.
Das Theme nutzt Hover-basierte Dropdowns, die auf Touchscreens nicht funktionieren. Moderne Shopify-Themes wandeln Hover-Dropdowns auf mobilen Geräten automatisch in Tap-to-Expand um. Wenn deins das nicht tut, ist dein Theme älter – entweder du updatest es oder fügst JavaScript hinzu, das beim Antippen eine "open"-Klasse toggelt.
Die HIG von Apple und die Material Guidelines von Google empfehlen beide mindestens 44x44px (oder grob 48x48dp). Zu eng stehende Menü-Links führen zu Fehltipps, besonders wenn man mit zwei Daumen tippt. Erhöhe lieber das Padding bei den Nav-Links, anstatt die Schrift größer zu machen.
Bei Shops mit vielen Produkten: ja – viele mobile Shopper bevorzugen die Suche gegenüber verschachtelten Menüs. Für kuratierte Brands mit unter 30 SKUs sorgt die Suche eher für Unübersichtlichkeit ohne klaren Nutzen. Schau dir deine Such-Analytics an: Wenn die mobile Suche 10%+ der Sessions ausmacht, lass sie im Header sichtbar, anstatt sie hinter dem Hamburger-Icon zu verstecken.
