Das mobile Menü in Shopify ändern (2026)

Das Wichtigste in Kürze

Das mobile Menü verwendet standardmäßig dieselbe Navigation wie die Desktop-Version.

Die Einstellungen für das Erscheinungsbild des mobilen Menüs befinden sich im Theme-Editor > Header-Bereich.

Du kannst den Stil des Hamburger-Icons und das Verhalten des Drawers im Theme-Editor ändern.

Für eine völlig andere mobile Navigation (andere Links oder ein anderes Layout) brauchst du Code oder Fudge.

Auf Mobilgeräten klappen die meisten Shopify-Themes die Header-Navigation zu einem Hamburger-Menü zusammen, das einen Drawer oder ein Overlay öffnet. So kannst du es anpassen.

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.

Wünschen Sie sich eine maßgeschneiderte mobile Navigation? Beschreiben Sie es Fudge.

Try Fudge for Free

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

Warum zeigt mein mobiles Shopify-Menü nicht dieselben Links wie die Desktop-Version?

Einige Themes (oft Premium-Themes) ermöglichen es dir, in den Header-Einstellungen separate Haupt- und mobile Menüs zuzuweisen. Wenn du dem mobilen Slot ein anderes Menü zugewiesen hast, weicht dieses vom Desktop ab. Überprüfe den Theme-Editor → Header auf eine Auswahl für "Mobiles Menü" oder "Sekundäres Menü" und gleiche es mit dem Hauptmenü ab, wenn sie identisch sein sollen.

Kann ich das mobile Menü so einstellen, dass es sich beim Hovern statt beim Antippen öffnet?

Nein. Touch-Geräte unterstützen keine Hover-Events wie Mausgeräte — es gibt keinen konsistenten "Hover"-Zustand bei einem Fingertipp. Das mobile Menü muss per Tap-to-Open geöffnet werden. iOS simuliert zwar Hover für bestimmte Interaktionen, ist aber für die Navigation unzuverlässig.

Wie füge ich Icons neben den Punkten des mobilen Menüs hinzu?

Der Shopify-Navigationseditor verarbeitet nur reinen Text — Icons erfordern Code. Der schnellste Weg: Beschreibe es Fudge ("Füge Lucide-Icons neben den mobilen Menüpunkten basierend auf ihrem Handle hinzu") und Fudge bearbeitet das Header-Liquid, um abhängig von URL oder Handle ein SVG pro Menüpunkt zu rendern. Manuell: Tagge deine Menüpunkte und schreibe das Conditional Rendering selbst.

Sollte ich eine Suchleiste im mobilen Menü-Drawer integrieren?

Ja, für Shops mit über 30 SKUs — die Suche macht bei produktlastigen Shops einen beträchtlichen Teil der mobilen Sessions aus. Bei kuratierten Marken mit weniger als ca. 30 SKUs sorgt die Suche nur für Unordnung, ohne sich auszuzahlen. Behalte sie im Drawer, statt sie immer sichtbar zu machen, um den Header nicht zu überladen.

Kann ich den Link zum Kundenkonto im mobilen Menü hinzufügen?

Die meisten modernen Themes fügen die Account-/Login-Links automatisch in den mobilen Drawer ein, wenn Kundenkonten aktiviert sind (Einstellungen → Kundenkonten). Wenn das bei deinem Theme nicht der Fall ist, füge den Link manuell über Onlineshop → Navigation → Hauptmenü (oder dein mobiles Menü) hinzu und gib /account als URL ein.