Das Wichtigste in Kürze
- Das Verhalten des mobilen Menüs wird im Theme-Editor im Abschnitt „Header“ gesteuert.
- Gängige Optionen sind der Stil des Hamburger-Icons, Drawer (Schubladen-Menü) vs. Vollbild-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 ist nur eine Annäherung und bildet nicht jedes Tippverhalten exakt ab.
Um das Verhalten des mobilen Menüs in Shopify zu ändern, gehe zu Onlineshop > Themes > Anpassen, wechsle zur Smartphone-Vorschau und wähle den Abschnitt „Header“ aus. Bei den meisten Themes kannst du dort den Menüstil (Drawer oder Vollbild), die Platzierung der Suche und einen Sticky-Header ohne Code einstellen.
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
Drawer-Menü (Schublade) – gleitet von links (oder rechts) herein und legt sich über den Inhalt. Beliebt bei den meisten modernen Shopify-Themes. So sehen die Nutzer, dass sie die Seite nicht verlassen haben.
Vollbild-Menü – nimmt im geöffneten Zustand den gesamten Bildschirm ein. Funktioniert gut für Shops mit großen Navigationsbäumen, wo du mehr Platz brauchst, um alle Kategorien anzuzeigen.
Suche nach dieser Einstellung unter Header → Mobiler Menüstil (der genaue Name variiert je nach Theme).
Sichtbarkeit der Suchleiste auf Mobile
Oft kannst du steuern, 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 über Desktop)
Wenn Käufer viel suchen, lass die Suche im Header sichtbar; andernfalls packe sie ins Drawer-Menü, damit der Header aufgeräumt bleibt.
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 Mobilgeräten andere Links haben möchtest – zum Beispiel einen „Anrufen“-Link auf Mobile, aber nicht auf dem Desktop, oder eine vereinfachte Kategorienliste – hast du zwei Optionen:
Option A – Erstelle ein separates mobiles Menü. Gehe zu Onlineshop → Navigation → Menü hinzufügen. Erstelle ein Menü namens „Mobile Navigation“ mit den gewünschten Links. In einigen Themes kannst du dieses Menü dann gezielt dem mobilen Navigationsplatz in den Header-Einstellungen 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ü im Vergleich zum Desktop erscheint, ist benutzerdefinierter Code erforderlich. Fudge, der KI-Operator für Shopify-Shops, kann ihn für dich schreiben. Beschreibe die Änderung in seinem Store Editor:
„Zeige einen ‘Anrufen’-Button im mobilen Menü an, der nicht in der Desktop-Navigation erscheint.“
Fudge schreibt das Menü als nativen Code in dein Theme und speichert es als Entwurf. So kannst du die Vorschau auf deinem Handy öffnen und testen, bevor etwas online geht. Wenn es bei den Käufern nicht gut ankommt, kannst du die Änderung mit einem Klick rückgängig machen.
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. Benutzerdefinierter Code ist sinnvoll, wenn du Folgendes brauchst:
- Eine untere Navigationsleiste (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 je nach Kundengruppe (eingeloggt vs. Gast)
Wenn du zuerst ein Standard-Dropdown-Menü brauchst, starte hier: So erstellst du ein Dropdown-Menü in Shopify. Um bestimmte Inhalte auf Mobilgeräten auszublenden, anstatt das Menü zu ändern, lies dir den Artikel über das Ausblenden von Inhalten auf Mobilgeräten in Shopify durch.
FAQ
Warum schließt sich mein mobiles Menü nicht, wenn ich daneben tippe?
Meistens ist das ein JavaScript-Bug in einer älteren Theme-Version oder eine installierte App stört die Click-Outside-Handler. Prüfe, ob es ein Update für dein Theme gibt – moderne Themes wie Dawn, Sense und Refresh machen das richtig. Wenn du eine Navigations-App installiert hast, deaktiviere sie vorübergehend, um herauszufinden, ob sie die Ursache ist.
Kann ich statt eines Hamburger-Menüs eine sticky Navigationsleiste unten (wie bei einer nativen App) haben?
Nur wenige Themes haben so etwas eingebaut. Eine Möglichkeit: Beschreibe Fudge was du willst ("Füge eine am unteren Rand fixierte mobile Navigation mit Home, Shop, Suche und Warenkorb-Icons hinzu, auf Desktop ausgeblendet") und es generiert den Abschnitt als nativen Theme-Code. Die Umsetzung an sich ist einfach – ein unten fixierter Container, 3-5 Icon-Links, nur für Mobile über eine Media Query sichtbar – aber in den meisten Themes muss es eben gebaut und kann nicht einfach per Schalter aktiviert werden.
Warum klappen meine Dropdown-Menüs auf dem Handy nicht auf?
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“ (Tippen zum Aufklappen) um. Wenn deins das nicht tut, ist dein Theme veraltet – entweder du updatest es, oder du fügst JavaScript hinzu, das beim Antippen eine "open"-Klasse hinzuschaltet.
Wie groß sollten die Tippbereiche (Tap Targets) im mobilen Menü sein?
Apple empfiehlt mindestens 44x44 Points und Googles Material Design 48x48dp. Zu enge Menülinks führen zu Fehltipps. Erhöhe lieber das Padding (Innenabstand) der Navigationslinks, anstatt die Schriftgröße zu vergrößern.
Sollte ich eine Suchleiste im mobilen Menü anzeigen?
Für Shops mit vielen Produkten: ja – viele mobile Käufer bevorzugen die Suche gegenüber dem Durchstöbern von verschachtelten Menüs. Für kuratierte Marken mit weniger als ca. 30 Artikeln sorgt die Suche eher für Unordnung ohne klaren Nutzen. Wenn deine Kunden viel suchen, lass die Suche im Header sichtbar; ansonsten packe sie ins Drawer-Menü, damit der Header aufgeräumt bleibt.
