Wichtige Erkenntnisse
- Das Verhalten des mobilen Menüs wird im Theme Editor im Bereich Header gesteuert.
- Zu den gängigen Optionen gehören der Stil des Hamburger-Icons, Drawer- vs. Full-Screen-Menü und die Sichtbarkeit der Suchleiste.
- Unterschiedliche Menüpunkte für Mobile vs. Desktop erfordern benutzerdefinierten Code oder Fudge.
- Teste die mobile Navigation immer auf einem echten Gerät — die Vorschau im Theme Editor kommt zwar nah ran, bildet aber nicht alle Tap-Verhaltensweisen exakt ab.
Die mobile Navigation ist eines der meistgenutzten Elemente in deinem Shopify-Store. Ein schwerfälliges Menü macht es Käufern schwerer, Produkte zu finden, was weniger Conversions bedeutet. Die gute Nachricht ist, dass die meisten Themes dir eine sinnvolle Kontrolle darüber geben, wie sich das mobile Menü verhält — ganz ohne Code.
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
Oft kannst du steuern, ob die Suchleiste erscheint:
- Im mobilen Header (immer sichtbar)
- Innerhalb des Drawers/Menüs (nur sichtbar, wenn das Menü offen ist)
- Komplett ausgeblendet (Suche nur über Desktop)
Für produktintensive Stores lohnt es sich, eine sichtbare Suchleiste auf Mobile beizubehalten — viele Shopper 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, die mit den Click-Outside-Handlern kollidiert. Prüfe, ob es ein Update für dein Theme gibt – die modernen Versionen von Dawn, Sense und Refresh kommen damit problemlos klar. Wenn du eine Navigations-App installiert hast, deaktiviere sie vorübergehend, um herauszufinden, ob sie die Ursache ist.
Nativ in keinem Standard-Shopify-Theme. Der schnellste Weg: Beschreibe Fudge einfach, was du haben möchtest ("füge eine fixierte Mobile-Navigation unten mit Home-, Shop-, Such- und Warenkorb-Icons hinzu, die auf dem Desktop verborgen ist"), und es generiert die Section als nativen Theme-Code. Der Aufbau selbst ist simpel – ein fixierter Container unten, 3–5 Icon-Links, mobile-only per Media Query – aber er muss eben programmiert werden; kein Theme bietet das als einfache Einstellung an.
Das Theme verwendet Hover-basierte Dropdowns, die auf Touchscreens nicht funktionieren. Moderne Shopify-Themes wandeln Hover-Dropdowns auf Mobilgeräten automatisch in Tap-to-Expand um. Wenn deines das nicht macht, ist dein Theme veraltet – mache entweder ein Update oder füge JavaScript hinzu, das beim Antippen (Tap) eine "open"-Klasse toggled.
Apples HIG und Googles Material Guidelines empfehlen beide mindestens 44x44px (oder ca. 48x48dp). Zu enge Menü-Links führen zu Fehleingaben ("Mistapping"), besonders bei der Zweidaumen-Bedienung. Erhöhe lieber das Padding bei den Navigationslinks, anstatt einfach nur die Schrift größer zu machen.
Bei Shops mit vielen Produkten: ja – viele Mobile-Shopper ziehen die Suche dem Durchklicken von verschachtelten Menüs vor. Bei kuratierten Marken mit unter ~30 SKUs sorgt die Suche nur für Unübersichtlichkeit ohne klaren Mehrwert. Schau dir deine Suchanalysen an: Wenn die mobile Suche mehr als 10 % der Sessions ausmacht, solltest du sie lieber gut sichtbar im Header lassen, anstatt sie hinter dem Hamburger-Menü zu verstecken.
