Shopify Desktop- und Mobile-Menü getrennt erstellen (Schritt-für-Schritt)

Bei der Gestaltung eines Shopify-Shops soll die Desktop-Navigation meist das vollständige Sortiment präsentieren: Produktkategorien, saisonale Kollektionen und verschachtelte Dropdown-Menüs. Auf einem Smartphone-Bildschirm wird diese umfangreiche Struktur jedoch schnell zu einem überfüllten Drawer-Menü, das Kunden zu endlosem Scrollen zwingt.

Shop-Betreiber suchen im Shopify-Admin oft nach einer einfachen Einstellung, um Desktop-Geräten ein vollständiges Menü und Smartphones eine kompaktere Navigation zuzuweisen. In vielen Themes ist eine solche Weiche jedoch nicht vorhanden. Shopify erlaubt zwar mehr als ein Menü unter Inhalt > Menüs, doch das Theme bestimmt die Anzeige — und die meisten Themes nutzen für Desktop und Mobile exakt dieselbe Linkliste.

Um beide Ansichten zu trennen, können Sie ein einziges Menü schlank halten, den Drawer-Code Ihres Themes anpassen oder eine Menü-App verwenden. Dieser Leitfaden erklärt alle drei Wege Schritt für Schritt.

Schnelle Antwort: Kann Shopify auf dem Smartphone ein anderes Menü anzeigen?

Mit den meisten Themes nicht ohne Weiteres. Sie erstellen Menüs unter Inhalt > Menüs, aber das Theme entscheidet, wo sie angezeigt werden – und Themes wie Dawn verwenden dasselbe Menü für den Desktop-Header und den mobilen Drawer. Um beide zu trennen, passen Sie den Drawer-Code an oder nutzen eine Menü-App.

In der Praxis stehen Ihnen drei Wege offen:

• Option 1: Ein Menü beibehalten und den Theme-Drawer nutzen. Führen Sie ein kompaktes Menü unter Inhalt > Menüs, das sich auf Mobilgeräten automatisch einklappt.
• Option 2: Ein separates mobiles Menü per Code zuweisen. Duplizieren Sie Ihr Theme und passen Sie snippets/header-drawer.liquid (im Theme Dawn) an, um auf ein separates Mobil-Menü zu verweisen.
• Option 3: Eine Navigations-App verwenden. Erstellen Sie ein Desktop-Mega-Menü sowie ein separates Mobile-Menü oder eine Tab-Leiste und steuern Sie die Gerätesichtbarkeit per Schalter.

Einen detaillierten Vergleich zu Aufwand und Wartung finden Sie in der Tabelle im Abschnitt Abwägungen weiter unten.

Wie Shopify-Menüs auf Desktop und Mobilgeräten funktionieren

Konzeptillustration: Ein zentrales Shopify-Hauptmenü versorgt sowohl den Desktop-Header als auch den mobilen Drawer.

In Shopify werden Navigationsdaten zentral unter Inhalt > Menüs verwaltet. Wie in der Shopify Help Center Dokumentation zu Dropdown-Menüs beschrieben, hängt der Anzeigeort jedoch vollständig vom gewählten Theme ab.

Im Standard-Theme Dawn besitzt der Header-Abschnitt nur eine einzige Menüeinstellung vom Typ link_list (standardmäßig main-menu). Auf großen Bildschirmen wird dieses Menü horizontal dargestellt und öffnet Unterkategorien in einem Header dropdown.

Auf mobilen Bildschirmen öffnet ein Hamburger-Button den Mobile drawer. In Dawns Codebasis wird dieser Drawer über snippets/header-drawer.liquid gerendert. Die entscheidende Liquid-Schleife lautet:

{%- for link in section.settings.menu.links -%}

Da der Drawer dieselbe Einstellung section.settings.menu.links wie die Desktop-Kopfzeile abfragt, ändert jede Anpassung Ihres Main menu im Admin-Bereich sofort beide Geräteansichten gleichzeitig.

Einige Themes bieten im Theme-Editor möglicherweise ein separates Auswahlfeld für ein mobiles Menü. Prüfen Sie daher zuerst Ihre Header-Einstellungen im Theme-Editor, bevor Sie Code bearbeiten oder Apps installieren.

Schritt 1: Desktop- und Mobile-Menü unter Inhalt > Menüs erstellen

Unabhängig von der gewählten Methode legen Sie zunächst beide Menüs im Shopify-Admin an.

Verwenden Sie stets den Menüpfad Inhalt > Menüs.

Desktop-Menü aufbauen (Hauptmenü mit Dropdowns)

1. Navigieren Sie im Shopify-Admin zu Inhalt > Menüs.
2. Klicken Sie auf Hauptmenü (Main menu) oder auf Menü hinzufügen.
3. Fügen Sie Ihre primären Hauptpunkte wie Kategorien, Kollektionen und Informationsseiten hinzu.
4. Ziehen Sie Unterpunkte nach rechts unter den jeweiligen Hauptpunkt, um Untermenüs zu bilden. Gemäß der offiziellen Shopify-Dokumentation für Dropdown-Menüs kann ein Hauptelement bis zu zwei verschachtelte Unterebenen besitzen (maximal drei Ebenen insgesamt).

Kompakteres Mobile-Menü anlegen

1. Klicken Sie unter Inhalt > Menüs erneut auf Menü hinzufügen.
2. Vergeben Sie einen klaren Namen wie Mobile menu.
3. Notieren Sie sich das Handle (z. B. mobile-menu). Option 2 benötigt dieses Handle zwingend.
4. Beschränken Sie sich auf kaufrelevante Links: Bestseller, Suche, Bestellverfolgung und Kundenservice. Halten Sie Verschachtelungen flach.
5. Klicken Sie auf Menü speichern.

[!NOTE] Das Anlegen eines Separate mobile menu unter Inhalt > Menüs speichert lediglich die Struktur. Es wird erst im Shop sichtbar, wenn Ihr Theme, eine Liquid-Anpassung oder eine Menu app darauf verweist.

Option 1: Ein Menü nutzen und dem Theme-Drawer die mobile Ansicht überlassen

Für Shops mit überschaubarem Sortiment ist es oft am besten, nur ein einziges Main menu zu pflegen und die mobile Darstellung dem integrierten Mobile drawer des Themes zu überlassen.

Hierbei halten Sie die Menüpunkte bewusst fokussiert. Auf Mobilgeräten bündelt das Theme diese Einträge automatisch in einem Seitenmenü.

• Vorteile: Kein Programmieraufwand, keine monatlichen App-Kosten und geringer Pflegeaufwand. Eine Aktualisierung unter Inhalt > Menüs wirkt sich auf alle Geräte aus.
• Nachteile: Desktop und Mobile bleiben identisch. Ein großes Mega-Menü mit Dutzenden Links führt auf Smartphones zu langen, unübersichtlichen Scroll-Listen.

Prüfen Sie im Theme-Editor, ob Ihr Theme zusätzliche Drawer-Optionen bietet. Weiterführende Hinweise finden Sie in unserem Leitfaden zu mobile drawer menu best practices.

Option 2: Ein separates Mobile-Menü durch Code-Anpassung zuweisen

Wenn Sie ohne zusätzliche App ein eigenständiges Menü für Mobilgeräte anzeigen möchten, können Sie den Drawer Ihres Themes im Liquid-Code direkt auf das zweite Menü verweisen.

Duplizieren Sie zuerst Ihr Theme

Wie in den Shopify-Richtlinien zur Theme-Verwaltung betont wird, sollten Sie immer ein Backup anlegen, um Änderungen bei Bedarf verwerfen zu können.

1. Navigieren Sie zu Onlineshop > Themes.
2. Klicken Sie neben Ihrem Live-Theme auf das Drei-Punkte-Menü (...) und wählen Sie Duplizieren.
3. Führen Sie alle Anpassungen ausschließlich an der unveröffentlichten Kopie durch.

Leiten Sie den Drawer auf Ihr mobiles Menü um

1. Klicken Sie bei der Theme-Kopie auf das Drei-Punkte-Menü (...) und wählen Sie Code bearbeiten.
2. Öffnen Sie im Theme Dawn die Datei snippets/header-drawer.liquid.
3. Suchen Sie nach der Schleife:

{%- for link in section.settings.menu.links -%}

1. Gemäß der Shopify Liquid-Referenz für linklists lässt sich jedes Menü über das linklists-Objekt anhand seines Handles ansprechen. Ersetzen Sie die Zeile durch:

{%- for link in linklists['mobile-menu'].links -%}

(Ersetzen Sie 'mobile-menu' durch das genaue Handle aus Schritt 1.)

Ein ähnlicher Lösungsweg wurde in der Shopify Community für das Theme Ride erarbeitet.

[!WARNING] Der obige Dateiname ist ein Beispiel für Dawn; andere Themes nutzen eine andere Datei, suchen Sie dort nach einer ähnlichen Schleife, die section.settings.menu liest. Verändern Sie nur die äußere Schleife; innere Schleifen müssen unverändert bleiben. Eigener Liquid-Code muss nach einer Theme-Aktualisierung unter Umständen neu eingepflegt werden.

Testen Sie das duplizierte Theme gründlich auf Desktop und Mobilgeräten, bevor Sie es veröffentlichen.

Option 3: Eine Menü-App für getrennte Desktop- und Mobilmenüs nutzen

Wenn Sie Menüs visuell per Drag-and-Drop erstellen und Liquid-Anpassungen vermeiden möchten, ist eine spezialisierte Menu app eine komfortable Lösung.

Mit Menü-Apps können Sie für Desktop ein mehrspaltiges Mega-Menü und für Smartphones einen separaten Drawer oder eine feste Tab-Leiste am unteren Bildschirmrand anlegen.

Achten Sie bei der App-Auswahl auf folgende Kriterien:

• Gerätespezifische Sichtbarkeit: Einstellmöglichkeiten, um Menüs explizit für Mobile, Desktop oder beide Ansichten zu aktivieren.
• Mobile Vorschau: Integrierte responsive Vorschau vor der Veröffentlichung.
• Art der Installation: Prüfen Sie, ob sich die App über ein Theme App Embed einbindet oder ob Sie Theme-Dateien bearbeiten müssen.
• Theme-Kompatibilität: Reibungslose Einbindung ohne Darstellungsfehler im Header.

Tipps zur passenden Menüart finden Sie in unserem Leitfaden choose the right menu type for each screen.

Design-Regeln für ein mobiles Menü

Konzeptillustration: Tief verschachtelte Ausklappmenüs im Vergleich zu einer kompakten Navigation mit großen Touch-Zielen.

Beachten Sie bei der Konzeption mobiler Menüs folgende Prinzipien:

• Fewer items (Weniger Menüpunkte): Mobilbildschirme bieten wenig vertikalen Platz. Konzentrieren Sie sich auf Hauptkategorien, Angebote und Suche. Links wie Impressum oder Presse gehören in den Footer.
• Larger tap targets (Größere Touch-Ziele): Touchscreens sind ungenauer als Mausklicks. Gemäß WCAG 2.2 Kriterium 2.5.8 (Target Size Minimum) sollten Touch-Ziele mindestens 24×24 CSS-Pixel groß sein (mit einigen Ausnahmen). Großzügige Abstände verhindern Fehltipps mit dem Daumen.
• Shallow nesting (Flache Hierarchien): Tief verschachtelte Akkordeons sind auf kleinen Bildschirmen schwerer zu bedienen. Setzen Sie auf Shallow nesting mit flachen Listen oder maximal einer Unterebene.
• Über das Hamburger-Menü hinausdenken: Studien der Nielsen Norman Group belegen, dass das Hamburger-Symbol nicht von jedem Nutzer sofort bemerkt wird. Eine Kombination aus Drawer und einer fixierten Tab-Leiste am Bildschirmrand erhöht die Auffindbarkeit wichtiger Bereiche.

Mehr dazu erfahren Sie in unserem Beitrag mobile navigation beyond the hamburger menu.

Vor der Veröffentlichung testen

Entsprechend der Shopify Help Center Empfehlung sollten Sie Menüs auf mobilen Endgeräten testen, um sicherzustellen, dass sich alle Untermenüs wie erwartet öffnen.

Gehen Sie dabei systematisch vor:

1. Theme-Editor-Vorschau: Prüfen Sie die Darstellung im Editor über die Desktop- und Mobile-Umschaltung.
2. Test auf einem echten Smartphone: Öffnen Sie den Vorschau-Link in mobilen Browsern wie Safari und Chrome.
3. Drawer-Funktion: Öffnen und schließen Sie das Menü mehrmals.
4. Untermenüs prüfen: Klappen Sie alle Unterkategorien auf, um Überlappungen auszuschließen.
5. Ziel-URLs testen: Stellen Sie sicher, dass keine Links ins Leere oder auf 404-Seiten führen.
6. Querformat testen: Drehen Sie das Smartphone, um abgeschnittene Texte oder verdeckte Schließen-Buttons zu erkennen.
7. Verschiedene Seitentypen aufrufen: Testen Sie das Menü auf Startseite, Kategorieseite und Produktdetailseite.

Häufige Probleme und Lösungen

• Auf dem Smartphone erscheint weiterhin das alte Menü: Prüfen Sie, ob Sie die unveröffentlichte Theme-Kopie betrachten. Überprüfen Sie zudem, ob das Handle in linklists['mobile-menu'].links exakt mit dem Handle unter Inhalt > Menüs übereinstimmt.
• Neu angelegtes Menü wird nirgends angezeigt: Ein Menü unter Inhalt > Menüs wird erst sichtbar, wenn es im Header-Abschnitt, im Liquid-Code oder in einer Menü-App zugewiesen wurde.
• Löschen eines Hauptelements entfernte alle Unterpunkte: Laut Shopify-Regeln zur Menübearbeitung werden beim Entfernen eines Hauptelements auch alle untergeordneten Links gelöscht. Ziehen Sie Unterpunkte vor dem Löschen heraus.
• Dropdown-Menüs öffnen sich mobil nicht: Prüfen Sie die Verschachtelungstiefe. Shopify unterstützt maximal zwei Unterebenen unter einem Hauptpunkt; halten Sie Ihr mobiles Menü innerhalb dieser Grenze und testen Sie es im Drawer Ihres Themes.
• Mobile Untermenüs sind nach Code-Änderung verschwunden: Achten Sie darauf, nur die äußere for link in section.settings.menu.links-Schleife zu ersetzen. Werden innere Schleifen (for childlink in link.links) verändert, können Untermenüs nicht gerendert werden.

Abwägungen: Wann Sie Ihre Menüs nicht trennen sollten

Wann Sie Menüs nicht trennen sollten

Zwei getrennte Menüs sind nicht in jedem Fall sinnvoll:

• Kleine Produktkataloge: Bei einem kleinen, übersichtlichen Katalog funktioniert ein schlankes Menü auf allen Bildschirmgrößen gleichermaßen gut.
• Geringe Wartungskapazität: Bei zwei Menüs müssen Kollektionen immer an zwei Stellen gepflegt werden. Werden Änderungen vergessen, veralten mobile Links schnell.
• Häufige Theme-Updates ohne Entwicklerhilfe: Liquid-Änderungen müssen nach einem Theme-Update unter Umständen neu eingepflegt werden.

Wenn eine kompakte Menüstruktur alle Anforderungen erfüllt, ist ein gemeinsames Menü oft die stabilste und wartungsärmste Lösung.

Wie Navi+ Ihnen hilft

Wenn Sie den Theme-Code lieber nicht bearbeiten möchten, können Sie mit Navi+ ein Desktop-Mega-Menü und ein separates mobiles Menü oder eine Tab Bar erstellen und festlegen, auf welchem Gerät jedes davon erscheint. Sie können es im kostenlosen Tarif ausprobieren und Ihr Theme unverändert lassen.

Mit Navi+ können Sie sticky Tab-Leisten, mehrspaltige Desktop-Mega-Menüs, mobile Drawer-Menüs und Floating Buttons per Drag-and-Drop ohne Code erstellen.

Im Tab Publish bietet Navi+ dedizierte Schalter für die Gerätesteuerung:

• Mobile-Schalter: Steuert die Anzeige auf Smartphone-Displays.
• Desktop-Schalter: Steuert die Anzeige auf Desktop-Monitoren.

Standardmäßig ist beim Erstellen eines mobilen Menüs nur Mobile aktiviert. So können Sie einen Drawer ausschließlich für Smartphones anlegen und für Desktop ein separates Mega-Menü aktivieren. Beide Menüs arbeiten unabhängig voneinander und unterstützen bis zu drei Verschachtelungsebenen.

Zur Optimierung der mobilen Ergonomie können Sie ein Drawer-Menü mit einer fixierten bottom tab bar for Shopify, um Suche, Warenkorb und Bestseller im Daumenbereich bereitzustellen.

Checkliste für die Umsetzung

• Katalog prüfen: Prüfen, ob getrennte Menüs notwendig sind oder ein einzelnes Menü genügt.
• Desktop-Menü anlegen: Unter Inhalt > Menüs das Hauptmenü mit Kategorien und Dropdowns strukturieren.
• Mobiles Menü erstellen: Unter Inhalt > Menüs ein kürzeres Menü anlegen und das Handle notieren.
• Header-Einstellungen prüfen: Im Theme-Editor nachsehen, ob bereits eine native mobile Menüauswahl existiert.
• Weg festlegen: Zwischen Option 1 (ein Menü), Option 2 (Code) oder Option 3 (App) wählen.
• Theme vor Code-Änderungen duplizieren: Bei Option 2 das Live-Theme duplizieren und die Kopie bearbeiten.
• Gerätesteuerung einstellen: Bei einer App Desktop für das Mega-Menü und Mobile für den Drawer aktivieren.
• Auf echtem Smartphone testen: Drawer-Animation, Dropdowns, Touch-Abstände und Querformat prüfen.
• Synchron halten: Bei Änderungen am Sortiment beide Menüs unter Inhalt > Menüs aktualisieren.

Häufig gestellte Fragen (FAQ)

Kann ich auf dem Smartphone ein anderes Menü anzeigen als auf dem Desktop?

Ja, aber die meisten Shopify-Themes nutzen standardmäßig dasselbe Menü für beide Ansichten. Um unterschiedliche Links anzuzeigen, müssen Sie den Drawer-Code anpassen oder eine Menü-App verwenden.

Warum zeigt mein mobiles Menü dieselben Links wie mein Desktop-Menü?

In Themes wie Dawn liest der Drawer-Template dieselbe Menüeinstellung aus dem Header-Abschnitt (section.settings.menu.links). Änderungen am Hauptmenü wirken sich daher auf beide Geräte aus.

Muss ich den Theme-Code bearbeiten, um zwei Menüs zu verwenden?

Nein, mit einer Menü-App können Sie getrennte Menüs ohne Code zuweisen. Falls Sie Code bearbeiten, duplizieren Sie immer zuerst Ihr Theme.

Wo erstelle ich Menüs in Shopify?

Sie erstellen und verwalten alle Menüs unter Inhalt > Menüs im Shopify-Adminbereich.

Wie viele Ebenen kann ein Shopify-Dropdown-Menü haben?

Ein Hauptelement kann bis zu zwei verschachtelte Unterebenen haben, was insgesamt drei Navigationsebenen ermöglicht.

Was passiert, wenn ich einen übergeordneten Menüpunkt lösche?

Wenn Sie ein Hauptelement löschen, werden alle darunter verschachtelten Unterpunkte ebenfalls gelöscht. Ziehen Sie Unterpunkte vor dem Löschen heraus.

Quellen

• Shopify Help Center: Editing Menus — Dokumentation zur Menüverwaltung unter Inhalt > Menüs und Löschregeln für Unterpunkte.
• Shopify Help Center: Drop-down Menus — Vorgaben zu zwei Verschachtelungsebenen, Theme-Positionen und mobilen Tests.
• Shopify Help Center: Duplicating Themes — Offizielle Anleitung zum Duplizieren von Themes vor Code-Anpassungen.
• Shopify Developer Documentation: Liquid linklists Object — API-Referenz zum Ansprechen von Menüs über ihr Handle.
• Shopify Dawn Repository: sections/header.liquid — Open-Source-Code des Dawn-Headers mit link_list-Einstellung.
• Shopify Dawn Repository: snippets/header-drawer.liquid — Open-Source-Code des Dawn-Drawers mit Schleife über section.settings.menu.links.
• Shopify Community: Customizing Main Menu and Sidebar Menu for Desktop and Mobile — Community-Lösung zur Anpassung von header-drawer.liquid im Theme Ride.
• Shopify Community: Use Different Menu for Mobile and Desktop — Community-Diskussion über den Bedarf an separaten Mobil- und Desktopmenüs.
• Fudge: How to Change Mobile Menu Behavior in Shopify — Leitfaden zum Standardverhalten von Menüs und mobiler Anpassung.
• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Minimum) — Erfolgskriterium 2.5.8 mit Mindestgröße von 24×24 CSS-Pixeln für Touch-Ziele.
• Nielsen Norman Group: Mobile Navigation Beyond the Hamburger — Usability-Studie zur Erkennbarkeit von Hamburger-Menüs und hybrider Navigation.
• Navi+ Help Center: Display Rules Settings — Leitfaden zur Konfiguration von Gerätesichtbarkeiten für Menüs.
• Shopify App Store: Navi+ Navigation & Menu Bar — App-Details zu Drag-and-Drop-Mega-Menüs, Drawern und mobilen Tab-Bars.