Wichtigste Erkenntnisse
- Das mobile Menü verwendet standardmäßig dieselbe Navigation wie die Desktop-Version.
- Die Einstellungen für das Aussehen des mobilen Menüs findest du im Theme-Editor im Abschnitt „Header“.
- Du kannst den Stil des Hamburger-Icons und das Verhalten des Drawers im Theme-Editor ändern.
- Für eine komplett andere mobile Navigation (andere Links oder ein anderes Layout) benötigst du Code oder Fudge.
Um das mobile Menü in Shopify zu ändern, bearbeitest du die Links unter Onlineshop > Navigation > Hauptmenü und das Icon, den Drawer-Stil sowie die Schalter unter Onlineshop > Themes > Anpassen > Header. Desktop und Mobile teilen sich dasselbe Menü, es sei denn, dein Theme erlaubt es, ein separates Menü zuzuweisen.
Warum du uns vertrauen kannst
Wir haben hunderte von Shopify-Storefronts erstellt und angepasst. Wir entwickeln auch Fudge, den KI-Operator für Shopify-Stores, mit einer Bewertung von 4.9 im Shopify App Store.
So änderst du die Einstellungen für das mobile Menü im Theme-Editor
Das Aussehen des mobilen Menüs wird im Theme-Editor konfiguriert, nicht im Navigationsbereich.
Schritt 1. Gehe zu Onlineshop > Themes > Anpassen.
Schritt 2. Klicke in der linken Seitenleiste auf den Bereich Header.
Schritt 3. Suche nach Einstellungen für das mobile Menü. Je nach Theme siehst du vielleicht:
- Menü-Icon-Stil - Hamburger (drei Linien) vs. X-Icon, Icon-Größe
- Mobiles Menü-Typ - Drawer (fährt von der Seite rein) vs. Overlay (bedeckt den ganzen Bildschirm)
- Social-Media-Links im mobilen Menü anzeigen - Toggle/Schalter
- Länder-/Sprachauswahl im mobilen Menü anzeigen - Toggle/Schalter
- Eine Einstellung für das Mobile Menü, in der du ein spezielles Menü für Mobilgeräte zuweisen kannst (bei manchen Themes)
Schritt 4. Mache deine Änderungen und speichere.
Links im mobilen Menü - standardmäßig wie auf dem Desktop
Standardmäßig verwendet Shopify das Hauptmenü sowohl für die Desktop- als auch für die mobile Navigation. Alle Änderungen, die du unter Onlineshop > Navigation > Hauptmenü vornimmst, gelten für beide.
Das ist für die meisten Stores völlig ausreichend. Wenn du auf dem Smartphone jedoch dieselben Links in einer anderen Reihenfolge oder komplett andere Links haben möchtest, musst du entweder:
- Der mobilen Navigation ein anderes Menü zuweisen (falls dein Theme dies unterstützt)
- Code verwenden, um andere Inhalte bedingt anzuzeigen
Wie du die Links selbst hinzufügst, umbenennst und verschachtelst, erfährst du unter Navigationsmenüs in Shopify bearbeiten.
So weist du dem mobilen Menü ein anderes Menü zu
Einige Themes (besonders Premium-Themes) lassen dich in den Header-Einstellungen im Theme-Editor ein separates Menü für die mobile Navigation festlegen. Wenn du im Header-Bereich eine Option wie „Mobiles Menü“ (Mobile menu) oder „Sekundäres Menü“ (Secondary menu) siehst, kannst du:
- Ein neues Menü unter Onlineshop > Navigation erstellen (z. B. „Mobile Navigation“)
- Die gewünschten Links speziell für mobile Geräte einrichten
- Dieses neue Menü im Theme-Editor > Header in den Einstellungen fürs mobile Menü zuweisen
Wenn dein Theme diese Option nicht bietet, sind für eine spezielle mobile Navigation Code-Änderungen nötig.
Das Aussehen des mobilen Menüs mit Code anpassen
Für tiefergehende Anpassungen – eine individuelle Drawer-Breite, andere Schriftgrößen auf dem Handy, einen fixierten (sticky) mobilen Header mit eigenen Icons oder eine Navigationsleiste am unteren Rand – musst du die Liquid- und CSS-Dateien des Theme-Headers bearbeiten.
Häufige Anpassungen des mobilen Menüs per Code:
- Navigationsleiste am unteren Rand (Bottom Tab Bar) – eine fixierte Leiste unten mit Icons für Startseite, Shop, Suche, Warenkorb, Konto
- Vollbild-Overlay mit zentrierten Links und großem Text
- Benutzerdefinierter Schließen-Button (Position oder Stil)
- Suchleiste innerhalb des mobilen Menü-Drawers
- Schnellzugriff-Links oben im mobilen Drawer (Konto, Bestellung verfolgen usw.)
Fudge, der KI-Operator für Shopify-Stores, macht diese Änderungen anhand einer simplen Beschreibung in seinem Store-Editor: „Füge auf mobilen Geräten eine Navigationsleiste am unteren Rand ein, mit Icons für Startseite, Kategorien, Suche und Warenkorb. Sie soll am unteren Bildschirmrand fixiert sein.“ Fudge schreibt den Header-Code als Entwurf, sodass du die neue Navigation auf deinem Handy ausprobieren kannst, bevor du sie veröffentlichst. Zu kleine Tipp-Flächen (Tap Targets) und Layouts, die auf kleinen Bildschirmen kaputt gehen, gehören ebenfalls zu den Dingen, die es überprüft, wenn du Fudge bittest, herauszufinden, warum mobile Käufer abspringen.
Das Hamburger-Icon - was das ist und wie du es änderst
Das Hamburger-Icon (drei horizontale Linien) ist der Button, der das mobile Menü öffnet. Im Theme-Editor > Header kannst du möglicherweise:
- Seine Größe ändern
- Einstellen, ob daneben ein Text-Label („Menü“) angezeigt wird
- Seine Farbe ändern (wird oft von der Textfarbe im Header geerbt)
Für ein komplett eigenes Icon – ein SVG-Icon, ein anderes Symbol oder eine eigene Animation – musst du das Liquid-Template des Headers bearbeiten.
Mobiles Menü und Ladegeschwindigkeit
Das mobile Menü wird oft schon im HTML der Seite geladen, auch wenn es nicht geöffnet ist (es ist dann nur per CSS versteckt). Das bedeutet, dass der Menüinhalt die Ladezeit der Seite nicht signifikant beeinflusst. Apps, die Menüfunktionen hinzufügen, können jedoch JavaScript laden, das die Performance sehr wohl beeinträchtigt.
Wenn dir aufgefallen ist, dass das mobile Menü nach der Installation einer Navigations-App langsamer geworden ist, prüfe, ob das Skript der App verzögert (deferred) geladen werden kann. Die meisten App-Entwickler können dir dabei weiterhelfen.
Wenn Menü-Links schwer anzutippen sind, lies dir durch, wie du Shopify-Buttons tippfreundlicher machst.
Dein mobiles Menü testen
Teste deine Änderungen immer auf einem echten Mobilgerät – nicht nur, indem du das Browserfenster verkleinerst. Das Skalieren des Browsers simuliert Touch-Events, die Schriftdarstellung oder den echten mobilen Viewport nicht genau.
Nutze die mobile Emulation der Chrome DevTools für einen schnellen Check und überprüfe es danach auf echten iOS- und Android-Geräten, bevor du die Änderung als erledigt ansiehst.
FAQ
Warum zeigt mein mobiles Shopify-Menü nicht dieselben Links wie auf dem Desktop?
Einige Themes (oft Premium-Themes) lassen dich in den Header-Einstellungen separate Haupt- und mobile Menüs zuweisen. Wenn du dem mobilen Platz ein anderes Menü zugewiesen hast, weicht es vom Desktop ab. Suche im Theme-Editor → Header nach der Option "Mobiles Menü" oder "Sekundäres Menü" und richte es an deinem Hauptmenü aus, wenn beide identisch sein sollen.
Kann ich das mobile Menü so einstellen, dass es sich beim Hovern statt beim Tippen öffnet?
Nein. Touch-Geräte unterstützen Hover-Events nicht so, wie es Geräte mit Maus tun — es gibt keinen konsistenten "Hover"-Zustand beim Antippen mit dem Finger. Das mobile Menü muss durch Tippen (Tap-to-open) geöffnet werden. iOS emuliert den Hover-Zustand zwar für manche Interaktionen, aber das ist für die Navigation zu unzuverlässig.
Wie füge ich Icons neben den mobilen Menüpunkten hinzu?
Der Shopify-Navigationseditor verarbeitet nur reinen Text — für Icons benötigst du Code. Beschreibe es Fudge ("füge Lucide-Icons neben den mobilen Menüpunkten basierend auf ihrem Handle hinzu") und es bearbeitet das Header-Liquid, um je nach URL oder Handle ein bedingtes SVG pro Menüpunkt auszugeben. Manuell: Schreibe eine Bedingung im Header-Liquid, die basierend auf der URL oder dem Titel jedes Links ein Icon auswählt.
Sollte ich eine Suchleiste in den mobilen Menü-Drawer einbauen?
Ja, bei Stores mit über 30 SKUs – die Suche macht in Stores mit großem Sortiment einen signifikanten Teil der mobilen Sessions aus. Bei handverlesenen Marken mit unter ca. 30 SKUs sorgt die Suche eher für Unübersichtlichkeit ohne großen Mehrwert. Wenn deine Kunden viel suchen, behalte die Suche gut sichtbar im Header; ansonsten platziere sie im Drawer, um den Header aufgeräumt zu halten.
Kann ich den Link zum Kundenkonto zum mobilen Menü hinzufügen?
Die meisten modernen Themes integrieren Account-/Login-Links automatisch im mobilen Drawer, wenn Kundenkonten aktiviert sind (Einstellungen → Kundenkonten). Wenn deins das nicht macht, füge den Link manuell über Onlineshop → Navigation → Hauptmenü (oder dein mobiles Menü) hinzu und trage /account als URL ein.
