Desktop-Mega-Menü mit derselben Struktur wie Ihr Shopify-Mobile-Menü erstellen (Eine Struktur, zwei Layouts)

Sie verbringen Stunden damit, Kategorien zu kuratieren und Links in Ihrem Shopify-Adminbereich zu verschachteln. Auf einem großen Desktop-Monitor entfalten sich Ihre Produkte übersichtlich in einem breiten Mega-Menü. Doch sobald Sie Ihr Smartphone zur Hand nehmen und das Drawer-Menü öffnen, wirkt die Navigation oft uneinheitlich oder abgeschnitten.

Viele Händler glauben, dass unterschiedliche Layouts zwingend zwei separat gepflegte Menüs erfordern. In der Praxis benötigen Sie jedoch keine zwei getrennten Datenstrukturen. Sie können eine einzige Kategoriehierarchie als verlässliche Datenquelle beibehalten und jedem Gerät die Freiheit geben, diese Struktur im jeweils optimalen Layout darzustellen.

Schnelle Antwort: Kann ein Menü sowohl Desktop als auch Mobile steuern?

Ja. In Dawn speist das Hauptmenü des Headers sowohl das Desktop-Menü als auch das mobile Drawer-Menü, sodass die Struktur bereits geteilt wird. Der Unterschied liegt rein im Layout: Desktop zeigt Spalten, Mobile führt schrittweise durch Unterebenen. Wählen Sie die Methode, die eine zentrale Datenquelle bewahrt.

• Methode 1 (Native Theme-Einstellungen): Behalten Sie ein einziges Menü im Shopify-Admin und stellen Sie den Desktop-Typ im Header auf Mega-Menü um; das Theme übernimmt die mobile Drawer-Darstellung automatisch.
• Methode 2 (Getrennte Menüs im Admin): Erstellen Sie eine separate mobile Linkliste und verknüpfen Sie das Drawer-Snippet damit – bei verdoppeltem manuellem Pflegeaufwand.
• Methode 3 (Anpassung des Drawer-Templates): Passen Sie den Liquid-Code des Drawers an, damit Unterkategorien direkt beim Öffnen sichtbar sind, statt mehrere Klicks zu erfordern.

Wie Shopify-Themes ein Menü auf Desktop und Mobile wiederverwenden

In Shopify existieren Navigationsdaten unabhängig vom eigentlichen Theme-Design. Wenn Sie unter Inhalt > Menüs ein Menü anlegen, speichert Shopify dieses als linklist-Objekt. Laut der Shopify Developer Documentation können Sie Links bis zu drei Ebenen tief verschachteln: ein Hauptelement plus zwei untergeordnete Kindebenen. Einen umfassenden Leitfaden zur Menüstruktur finden Sie in unserem Shopify menu guide.

Da jede Linkliste reine Datenstruktur ist, bestimmt das aktive Theme, wie diese dargestellt wird (Shopify Dev Docs). In Dawns sections/header.liquid steuert die Einstellung menu_type_desktop, ob Dropdowns, Mega-Menüs oder Desktop-Drawer angezeigt werden (GitHub Shopify Dawn).

Unabhängig vom gewählten Desktop-Stil greift der mobile Drawer von Dawn auf dieselbe Linkliste zu. In snippets/header-drawer.liquid durchläuft das Template das Headermenü mit for link in section.settings.menu.links und iteriert bis zu den Enkel-Links über for grandchildlink in childlink.links (GitHub Shopify Dawn). Zudem stellt Liquid über das Attribut levels des Link-Objekts die Anzahl der verschachtelten Ebenen bereit (Shopify Liquid API).

Die Hierarchie ist also bereits gemeinsam nutzbar. Sie pflegen One menu tree, der auf verschiedenen Bildschirmen lediglich ein anderes Gewand erhält.

Warum sich die beiden Layouts dennoch unterschiedlich anfühlen

Obwohl beide Ansichten auf dieselbe Linkliste zugreifen, unterscheidet sich das Nutzungserlebnis grundlegend aufgrund der verschiedenen Bedienmodelle von Maus und Touchscreen.

Abbildung 1: Konzeptillustration (Concept illustration) — Warum sich die beiden Layouts dennoch unterschiedlich anfühlen

Auf dem Desktop öffnet das Überfahren einer Kategorie mit der Maus ein breites Hover panel. Käufer erfassen Spalten mit Haupt- und Unterkategorien simultan und ohne Seitenwechsel.

Auf Mobilgeräten verhindert die geringe Bildschirmbreite nebeneinanderliegende Spalten. Themes weichen auf einen Schiebe-Drawer mit Drill-Down-Logik aus. Um eine Unterkategorie zu erreichen, müssen Käufer die übergeordnete Kategorie antippen, das Aufschieben des Untermenüs abwarten und erneut tippen. Diese Notwendigkeit von Two taps ist ein Kritikpunkt, den einige Dawn-Nutzer in der Shopify Community geäußert haben (Shopify Community). Weitere Details zur Drawer-Mechanik erläutert unser Beitrag über mobile drawer menu architecture.

Zusätzlich entstehen auf Touchscreens typische Hürden:

• Parent link not clickable: In vielen mobilen Drawern öffnet das Antippen der Elternkategorie lediglich das Untermenü, anstatt zur eigentlichen Kategorieseite zu führen.
• Fehlklicks bei Berührung: Untersuchungen der Nielsen Norman Group belegen, dass winzige Optionen in Mega-Menüs auf Touchscreens häufig zu Auswahlfehlern führen (NN/g).
• Getrennte mobile Templates: Einige Menü-Apps wie Meteor trennen Desktop- und Mobilvorlagen gezielt (Helium Meteor Docs), während Theme-Entwickler wie Clean Canvas für Symmetry ein einstufiges Mobilmenü mit direkten Produktlinks empfehlen (Clean Canvas).

Methode 1: Ein Shopify-Menü beibehalten und den Desktop-Typ auf Mega-Menü umstellen

Der sauberste No-Code-Weg besteht darin, die integrierte Mega-Menü-Funktion Ihres Themes zu nutzen. Dadurch bleibt Ihre Administration auf eine einzige Linkliste konzentriert, während das Theme die Darstellung responsiv anpasst.

Befolgen Sie diese vier Schritte:

1. Dreistufige Hierarchie im Admin anlegen: Strukturieren Sie Ihr Hauptmenü unter Inhalt > Menüs in Hauptelemente, Unterkategorien und Linkziele.
2. Menü dem Header zuweisen: Wählen Sie unter Online-Shop > Themes > Anpassen > Header Ihre erstellte Linkliste unter der Einstellung Menü aus.
3. Desktop-Menütyp auf Mega-Menü umstellen: Ändern Sie in den Header-Einstellungen den Punkt Menu type von Dropdown auf Mega menu (GitHub Shopify Dawn). Eine Anleitung für Dawn finden Sie in unserem Leitfaden add a mega menu to Dawn.
4. Mobilen Drawer prüfen: Wechseln Sie im Editor auf die Mobile-Vorschau und öffnen Sie den Drawer. Er greift automatisch auf denselben Menübaum zu (GitHub Shopify Dawn).

In Drittanbieter-Themes heißen diese Optionen mitunter leicht abweichend; konsultieren Sie dazu die Theme-Dokumentation (Shopify Dev Docs).

Methode 2: Zwei separate Menüs im Shopify-Admin verwenden

Wenn Ihr Desktop-Menü umfangreiche Banner und Sonderaktionen enthält, die auf Smartphones stören, können Sie zwei eigenständige Menüs im Admin anlegen.

Sie erstellen ein Hauptmenü für den Desktop und eine gekürzte Version namens “Mobile Menu” unter Inhalt > Menüs. Um diese zu verknüpfen, passen Entwickler snippets/header-drawer.liquid an, sodass eine Variable auf das Mobilmenü verweist, statt section.settings.menu abzufragen (Shopify Community). Prüfen Sie in der Dokumentation Ihres Themes, ob es eine eigene Einstellung für das Drawer-Menü bietet; dann ist kein Code nötig.

Diese Methode erlaubt maximale mobile Anpassung, verursacht jedoch hohen Betreuungsaufwand:

• Bei jeder neuen Kollektion oder Rabattaktion müssen Sie stets zwei Menüs manuell synchronisieren.
• Im Laufe der Zeit können beide Menüs auseinanderlaufen, sodass mobilen Käufern Desktop-Links fehlen. Händler, die ihr Desktop-Menü auf Mobile nachbauen möchten, wollen genau das vermeiden (Shopify Community).

Nutzen Sie Methode 2 nur, wenn Ihre mobile Zielgruppe zwingend eine völlig eigenständige Kategoriestruktur benötigt.

Methode 3: Drawer anpassen, damit verschachtelte Ebenen sofort sichtbar sind

Viele Händler wünschen sich, dass Unterkategorien im mobilen Drawer sofort aufgeklappt sichtbar sind, ohne dass Kunden sich durch mehrere Bildschirme tippen müssen (Shopify Community).

Das Drawer-Template von Dawn durchläuft bereits Unter- und Enkel-Links (GitHub Shopify Dawn). Durch Anpassung von Liquid und CSS können Entwickler die Schiebepanels entfernen, sodass die Ebenen standardmäßig als offene Liste dargestellt werden.

Beachten Sie dabei wichtige Vorsichtsmaßnahmen:

• Versionsunterschiede bei Themes: Ältere Foren-Codeschnipsel aus dem Jahr 2022 passen oft nicht zu aktuellen Dawn-Versionen, da Klassennamen und Dateistrukturen verändert wurden.
• Theme stets duplizieren: Erstellen Sie vor Änderungen an Liquid-Dateien immer ein Theme-Duplikat. Modifizieren Sie niemals ungetesteten Code direkt im Live-Shop.
• Langes vertikales Scrollen: Wenn Ihr Desktop-Menü viele Links umfasst, führt das gleichzeitige Aufklappen aller Ebenen auf Mobilgeräten zu langen Scrollstrecken.

Was von einem Desktop-Mega-Menü auf Mobile übertragen wird

Bei der Umsetzung eines Desktop-Mega-Menüs für Smartphones müssen visuelle Elemente transformiert werden. Die Nielsen Norman Group rät dazu, Navigationsoptionen in sinnvolle Gruppen zu unterteilen (NN/g). Empfehlungen zur visuellen Gruppierung bietet unser Leitfaden mega menu layout and grouping best practices.

Abbildung 2: Konzeptillustration (Concept illustration) — Was von einem Desktop-Mega-Menü auf Mobile übertragen wird

Vor der Veröffentlichung auf echten Geräten testen

Entwickler-Tools im Desktop-Browser simulieren zwar Breiten, können jedoch Daumenreichweite und reale Touch-Präzision nicht ersetzen. Führen Sie vor dem Livegang stets Tests auf physischer Hardware durch:

1. Auf echten Smartphones testen: Prüfen Sie die Vorschau auf iOS- und Android-Geräten im Hoch- und Querformat.
2. Jede Menüebene antippen: Tippen Sie Hauptkategorien, Unterebenen und Ziellinks an, um korrekte URLs sicherzustellen.
3. Verhalten der Elternzeilen prüfen: Stellen Sie sicher, dass Elternkategorien entweder zur Kollektion führen oder das Untermenü fehlerfrei öffnen.
4. Touch-Ziele ausmessen: Vergewissern Sie sich, dass Schaltflächen und Zeilen mindestens 24x24 CSS-Pixel groß sind (W3C WCAG 2.2).
5. Drawer-Scrollverhalten testen: Scrollen Sie vom Menükopf bis zu den Kontolinks am Ende, um sicherzustellen, dass nichts abgeschnitten wird.
6. Theme-Vorschau nutzen: Testen Sie alle Modifikationen in einem unveröffentlichten Theme-Entwurf, bevor Sie Änderungen veröffentlichen.

Häufige Probleme und Lösungen

Bei der Harmonisierung von Desktop- und Mobilnavigation treten häufig vier typische Problemfelder auf:

Mobiles Menü erfordert zwei Klicks

• Ursache: Die Drill-Down-Mechanik erfordert das Antippen der Kategorie, das Warten auf die Animation und einen erneuten Klick auf das Unterelement (Shopify Community).
• Lösung: Passen Sie den Drawer-Code so an, dass Unterkategorien inline aufgeklappt werden (Methode 3), oder wählen Sie ein Layout, das die Zwischenebene überspringt, sodass Käufer ihr Ziel mit einer Berührung erreichen.

Tiefe Menüebenen werden abgeschnitten

• Ursache: Shopify unterstützt nativerweise maximal drei Hierarchieebenen (Shopify Dev Docs). Dawns Drawer iteriert nicht über Enkel-Links hinaus (GitHub Shopify Dawn).
• Lösung: Straffen Sie Ihre Kategoriestruktur, sodass alle Zielseiten innerhalb von drei Ebenen erreichbar sind.

Elternlink lässt sich nicht anklicken

• Ursache: Auf Touchscreens ist das Antippen der Elternzeile oft reserviert, um das Untermenü aufzuklappen.
• Lösung: Fügen Sie als ersten Punkt im Untermenü einen Link “Alle [Kategoriename] ansehen” ein.

Mobiles Menü zeigt andere Inhalte als Desktop

• Ursache: Der Shop nutzt Methode 2 über angepassten Code in snippets/header-drawer.liquid oder eine App-Einstellung, die auf eine getrennte Mobil-Linkliste verweist (Shopify Community).
• Lösung: Kontrollieren Sie die Header-Einstellungen und den Liquid-Code des Drawers, um herauszufinden, welcher Menü-Handle aktiv abgefragt wird.

Kompromisse: Wann eine einheitliche Struktur die falsche Wahl ist

Eine gemeinsame Navigationsstruktur spart Zeit, doch jede Umsetzungsmethode birgt spezifische Vor- und Nachteile:

Wann Sie Menüs gezielt trennen sollten

Obwohl eine einheitliche Datenquelle Inkonsistenzen verhindert, ist die Trennung in bestimmten Fällen ratsam:

• Sehr große Kataloge: Shops mit tausenden Artikeln überfordern Smartphone-Besucher mit ausufernden Baumstrukturen. Ein schlankes, einstufiges Mobilmenü mit direkten Produktlinks bietet hier eine bessere Touch-UX (Clean Canvas).
• Mobile Schnellzugriffe: Mobile Kunden können von Direktlinks zu Bestellstatus oder Filialfinder direkt auf der obersten Ebene profitieren.
• SEO und Crawlbarkeit: Wenn Sie Kategorien mobil verbergen, stellen Sie sicher, dass alle Unterseiten über Kategorieseiten, Breadcrumbs und Sitemaps auffindbar bleiben. Lesen Sie dazu unseren Leitfaden keep your menu crawlable.

Wo Navi+ hineinpasst

Falls Ihr aktuelles Theme keine nativen Mega-Menü-Layouts bietet oder Sie Eingriffe in den Liquid-Code vermeiden möchten, bietet Navi+ eine strukturierte Möglichkeit, Navigation über Geräte hinweg zu teilen.

Laut der Navi+-Dokumentation arbeiten Desktop- und Mobilmenü so zusammen:

• Desktop Mega Menu: Auf Desktop-Bildschirmen stellt Navi+ Desktop Mega Menu mehrspaltige Panels mit Bildern und Bannern dar. Auf Smartphones wird es nicht angezeigt, da breite Spalten auf kleinen Displays keinen Platz finden (Navi+ Docs).
• Einbettung im Mobile Menu: Anstatt Menüs doppelt anzulegen, bettet Navi+ Mobile Menu Ihr bestehendes Desktop-Mega-Menü über ein spezielles Einbettungs-Element auf Ebene 1 des Drawers ein (Navi+ Docs).
• Einspaltige Anordnung: Bei der Einbettung werden die Columns become one column sauber untereinander gestapelt (Navi+ Docs). Die Zwischenebene entfällt, sodass Kunden Zielseiten mit einer einzigen Berührung erreichen.
• Sichtbarkeitssteuerung: Nutzen Sie die Option Exclude when embedded, um aufwendige Desktop-Banner auf Mobilgeräten automatisch auszublenden (Navi+ Docs).
• An einer Stelle pflegen: Der Drawer verwendet die Elemente des Mega-Menüs wieder; Sie führen Änderungen nur einmal durch (Edit once), und die eingebettete Kopie im Drawer folgt. Um ein Mega-Menü zu löschen, entfernen Sie vorab einfach das Einbettungselement aus dem Mobile Menu (Navi+ Docs).
• Drei Navigationsebenen: Navi+ Mobile Menu unterstützt bis zu drei Ebenen (Kategorien, Unterkategorien und Ziellinks) und deckt damit Shopifys Standardtiefe ab (Navi+ Docs).

Die Einrichtung erfolgt in drei Schritten:

1. Kopieren Sie in Navi+ das Einbettungselement aus Ihrem Desktop Mega Menu.
2. Fügen Sie das Element auf Ebene 1 Ihres Mobile Menu ein.
3. Aktivieren Sie Exclude when embedded für alle Werbebanner oder Grafiken, die nur für Desktop-Displays bestimmt sind.

Detaillierte Anleitungen finden Sie in den offiziellen Dokumentationen zum Thema reuse a Desktop Mega Menu on phones und zur Sichtbarkeitssteuerung via Exclude when embedded.

Wenn Sie Navi+ bereits für ein Desktop Mega Menu nutzen, kopieren Sie dessen Einbettungselement in ein Mobile Menu und sehen Sie sich die Vorschau auf Ihrem Smartphone an – gefällt Ihnen das Ergebnis nicht, löschen Sie das Einbettungselement, und nichts anderes ändert sich.

Aktions-Checkliste

Nutzen Sie diese Prüfliste, um Ihr Desktop-Mega-Menü und Ihre mobile Menüführung abzustimmen:

• Einen Menübaum definieren: Erstellen Sie Ihre Kategoriestruktur unter Inhalt > Menüs innerhalb des dreistufigen Shopify-Limits.
• Methode auswählen: Entscheiden Sie sich zwischen nativer Theme-Einstellung (Methode 1), getrennten Menüs (Methode 2) oder Drawer-Codeanpassung (Methode 3).
• Theme duplizieren: Sichern Sie Ihr Theme als Kopie, bevor Sie Liquid-Dateien editieren.
• Spalten einspaltig anordnen: Stellen Sie sicher, dass Desktop-Spalten auf Mobilgeräten in eine saubere, einspaltige Liste übergehen.
• Desktop-Grafiken herausfiltern: Blenden Sie große Werbebanner und dekorative Kacheln im mobilen Drawer aus.
• Elternlinks verifizieren: Kontrollieren Sie, ob Elternzeilen zur Kollektion führen oder einen klaren “Alle ansehen”-Link enthalten.
• Auf echten Geräten testen: Prüfen Sie Touch-Reaktion, Scrolltiefe und die Einhaltung der 24x24-Pixel-Mindestgröße auf echten Smartphones.

Häufig gestellte Fragen (FAQ)

Kann ich ein Menü für Desktop und Mobile verwenden?

Ja. In Themes wie Dawn speist sich der mobile Drawer aus demselben Menü, das dem Header zugewiesen ist. Sie pflegen somit eine einzige Linkliste, während das Theme gerätespezifische Layouts anwendet.

Wie viele Ebenen kann ein Shopify-Menü haben?

Ein Hauptelement in Shopify kann bis zu zwei verschachtelte Unterebenen besitzen, was insgesamt drei Navigationsebenen ergibt. Dawns Drawer-Template verarbeitet Links bis hinunter zur Enkel-Ebene.

Warum muss ich im mobilen Menü zweimal tippen?

Standardmäßige mobile Drawer nutzen häufig eine Drill-Down-Struktur: Das Antippen einer Kategorie öffnet ein Unterpanel, und ein zweiter Klick wählt das Ziel. Dies lässt sich durch inline aufgeklappte Menüs oder das Weglassen der Spaltenebene beheben.

Funktionieren Mega-Menü-Spalten und Bilder auf Mobilgeräten?

Mehrspaltige Raster passen nicht auf Smartphone-Displays und werden einspaltig gestapelt. Werbebilder und Banner beanspruchen zu viel vertikalen Raum und werden mobil meist ausgeblendet.

Muss ich den Theme-Code bearbeiten?

Nein. Wenn Ihr Theme native Mega-Menüs unterstützt, aktivieren Sie diese direkt im Theme-Editor ohne Code. Codeanpassungen sind nur erforderlich, wenn Sie das Standardverhalten des Drawers grundlegend umbauen oder auf ein separates Menü verweisen möchten.

Quellen

• Shopify Developer Documentation: Navigation and Search — Technische Spezifikationen zu Linklist-Objekten und maximal dreistufiger Verschachtelung.
• Shopify Dawn Repository: header.liquid — Implementierung der Desktop-Menütypen Dropdown, Mega-Menü und Drawer.
• Shopify Dawn Repository: header-drawer.liquid — Drawer-Schleife zur mobilen Navigation bis zur Enkel-Ebene.
• Shopify Liquid API Reference: Link Object — Dokumentation zu Link-Eigenschaften inklusive der Verschachtelungsebenen.
• Nielsen Norman Group: Mega Menus Work Well Anywhere — UX-Forschung zu Touchscreen-Fehlern, visueller Gruppierung und Informationshierarchie.
• W3C Web Accessibility Initiative: Target Size Minimum (WCAG 2.2) — Barrierefreiheitsstandard mit Mindest-Touchzielen von mindestens 24 mal 24 CSS-Pixeln.
• Shopify Community: Main menu nesting mobile vs desktop — Diskussion über den Zwei-Klick-Pfad in Dawns mobiler Navigation.
• Shopify Community: Desktop Mega Menu and Mobile Hamburger Menu — Forenleitfaden zur Zuweisung eines separaten Mobilmenüs im Drawer.
• Shopify Community: DAWN how to show nested menu/submenu on mobile — Diskussion über die parallele Anzeige von Ebene 2 und 3 in Dawns Mobile-Menü.
• Shopify Community: How can I make my desktop menu identical on mobile — Händleranfragen zur Spiegelung von Desktop-Menüs auf Mobilgeräten.
• Helium Meteor Documentation: Welcome to Meteor — Übersicht über getrennte Vorlagen für Desktop- und Mobilmenüs.
• Clean Canvas Blog: Mega Menu Your Shopify Store — Empfehlung für einstufige Mobilmenüs im Symmetry-Theme.
• Navi+ Documentation: Create a Desktop Mega Menu — Anleitung zu Spaltenstapelung, Einbettungen und Sichtbarkeiten.
• Navi+ Documentation: Create a Mobile Menu — Leitfaden für dreistufige Mobilmenüs und Drawer-Einbettungen.
• Navi+ Documentation: Item Visibility — Anleitung zum gerätespezifischen Ausblenden mit Exclude when embedded.