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.
Was du im Theme Editor ändern kannst
Hamburger-Icon-Stil
Die meisten Themes lassen dir die Wahl zwischen:
- Linien (klassischer Hamburger) — drei horizontale Linien
- Linien + Label („Menü“-Text neben dem Icon)
- Icon-Variationen — einige Themes bieten alternative Icon-Styles an
Die Label-Option kann Nutzern helfen, die mit dem Hamburger-Icon-Muster nicht vertraut sind, insbesondere einer älteren Zielgruppe.
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 nicht beim Tippen außerhalb. Dies ist ein JavaScript-Problem. Prüfe, ob ein Update für dein Theme verfügbar ist — dies wird in neueren Versionen oft behoben.
Untermenüs funktionieren auf Mobile nicht. Dropdown-Menüs, die auf Hover-Zuständen basieren, funktionieren nicht auf Touchscreens. Dein Theme sollte Hover-Dropdowns auf Mobile in ein Tap-to-Expand-Verhalten umwandeln. Wenn nicht, ist dies eine Theme-Einschränkung.
Menüpunkte zu klein zum Tippen. Tap-Ziele sollten mindestens 44x44px groß sein (Apple-Richtlinie). Wenn Menü-Links zu eng wirken, 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.
Menü überlappt Inhalte. Z-Index-Konflikt mit einer App oder einem benutzerdefinierten Bereich. Untersuche dies 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. Eigener Code macht Sinn, wenn du Folgendes benötigst:
- Eine Tab-Bar am unteren Rand (wie bei einer nativen App) anstelle eines Hamburger-Menüs
- Eine Tab-Navigation mit Icons für jede Kategorie
- Unterschiedliche Menüstrukturen je Kundengruppe (eingeloggt vs. Gast)
Diese Anforderungen gehen über die Standard-Theme-Anpassung hinaus, sind aber mit Fudge einfach umsetzbar.
