Das Wichtigste in Kürze
- Das Mobile-Menü nutzt standardmäßig dieselbe Navigation wie die Desktop-Version.
- Die Einstellungen für das Aussehen des Mobile-Menüs findest du im Theme-Editor > Header-Bereich.
- Du kannst den Stil des Hamburger-Icons und das Drawer-Verhalten im Theme-Editor anpassen.
- Für eine völlig andere Mobile-Navigation (andere Links oder Layouts) brauchst du Code oder Fudge.
Auf dem Handy klappen die meisten Shopify-Themes die Header-Navigation in ein Hamburger-Menü ein, das sich als Drawer oder Overlay öffnet. So kannst du es anpassen.
Warum Sie uns vertrauen können
Wir haben Hunderte von Shopify-Storefronts erstellt und angepasst. Wir haben auch Fudge entwickelt – einen KI-Storefront-Editor mit einer Bewertung von 4.8 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
Einige Themes (oft Premium-Themes) erlauben es, in den Header-Einstellungen separate Haupt- und Mobile-Menüs festzulegen. Wenn du dem Mobile-Bereich ein anderes Menü zugewiesen hast, unterscheidet es sich vom Desktop. Schau im Theme-Editor → Header nach einer Option für "Mobile menu" (Mobiles Menü) oder "Secondary menu" (Sekundäres Menü) und wähle dort das Hauptmenü aus, wenn sie identisch sein sollen.
Nein. Touch-Geräte unterstützen keine Hover-Events wie Geräte mit Maus — es gibt keinen echten "Hover"-Zustand beim Antippen mit dem Finger. Das Mobile-Menü muss per Tap geöffnet werden (tap-to-open). iOS simuliert zwar Hover für manche Interaktionen, aber für die Navigation ist das unzuverlässig.
Der Shopify-Navigationseditor verarbeitet nur reinen Text — für Icons brauchst du Code. Der schnellste Weg: Beschreibe es Fudge ("Füge Lucide-Icons neben den Mobile-Menüpunkten basierend auf ihrem Handle hinzu") und es bearbeitet den Header-Liquid-Code, um je nach URL oder Handle ein bedingtes SVG pro Menüpunkt zu rendern. Manuell: Tagge deine Menüpunkte und schreibe das Conditional Rendering selbst.
Ja, für Shops mit mehr als 30 SKUs — die Suche macht bei produktlastigen Shops einen großen Teil der mobilen Sessions aus. Für kuratierte Brands mit weniger als ca. 30 SKUs sorgt eine Suche nur für Unübersichtlichkeit ohne echten Mehrwert. Behalte sie im Drawer, statt sie immer sichtbar zu machen, damit der Header nicht überladen wirkt.
Die meisten modernen Themes fügen Account-/Login-Links automatisch zum Mobile-Drawer hinzu, wenn Kundenkonten aktiviert sind (Einstellungen → Kundenkonten). Wenn das bei dir nicht der Fall ist, füge den Link manuell über Onlineshop → Navigation → Hauptmenü (oder dein Mobile-Menü) hinzu und trage /account als URL ein.
Weitere Details findest du in unserem Guide zum Thema Mobile-Menü-Verhalten in Shopify ändern.