So erstellen Sie ein Desktop-Navigationsmenü in einer Shopify-Menü-App (Schritt für Schritt)

Ein Desktop-Navigationsmenü in einer Menü-App ist nur so gut wie das Konzept dahinter. Wenn Sie einen dreistufigen Baum skizzieren, Spalten statt endloser Listen anlegen, Hover oder Klick gezielt wählen und die Leiste an der richtigen Stelle unter Ihrem Header veröffentlichen, wird Ihr Sortiment mühelos auffindbar.

Für Händler mit wachsendem Warenbestand bietet ein gut strukturiertes horizontales Menü eine klare Orientierung. Käufer sollten nie raten müssen, wo sich Produkte befinden, oder sich durch überfüllte Listen quälen. Durch übersichtliche Spalten unter Ihrem Header ermöglichen Sie Kunden auf dem Desktop einen direkten visuellen Zugriff auf Ihre Kollektionen.

Schnelle Antwort: So erstellen Sie ein Desktop-Navigationsmenü in einer Shopify-Menü-App

Um ein Desktop-Navigationsmenü in einer Shopify-Menü-App zu erstellen, planen Sie einen Menübaum mit bis zu drei Ebenen, aktivieren das App-Embed im Theme, erstellen Ebene-1-Einträge sowie Dropdown-Spalten, wählen Hover oder Klick, veröffentlichen das Menü unter oder anstelle des Header-Menüs und testen alle Bildschirmbreiten.

1. Menübaum planen: Skizzieren Sie bis zu drei Ebenen auf Papier, bevor Sie die App öffnen.
2. App-Embed aktivieren: Schalten Sie das Store Connector Embed im Shopify-Theme-Editor ein.
3. Ebene-1-Einträge anlegen: Erstellen Sie ein Desktop Mega Menu und setzen Sie die Hauptlinks.
4. Dropdown-Spalten aufbauen: Aktivieren Sie den Mehrspalten-Modus und stimmen Sie Spaltenbreiten ab.
5. Unter dem Header veröffentlichen: Wählen Sie Insert After oder Replace und testen Sie Desktop-Breiten.

Der Rest dieses Leitfadens führt Schritt für Schritt durch Navi+ und zeigt typische Fehlerquellen auf.

Was eine Menü-App dem Shopify-Desktop-Menü hinzufügt

Shopify bietet solide Standardfunktionen für die Navigation, deren Layout jedoch stark vom verwendeten Theme abhängt. Laut dem Shopify Help Center kann ein Menüeintrag der obersten Ebene bis zu zwei Ebenen verschachtelter Dropdown-Menüs enthalten. Shopify weist zudem darauf hin, dass das Hauptmenü und Dropdown-Menüs je nach Theme an unterschiedlichen Stellen im Onlineshop angezeigt werden.

Einige Shopify-Themes bringen bereits eigene Mega-Menü-Funktionen mit. Wenn Ihr aktuelles Theme das gewünschte mehrspaltige Layout nativ unterstützt, ist die Nutzung der bordeigenen Einstellungen oft der einfachste Weg. Die folgende Videoanleitung veranschaulicht diesen reinen Theme-Weg:

Wenn Ihr Theme bereits über ein Mega-Menü verfügt, zeigt dieses Video den Weg rein über das Theme.

Wenn ein Produktkatalog jedoch über viele Kategorien wächst, stoßen Standard-Themes an ihre Grenzen. Eine spezialisierte Navigations-App ergänzt wesentliche Layout-Funktionen:

• Individuelle Spaltenbreiten über ein flexibles 12-Spalten-Raster.
• Hervorgehobene Kollektions-Bildkarten direkt in den Dropdown-Bereichen.
• Gezielte Kontrolle zwischen Hover- und Klick-Auslösern.
• Präzise Platzierungsoptionen über, im oder direkt unter dem Theme-Header.

Wie UX-Studien der Nielsen Norman Group belegen, ermöglichen zweidimensionale Mega-Menü-Layouts Besuchern, alle Optionen auf einen Blick zu erfassen, statt sich an verborgene Unterpunkte in tief verschachtelten Flyout-Listen erinnern zu müssen. Um zu prüfen, wo bordeigene Grenzen liegen, lesen Sie unsere Analyse über die Grenzen des integrierten Shopify-Theme-Menüs.

Zuerst den Menübaum planen: Ebene 1, Spalten und Links

Der häufigste Fehler besteht darin, eine Menü-App zu öffnen, bevor die Informationsarchitektur feststeht. Ohne klaren Strukturplan wirken Mega-Menüs schnell überladen. Planen Sie Ihre Navigation vorab auf Papier oder in einer Tabelle anhand eines dreistufigen Baums:

• Ebene 1 (Horizontale Leiste): Die Hauptlinks direkt auf Ihrem Header. Beschränken Sie sich auf fünf bis sieben Einträge, damit die Leiste auf Standard-Laptops einzeilig bleibt.
• Ebene 2 (Dropdown-Spalten): Die Spaltenüberschriften im geöffneten Dropdown. Gruppieren Sie diese nach Kaufabsichten: Produktkategorie, Zielgruppe oder Anlass.
• Ebene 3 (Ziellinks): Die einzelnen Kollektions-, Produkt- oder Seiten-Links unterhalb der Spaltenüberschriften.

Gehen Sie bei der Auswahl streng vor. Untersuchungen der Nielsen Norman Group mahnen, dass Navigationsmenüs noch rücksichtsloser gekürzt werden müssen als reguläre Inhaltsseiten. Jeder überflüssige Link erzeugt Ablenkung. Halten Sie Spaltentitel kurz und nutzen Sie Bilder nur, wenn sie tatsächliche Auswahloptionen wie Kollektionskacheln abbilden.

Hier ist ein Architekturbeispiel für einen ausgewogenen dreistufigen Navigationsbaum:

Damen (Ebene 1)
├── Kleidung (Ebene 2 Spalte - Breite: 3/12)
│   ├── Kleider & Jumpsuits (Ebene 3 Link)
│   └── Tops & Shirts (Ebene 3 Link)
├── Schuhe (Ebene 2 Spalte - Breite: 3/12)
│   ├── Stiefel & Stiefeletten (Ebene 3 Link)
│   └── Sneaker (Ebene 3 Link)
├── Accessoires (Ebene 2 Spalte - Breite: 3/12)
│   ├── Handtaschen (Ebene 3 Link)
│   └── Schmuck (Ebene 3 Link)
└── Highlights (Ebene 2 Spalte - Breite: 3/12)
    └── [Neue Saison Kollektionskarte] (Ebene 3)

Herren (Ebene 1)
├── Bekleidung (Ebene 2 Spalte - Breite: 4/12)
│   ├── Hemden & Polos (Ebene 3 Link)
│   └── Hosen & Chinos (Ebene 3 Link)
└── Schuhe (Ebene 2 Spalte - Breite: 4/12)
    └── Freizeitschuhe (Ebene 3 Link)

Accessoires (Ebene 1)
├── Taschen & Rucksäcke (Ebene 2 Spalte - Breite: 6/12)
└── Gürtel & Schals (Ebene 2 Spalte - Breite: 6/12)

Sale (Ebene 1 - Direkter Link)

Vertiefende Empfehlungen zu visuellen Hierarchien finden Sie in unserem Leitfaden über Mega-Menü Best Practices für Layout und Gruppierung.

Schritt 1: Navi+ installieren und App-Embed aktivieren

Installieren Sie Navi+ aus dem Shopify App Store.

Navi+ wird über ein Theme-App-Embed geladen. Sie müssen dieses Embed daher aktivieren, damit erstellte Menüs im Shop sichtbar werden.

1. Öffnen Sie Ihren Shopify-Adminbereich und gehen Sie zu Online Store > Themes.
2. Wenn Ihr Shop aktiven Besucherverkehr hat, klicken Sie auf das Drei-Punkte-Menü neben Ihrem Theme und wählen Sie Duplizieren. Auf einer Theme-Kopie können Sie Ihr neues Menü sicher einrichten und testen.
3. Klicken Sie auf der Arbeitskopie auf Anpassen (Customize), um den Theme-Editor zu öffnen.
4. Klicken Sie in der linken Seitenleiste auf das Symbol für App-Embeds, wie im Shopify Help Center zu Theme-App-Erweiterungen beschrieben.
5. Suchen Sie den Eintrag Store Connector in der Liste und stellen Sie den Schalter auf Ein.
6. Klicken Sie oben rechts auf die Schaltfläche Speichern.

Beachten Sie, dass App-Embeds an das jeweilige Theme gebunden sind. Wenn Sie später das Theme wechseln oder aktualisieren, müssen Sie das Store Connector Embed im neuen Theme erneut einschalten.

Schritt 2: Desktop Mega Menu erstellen und Ebene-1-Einträge hinzufügen

Wechseln Sie nach der Aktivierung des Embeds zurück in das Dashboard der Navi+ App in Ihrem Shopify-Adminbereich.

1. Klicken Sie auf Neues Menü erstellen und wählen Sie Desktop Mega Menu als Menütyp. Sie können mit einer Vorlage oder einer leeren Struktur starten.
2. Falls Sie eine Vorlage nutzen, löschen Sie alle Beispiel-Einträge, die nicht zu Ihrer Struktur passen.
3. Fügen Sie Ihre Ebene-1-Einträge nacheinander gemäß Ihrer Papierskizze hinzu.
4. Verschieben Sie Einträge per Drag-and-Drop nach oben, unten, links oder rechts. Vertikales Ziehen ändert die Reihenfolge; horizontales Einrücken ordnet Unterpunkte einer Hauptkategorie zu.
5. Weisen Sie jedem Ebene-1-Eintrag eine Ziel-URL zu. Auch wenn ein Eintrag ein Untermenü öffnet, sollte er auf eine übergeordnete Kollektionsseite verlinken, damit Klicks auf das Hauptwort ein klares Ziel haben.

Schritt 3: Dropdown-Spalten, Links und Bilder aufbauen

Wandeln Sie lange Linklisten nun in übersichtliche, gut lesbare Spalten um.

Abbildung 1: Konzeptillustration (Concept illustration) — Schritt 3: Dropdown-Spalten, Links und Bilder aufbauen {#step-3-build-dropdown-columns-links-and-images}

1. Wählen Sie einen Ebene-1-Eintrag aus und aktivieren Sie die Option Is Multi-Column menu item. Dadurch werden direkte Unterpunkte (Ebene 2) als Spaltenüberschriften gerendert.
2. Fügen Sie unter jeder Spaltenüberschrift Ihre Ebene-3-Ziellinks für spezifische Unterkategorien ein.
3. Definieren Sie die Spaltenbreiten über das 12-Spalten-Raster. Bei vier Spalten vergeben Sie beispielsweise Breiten von 3/12, 3/12, 3/12 und 3/12. Bei zwei Spalten wählen Sie jeweils 6/12.
4. Enthält ein Dropdown wenige Links, passen Sie die Einstellung für die Breite mehrspaltiger Untermenüs an, um unnötigen Leerraum zu vermeiden. Bei nur drei oder vier Links ist ein klassisches einspaltiges Dropdown oft sauberer.
5. Platzieren Sie eine anklickbare Kollektions-Bildkarte in der rechten Spalte. Stellen Sie sicher, dass das Bild direkt auf eine Kollektion verlinkt, damit es als echte Handlungsoption dient. Strukturierte zweidimensionale Layouts helfen Kunden bei fundierten Entscheidungen.

Schritt 4: Hover oder Klick wählen und Leiste gestalten

Entscheiden Sie als Nächstes, wie Käufer Dropdowns öffnen, und stimmen Sie das Design auf Ihren Markenauftritt ab.

Onlinehändler diskutieren oft, ob Dropdowns per Maus-Hover oder durch Klick öffnen sollten. Die Forschung zeigt klare Vor- und Nachteile auf:

In Navi+ erfolgt die Wahl über einen einzigen Schalter. Nutzen Sie in den Layouteinstellungen die Option Show submenu on hover. Ist sie aktiviert, öffnet sich das Untermenü bei Mausberührung; ist sie deaktiviert, öffnet sich das Menü ausschließlich per Klick.

Passen Sie anschließend das Erscheinungsbild an:

• Stimmen Sie Hintergrund- und Textfarben harmonisch auf Ihren Header ab.
• Definieren Sie dezente Hover-Farben oder Unterstreichungen für klares visuelles Feedback.
• Justieren Sie Schriftgrößen und Innenabstände, damit sich die Leiste harmonisch neben Logo und Header-Icons einfügt.

Schritt 5: Unter dem Header veröffentlichen und jede Bildschirmbreite testen

Das Speichern in der App blendet das Menü noch nicht automatisch im Shop ein. Sie müssen das Menü veröffentlichen, damit es auf Ihrer Website erscheint.

Abbildung 2: Konzeptillustration (Concept illustration) — Schritt 5: Unter dem Header veröffentlichen und jede Bildschirmbreite testen {#step-5-publish-under-the-header-and-test-every-screen-width}

Klicken Sie in Navi+ auf Publish to website und wählen Sie Ihre Einbau-Methode:

Um Konflikte mit mobilen Darstellungen zu vermeiden, hängen Sie das Suffix (D) an Ihren Selektor an (z. B. header(D)). Dies begrenzt die Regel strikt auf Desktop-Bildschirme.

Standardmäßig schalten Bildschirme schmaler als 768px in den mobilen Modus um.

Testen Sie Ihren Shop vor der Freigabe auf verschiedenen Bildschirmbreiten:

1. Breite Desktop-Monitore: Prüfen Sie, ob mehrspaltige Dropdowns zentriert bleiben und Proportionen stimmen.
2. Standard-Laptops: Kontrollieren Sie, ob alle Ebene-1-Einträge in einer Zeile bleiben und nicht umbrechen.
3. Tablets und kompakte Laptops: Überprüfen Sie den Übergang am 768px-Breakpoint auf flüssigen Wechsel.

Detaillierte Anleitungen finden Sie in unserem Tutorial über das Hinzufügen eines Mega-Menüs zum Dawn-Theme sowie in der Übersicht zu Navi+ Menüs auf beliebten Shopify-Themes. Screenshots bietet die offizielle Veröffentlichungsanleitung mit Screenshots.

Wenn Ihr Shop auch eine mobile Navigation benötigt, bettet Smart responsive eine Live-Referenz Ihres Desktop-Menübaums in eine mobile Slide-Drawer-Leiste ein, ohne dass Sie einen zweiten Baum pflegen müssen.

Häufige Probleme: Menü wird nicht angezeigt, vom Header verdeckt, zweizeilig

Bei der Einrichtung können gelegentlich unerwartete Darstellungsfehler auftreten. Nutzen Sie diese Matrix zur schnellen Fehlerbehebung:

Weitere Konfigurationstipps und Detailfragen finden Sie in den Desktop Mega Menu FAQ.

Abwägungen: Wann ein einfaches Dropdown ein Mega-Menü schlägt

Ein mehrspaltiges Mega-Menü ist ein mächtiges Werkzeug, aber nicht für jeden Shopify-Shop die beste Wahl. Beachten Sie die praktischen Abwägungen:

• Kompakte Kataloge: Bei wenigen Produkten oder zwei bis drei Kollektionen ist Shopifys Standardmenü oder ein einspaltiges Dropdown schneller und sauberer. Zwei verschachtelte Ebenen reichen für kleine Sortimente völlig aus.
• Laufender Pflegeaufwand: Mega-Menüs erfordern kontinuierliche Pflege. Wenn Kollektionen wechseln oder Aktionen auslaufen, müssen Spalten und Bilder manuell angepasst werden, um verwaiste Links zu vermeiden.
• Hover-Risiken: Auf Hover basierende Menüs können Kunden frustrieren, wenn Verzögerungszeiten fehlen oder Touch-Laptops genutzt werden.
• App-Abhängigkeit: Eine Menü-App erfordert ein App-Embed, das bei jedem Theme-Wechsel erneut überprüft werden muss.

Ein Mega-Menü lohnt sich bei tiefen Sortimenten, vielen Unterkategorien und aussagekräftigen Kollektionskarten. Wie Sie die passende Struktur wählen, erfahren Sie in unserem Ratgeber über die Auswahl des richtigen Menütyps für Ihren Shop.

Wie Navi+ sich einfügt

Navi+ Tab Bar & Mega Menu schließt die Lücke zwischen starren Theme-Vorlagen und komplexem Custom-Code.

Für Desktop-Shops bietet Navi+ einen spezialisierten Desktop-Mega-Menü-Builder auf Basis eines klaren dreistufigen Baums. Händler können Spaltenbreiten frei im Raster anpassen, Hover oder Klick per Schalter wählen und die Leiste via Insert After oder Replace mit Desktop-Filter platzieren.

Für kleinere Laptop-Monitore bietet Navi+ eine Breakpoint-Einstellung und einen Überlauf-Pfeil, der überschüssige Top-Level-Einträge hinter einem Pfeil bündelt, statt sie umzubrechen. Smart responsive bettet zudem eine Live-Referenz Ihres Desktop-Baums in ein mobiles Slide-Menü ein, sodass Sie keinen zweiten Baum aufbauen müssen.

Wenn Sie dies in Ihrem eigenen Shop testen möchten, können Sie mit Navi+ Tab Bar & Mega Menu das hier beschriebene Desktop Mega Menu auf einer Theme-Kopie risikofrei aufbauen und jederzeit deaktivieren.

Checkliste vor der Veröffentlichung

Gehen Sie diese Schritte durch, bevor Sie Ihr neues Menü für Besucher freischalten:

• Menübaum skizziert: Maximal drei Ebenen auf Papier geplant (Hauptleiste, Spalten, Links).
• App-Embed aktiv: Store Connector im Theme-Editor unter App-Embeds aktiviert und gespeichert.
• Ebene-1-Einträge balanciert: Hauptpunkte passen auf Standard-Laptops in eine einzige horizontale Zeile.
• Spalten strukturiert und bemessen: Ebene-2-Einträge als Spaltenköpfe mit passenden Breiten angelegt.
• Bilder geprüft: Bildkarten nur für funktionale Kollektionsauswahlen eingesetzt.
• Auslöser gewählt: Bewusst für Klick oder Hover mit passender Verzögerungszeit entschieden.
• Selektor geprüft: Insert After oder Replace mit korrektem Header-Selektor und Suffix (D) konfiguriert.
• Breiten getestet: Darstellung auf Breitbild-Monitor, Standard-Laptop und Tablet überprüft.
• Tastatur-Zugänglichkeit geprüft: Verifiziert, dass Tab durch Einträge navigiert und Escape das Menü schließt (W3C Disclosure-Standard).
• Links validiert: Jeden Link einmal angeklickt, um Weiterleitungen zu Kollektionen und Seiten zu bestätigen.

Wenn Sie dies in Ihrem eigenen Shop testen möchten, können Sie mit Navi+ Tab Bar & Mega Menu das hier beschriebene Desktop Mega Menu auf einer Theme-Kopie risikofrei aufbauen und jederzeit deaktivieren.

Häufig gestellte Fragen (FAQ)

### Wie viele Ebenen kann ein Desktop-Menü haben?

Shopifys Standard-Dropdowns erlauben bis zu zwei verschachtelte Ebenen unter einem Haupteintrag. Ein Navi+ Desktop Mega Menu wird dreistufig aufgebaut: Hauptleiste, Spaltenköpfe und Ziellinks.

### Sollte ein Mega-Menü per Hover oder Klick öffnen?

Beides funktioniert bei sorgfältiger Umsetzung: Hover benötigt eine kurze Verzögerung (Baymard empfiehlt 300–500 ms), während Klick die barrierefreie Standardoption ist. In Navi+ genügt ein Klick auf “Show submenu on hover”.

### Wo erscheint das Menü auf meinem Header?

Mit Insert After und dem Selektor header erscheint das Menü direkt unter dem Header. Mit Replace wird das Theme-Menü ausgeblendet und Navi+ nimmt dessen Platz ein.

### Warum wird mein Menü nach der Installation nicht angezeigt?

Meist ist das App-Embed deaktiviert oder das Menü noch nicht veröffentlicht. Prüfen Sie Store Connector im Theme-Editor, kontrollieren Sie den Selektor und justieren Sie bei Sticky-Headern den Z-Index.

### Warum wechselt mein Desktop-Menü auf dem Tablet zum mobilen Menü?

Standardmäßig schalten Bildschirme unter 768px in den mobilen Modus. Sie können den Breakpoint in den Layouteinstellungen senken und Überlauf-Pfeile für Zwischenbreiten aktivieren.

### Kann dasselbe Menü auf Mobilgeräten angezeigt werden?

Ja, Smart responsive bettet eine Live-Referenz des Desktop-Menüs in ein mobiles Slide-Menü ein, ohne dass ein zweiter Menübaum gepflegt werden muss.

Quellen

• Shopify Help Center: Drop-down menus
• Shopify Help Center: App embeds in themes
• Nielsen Norman Group: Mega Menus Work Well
• Nielsen Norman Group: Mega Menus Gone Wrong
• Baymard Institute: Dropdown Menu Flickering Issue
• Smashing Magazine: Frustrating Design Patterns: Mega-Dropdown Hover Menus
• Shopify Dawn Theme PR #1316
• W3C WAI-ARIA APG: Disclosure Navigation Example
• Navi+ Help: Publishing on Shopify
• Navi+ Help: Desktop Mega Menu FAQ
• Navi+ Help: How to Use Desktop Mega Menu
• Navi+ Help: Setting Layout