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. Eigener Code macht Sinn, wenn du Folgendes benötigst:
- Eine Bottom Navigation Bar (wie bei einer nativen App) anstelle eines Hamburger-Menüs
- Eine Tab-Navigation mit Icons für jede Kategorie
- Unterschiedliche Menüstrukturen pro Kundengruppe (eingeloggt vs. Gast)
Wenn du zuerst ein Standard-Dropdown-Menü benötigst, starte mit So erstellst du ein Dropdown-Menü in Shopify. Um bestimmte Inhalte auf Mobilgeräten auszublenden, anstatt das Menü zu ändern, siehe Inhalte auf Mobilgeräten in Shopify ausblenden.
Diese Anpassungen gehen über die Standard-Theme-Konfiguration hinaus, sind mit Fudge aber unkompliziert machbar.
