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.
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.
Dies ist für die meisten Shops völlig ausreichend. Wenn Sie die gleichen Links in einer anderen Reihenfolge auf dem Handy oder völlig andere Links auf dem Handy wünschen, haben Sie zwei Möglichkeiten:
- Weisen Sie der mobilen Navigation ein anderes Menü zu (sofern Ihr Theme dies unterstützt)
- Verwenden Sie Code, um bedingt unterschiedliche Inhalte 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.
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 auch dann im HTML der Seite geladen, wenn es nicht geöffnet ist (es wird lediglich via 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 enthalten, das die Performance beeinträchtigt.
Wenn Sie nach der Installation einer Navigations-App eine Verlangsamung des mobilen Menüs bemerken, prüfen Sie, ob das Skript der App verzögert geladen werden kann (defer). Die meisten App-Entwickler können hierzu Auskunft geben.
Testen Ihres mobilen Menüs
Testen Sie Änderungen immer auf einem echten Mobilgerät – nicht nur durch Ändern der Größe Ihres Browserfensters. Das Ändern der Browsergröße simuliert Touch-Events, Font-Rendering oder den tatsächlichen mobilen Viewport nicht akkurat.
Nutzen Sie die mobile Emulation der Chrome DevTools für einen Schnellcheck, aber verifizieren Sie die Änderungen auf einem echten iOS- und Android-Gerät, bevor Sie die Aufgabe als erledigt betrachten.
