Das Wichtigste auf einen Blick
- Das mobile Menü verwendet standardmäßig dieselbe Navigation wie die Desktop-Version.
- Einstellungen für das Erscheinungsbild des mobilen Menüs finden Sie im Theme-Editor > Header-Bereich.
- Sie können den Hamburger-Icon-Stil und das Verhalten des Drawers im Theme-Editor ändern.
- Für eine komplett andere mobile Navigation (andere Links oder Layout) benötigen Sie Code oder Fudge.
Auf Mobilgeräten klappen die meisten Shopify-Themes die Header-Navigation in ein Hamburger-Menü zusammen, das einen Drawer oder ein Overlay öffnet. Hier erfahren Sie, wie Sie es anpassen können.
Warum Sie uns vertrauen können
Wir haben hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer 5,0-Bewertung im Shopify App Store.
So ändern Sie die Einstellungen für das mobile Menü im Theme-Editor
Das Erscheinungsbild des mobilen Menüs wird im Theme-Editor konfiguriert, nicht im Bereich Navigation.
Verwandt: Make Shopify Buttons More Tap-Friendly.
Verwandt: Create a Dropdown Menu in Shopify.
Schritt 1. Gehen Sie zu Onlineshop > Themes > Anpassen.
Schritt 2. Klicken Sie in der linken Seitenleiste auf den Bereich Header.
Schritt 3. Suchen Sie nach Einstellungen für das mobile Menü. Je nach Theme sehen Sie eventuell:
- Menü-Icon-Stil – Hamburger (drei Linien) vs. X-Icon, Icon-Größe
- Mobiler Menütyp – Drawer (gleitet von links herein) vs. Overlay (deckt den gesamten Bildschirm ab)
- Social-Media-Links im mobilen Menü anzeigen – Umschalter
- Land/Sprachauswahl im mobilen Menü anzeigen – Umschalter
- Eine Mobiles Menü-Einstellung, in der Sie ein spezifisches Menü für die mobile Ansicht zuweisen können (einige Themes)
Schritt 4. Nehmen Sie Ihre Änderungen vor und speichern Sie diese.
Links im mobilen Menü – standardmäßig wie auf Desktop
Standardmäßig verwendet Shopify das Hauptmenü sowohl für die Desktop- als auch für die mobile Navigation. Alle Änderungen, die Sie unter Onlineshop > Navigation > Hauptmenü vornehmen, gelten für beide.
Für die meisten Shops ist das völlig ausreichend. Wenn Sie jedoch die gleichen Links in einer anderen Reihenfolge auf dem Handy oder völlig andere Links auf dem Handy wünschen, müssen Sie entweder:
Passend dazu: Navigationsmenüs in Shopify bearbeiten.
- Der mobilen Navigation ein anderes Menü zuweisen (sofern Ihr Theme dies unterstützt)
- Code verwenden, um Inhalte bedingt unterschiedlich anzuzeigen
So weisen Sie dem Handy ein anderes Menü zu
Manche Themes (insbesondere Premium-Themes) ermöglichen es Ihnen, in den Header-Einstellungen des Theme-Editors ein separates Menü für die mobile Navigation zuzuweisen. Wenn Sie im Header-Bereich eine Option „Mobiles Menü“ oder „Sekundäres Menü“ sehen, die ein Menü-Handle akzeptiert, können Sie:
- Ein neues Menü unter Onlineshop > Navigation erstellen (z. B. „Mobile Navigation“)
- Die Links erstellen, die Sie speziell für die mobile Ansicht wünschen
- Dieses neue Menü im Theme-Editor > Header > Mobiles Menü zuweisen
Wenn Ihr Theme diese Option nicht bietet, sind für eine modilspezifische Navigation Code-Änderungen erforderlich.
Mehr dazu in unserem Guide: Change Mobile Menu Behavior in Shopify.
Das Erscheinungsbild des mobilen Menüs per Code bearbeiten
Für tiefgreifendere Anpassungen – individuelle Drawer-Breite, unterschiedliche Schriftgrößen auf dem Handy, ein Sticky Mobile Header mit eigenen Icons, eine Bottom Navigation Bar auf dem Smartphone – müssen Sie die Liquid- und CSS-Dateien des Headers bearbeiten.
Häufige Anpassungen des mobilen Menüs per Code:
- Bottom-Tab-Bar-Navigation – eine fixierte Leiste am unteren Rand mit Icons für Home, Shop, Suche, Warenkorb, Account
- Full-Screen-Overlay mit zentrierten Links und großem Text
- Eigene Position oder Stil für den Schließen-Button
- Suchleiste innerhalb des mobilen Menü-Drawers
- Quick-Access-Links oben im mobilen Drawer (Konto, Bestellung verfolgen, etc.)
Beschreiben Sie Fudge, was Sie möchten: „Füge eine Bottom Navigation Bar für mobil hinzu mit Icons für Home, Kollektionen, Suche und Warenkorb. Sie soll am unteren Bildschirmrand fixiert sein.“ Fudge generiert den Code und zeigt einen Entwurf vor der Veröffentlichung.
Das Hamburger-Icon – was es ist und wie man es ändert
Das Hamburger-Icon (drei horizontale Linien) ist der Button, der das mobile Menü öffnet. Im Theme-Editor > Header können Sie unter Umständen:
- Die Größe ändern
- Einstellen, ob daneben ein Textlabel („Menü“) angezeigt wird
- Die Farbe ändern (wird oft von der Textfarbe des Headers übernommen)
Für ein komplett individuelles Icon – ein SVG-Icon, ein anderes Symbol oder eine eigene Animation – ist eine Bearbeitung des Liquid-Templates des Headers erforderlich.
Mobiles Menü und Page Speed
Das mobile Menü wird oft im HTML der Seite geladen, selbst wenn es nicht geöffnet ist (es wird lediglich per CSS ausgeblendet). Das bedeutet, dass der Menüinhalt die Ladegeschwindigkeit der Seite nicht nennenswert beeinflusst. Apps, die Menüfunktionen hinzufügen, können jedoch JavaScript laden, das die Performance beeinträchtigt.
Wenn Sie nach der Installation einer Navigations-App eine Verlangsamung des mobilen Menüs bemerkt haben, prüfen Sie, ob das Skript der App verzögert geladen werden kann (defer). Die meisten App-Entwickler können Sie hierzu beraten.
Passend dazu: Shopify-Buttons touch-freundlicher gestalten.
Passend dazu: Dropdown-Menü in Shopify erstellen.
Testen Ihres mobilen Menüs
Teste deine Änderungen immer auf einem echten Mobilgerät – nicht nur durch Verkleinern deines Browserfensters. Das Skalieren des Browsers simuliert Touch-Events, Schrift-Rendering oder den echten mobilen Viewport nicht akkurat.
Nutze die Chrome DevTools Mobile-Emulation als schnellen Check und überprüfe es dann auf einem echten iOS- und Android-Gerät, bevor du die Änderung als erledigt betrachtest.
FAQ
Manche Themes (oft Premium-Themes) lassen dich in den Header-Einstellungen unterschiedliche Menüs für Desktop und Mobile festlegen. Wenn du dem mobilen Slot ein anderes Menü zugewiesen hast, weicht es vom Desktop ab. Suche im Theme-Editor → Header nach einer Option für das „Mobile Menü“ oder „Sekundäre Menü“ und gleiche es mit dem Hauptmenü ab, wenn beide identisch sein sollen.
Nein. Touch-Geräte unterstützen Hover-Events nicht so wie Geräte mit einer Maus – es gibt keinen konsistenten „Hover“-Zustand bei einem Fingertipp. Das mobile Menü muss per Tap geöffnet werden. iOS emuliert zwar Hover für einige Interaktionen, aber für die Navigation ist das unzuverlässig.
Der Shopify-Navigations-Editor unterstützt nur einfachen Text – Icons erfordern Code. Der schnellste Weg: Beschreibe es Fudge („füge Lucide Icons basierend auf dem Handle neben den mobilen Menüpunkten hinzu“) und es bearbeitet den Header-Liquid-Code so, dass abhängig von URL oder Handle ein SVG pro Menüpunkt gerendert wird. Manuell: Tagge deine Menüpunkte und schreibe das Conditional Rendering selbst.
Ja, bei Shops mit mehr als 30 SKUs – in Shops mit vielen Produkten generiert die Suche einen bedeutenden Anteil der mobilen Sessions. Für kuratierte Marken mit weniger als ca. 30 SKUs sorgt die Suche nur für Unübersichtlichkeit ohne echten Mehrwert. Lass sie am besten im Drawer, statt sie immer sichtbar zu machen, damit der Header nicht überladen wird.
Die meisten modernen Themes fügen automatisch Konto-/Login-Links im mobilen Drawer hinzu, wenn Kundenkonten aktiviert sind (Einstellungen → Kundenkonten). Falls deins das nicht tut, kannst du den Link manuell über Onlineshop → Navigation → Hauptmenü (oder dein Mobile-Menü) hinzufügen und /account als URL eintragen.
Weitere Details findest du in unserem Guide zum Thema Mobile Menü-Verhalten in Shopify ändern.