Add a mega menu to Shopify's Xclusive theme — Navi+ setup
Im Live-Demo-Shop: das Slide Menu verbindet sich mit dem bestehenden Hamburger-Menü (.text-justify) und blendet die native Schublade ([class*='mobile-nav']) aus — kein sichtbarer Unterschied für Käufer. Die Selektortabelle und Konfigurationsanleitungen unten gelten speziell für dieses Motiv.
1 Design-Analyse
generic stimmt überein2 Navigationsanatomie — Selektor-Zuordnung
Selektoren bestätigt eindeutig (matchCount = 1) im Live-Demo-Shop. Rolle nur vorhanden, falls gefunden.
| Rolle | CSS-Selektor | Plattform | Verwendet für |
|---|---|---|---|
| Navi+ Mount-Ziele | |||
| Hamburger-Trigger | .text-justify |
Mobil | Navi+ bindet hier ein, um das Slide Menu zu aktivieren |
| Header | .shopify-section-group-header-group |
Mobil + Desktop | Mega Menu unter der Kopfzeile von Xclusive einfügen |
| Logo | #header-inner |
Mobil + Desktop | Fallback — Auslöser-Symbol vor Logo einfügen, wenn kein Hamburger-Menü vorhanden ist |
| Panel-Auslöser | |||
| Hamburger-Trigger | .text-justify |
Mobil | Tippen, um die native mobile Schublade zu öffnen |
| Suchsymbol | a[href*='/search'] |
Mobil + Desktop | Tippen, um das Suchfenster / die Suchebene zu öffnen |
| Warenkorb-Symbol | a[href$='/cart'] |
Mobil + Desktop | Tippen, um die Warenkorb-Schublade / das Wagen-Panel zu öffnen |
Fügen Sie eine Navi+ Tab Bar zum Xclusive Shopify-Design hinzu
Eine Tab Bar heftet einen festen Navigationsstreifen an den unteren Bildschirmrand auf Mobilgeräten — genau dort, wo der Daumen ruht. Xclusive Käufer erreichen Ihr Menü, Suche und Warenkorb von jeder Seite aus, ohne zum Header zurückzuscrollen.
- App-ähnliche Navigation — ein natives Gefühl für das mobile Web
- Ein-Tap-Warenkorb-Zugang, um die mobile Checkout-Rate zu erhöhen
- Sitzt unter dem Xclusive Header — konkurriert niemals mit der eigenen Navigation des Designs
Das Link-Feld jedes Tabs akzeptiert eine normale URL, open:NaviMenu(EMBED_ID) um ein anderes Navi+-Menü zu öffnen, oder eine integrierte Open-Action, die Xclusive's eigene Panels auslöst. Navi+ behält die Schublade, Suche und den Warenkorb des Designs — der Tab öffnet diese einfach.
.text-justifya[href*='/search']a[href$='/cart']- Erstellen Sie in Navi+ ein neues Menü und wählen Sie Tab Bar.
- Fügen Sie Ihre Tabs hinzu — Name, Symbol, Warenkorbanzahl-Abzeichen und verlinken Sie jeden einzelnen (z. B. Startseite, Shop, Suche, Warenkorb, Menü).
- Um die native Schublade, Suche oder den Warenkorb von Xclusive zu öffnen, stellen Sie den Tab-Link auf die passende Öffnungsaktion ein. Um stattdessen ein Navi+ Slide- oder Mega-Menü zu öffnen, verwenden Sie
open:NaviMenu(EMBED_ID). - Öffnen Sie Publish, aktivieren Sie den Sticky-Modus und stellen Sie den Gerätefilter auf Mobile ein.
Ersetzen Sie die Xclusive Mobile Schublade durch ein Navi+ Schiebe-Menü
Ein Schiebe-Menü ersetzt Xclusive's Standard-Mobil-Schublade durch ein reichhaltigeres Mehrebenenpanel — Symbole, Bilder und benutzerdefinierte Gruppierung — geöffnet durch denselben Hamburger, den Ihre Käufer bereits verwenden.
- Unbegrenzte mehrstufige Navigation mit Symbolen und Bildern
- Dieselbe Schaltfläche, dieselbe Position — Käufer bemerken den Austausch nie
- Ideal für Kataloge mit vielen Sammlungen zur Organisation auf Mobilgeräten
Der Hamburger-Trigger .text-justify wurde als eindeutig auf der Live-Demo Xclusive bestätigt, daher öffnet Navi+ das Schiebe-Menü genau von der Schaltfläche, die Käufer bereits antippen.
- Erstellen Sie in Navi+ ein neues Menü und wählen Sie Schiebe-Menü.
- Fügen Sie Ihre Kategorien mit Symbolen, Farben, Bildern und so vielen Ebenen hinzu, wie Sie benötigen.
- Öffnen Sie Publish, aktivieren Sie das Menü und stellen Sie den Trigger auf
.text-justifyein — Hamburger-Selektor von Xclusive. - Speichern Sie. Das Schiebe-Menü öffnet sich nun von dieser Schaltfläche. Hängen Sie
(M)an, um es mobil-nur zu halten.
Fügen Sie ein Navi+ Raster-Menü zum Xclusive Design hinzu
Ein Raster-Menü zeigt Ihre Sammlungen als Bildraster — ein App-ähnlicher Starter, mit dem Käufer mit einem Antippen direkt zu jeder Sammlung springen können.
- Visuell, bildgesteuert — Käufer sehen die Sammlung vor dem Lesen ihres Namens
- Kein Xclusive Selektor erforderlich zum Montieren
- Großartig für Shops mit vielen Sammlungen zum schnellen Durchsuchen
Ein Raster-Menü kann an einer festen Stelle auf einer beliebigen Xclusive Seite eingefügt werden (verweisen Sie auf einen CSS-Selektor) oder bei Bedarf von einem FAB oder Tab Bar Tab geöffnet werden — Ihre Wahl.
- Erstellen Sie in Navi+ ein neues Menü und wählen Sie Raster-Menü.
- Sammlungen hinzufügen: Miniaturbild, Anzeigename und Link, in der Reihenfolge, in der sie im Raster angezeigt werden sollen.
- In Publish aktivieren Sie die Insert/Replace-Methode, geben Sie den CSS-Zielsektor ein und wählen Sie Insert After oder Replace.
- Bevorzugen Sie ein Pop-up? Überspringen Sie den Selektor und öffnen Sie es von einem FAB oder Tab mit
open:NaviMenu(EMBED_ID).
Fügen Sie eine Navi+ schwebende Schaltfläche (FAB) zum Xclusive Design hinzu
Ein FAB (Floating Action Button) ist eine schwebende Schaltfläche, die beim Scrollen sichtbar bleibt — eine schnelle Verknüpfung zu jeder Seite oder Aktion. Kein Design-Selektor, in Minuten bereitgestellt.
- Kommt niemals in Konflikt mit irgendeinem Teil von Xclusive
- Flexibel: Link zum Warenkorb, eine Kontaktseite, eine Promo, jede URL
- Funktioniert auf Desktop und Mobilgeräten
Ein FAB montiert sich vollständig von selbst — kein CSS-Selektor vom Xclusive Design erforderlich. Stellen Sie es auf und veröffentlichen Sie es, ohne einen Selektor zu testen.
- Erstellen Sie in Navi+ ein neues Menü und wählen Sie FAB.
- Wählen Sie das Symbol, die Hintergrundfarbe und die Größe — verwenden Sie ein integriertes Symbol oder laden Sie Ihr eigenes hoch.
- Wählen Sie eine Position: unten rechts (am häufigsten), unten links oder eine beliebige feste Ecke.
- Legen Sie die Aktion fest: Link zu einer Sammlung, zum Warenkorb, zur Kontakt- oder Promo-Seite oder öffnen Sie ein anderes Menü (Raster, Schiebe…) mit
open:NaviMenu(EMBED_ID). - Öffnen Sie Publish und aktivieren Sie den Sticky-Modus. Die FAB funktioniert auf allen Geräten.
Fügen Sie ein Navi+ mobiles Mega-Menü zum Xclusive Design hinzu
Auf Mobilgeräten wird ein Mega-Menü als Mehrebenenpanel angezeigt — sodass Käufer Ihren gesamten Katalog auf einem Telefon mit klarer Hierarchie, Bildern und Bannern durchsuchen können.
- Mehrebeniges Menü mit Symbolen und Bildern auf kleinen Bildschirmen
- Öffnen Sie es unter dem Header oder von einem Tab Bar Tab
- Großartig, wenn ein Shop viele Kategorien auf Mobilgeräten anzuzeigen hat
Ein mobiles Mega-Menü ist ein Bereichsmenü. Fügen Sie es direkt unter dem Xclusive Header ein oder öffnen Sie es von einem Tab Bar Tab — beides funktioniert, ohne sich an das eigene Menü des Designs zu binden.
- Erstellen Sie in Navi+ ein neues Menü, wählen Sie Mega-Menü und gestalten Sie die mehrstufigen Spalten (Kategorien, ausgewählte Bilder, Banner).
- In Publish aktivieren Sie die Insert/Replace-Methode, geben Sie
header(M)ein und wählen Sie Insert After — wird unter dem mobilen Header eingefügt. - Möchten Sie es von einem Tab öffnen? Lassen Sie es hier unveröffentlicht und verweisen Sie einen Tab Bar "Menü"-Tab mit
open:NaviMenu(EMBED_ID). - Halten Sie den Gerätefilter auf Mobil.
Fügen Sie ein Navi+ Mega-Menü unter dem Xclusive Header ein
Fügen Sie ein Mega-Menü unter dem Header ein — eine mehrspaltige Dropdown-Leiste, die direkt unter dem Xclusive Header beim Hover angezeigt wird, ohne Änderungen am Liquid des Designs.
- Mehrspaltige Dropdown mit Bildern und ausgewählten Links
- Lässt das eigene Menü des Designs unverändert — beide Menüs koexistieren
- Die sauberste Methode zum Montieren, wenn das Design das Einfügen unterstützt
Xclusive ist nicht headerInsertSafe — das Einfügen unter dem Header kann horizontalen Überfluss verursachen. Nutzen Sie stattdessen den Ersatzmodus (siehe unten).
- Erstellen Sie in Navi+ ein neues Menü, wählen Sie Mega-Menü und gestalten Sie die Dropdown-Spalten (Kategorien, ausgewählte Bilder, Produkte, Banner).
- In Publish aktivieren Sie die Insert/Replace-Methode.
- Geben Sie den Selektor
.shopify-section-group-header-group(D)ein und wählen Sie Nach dem Einfügen — die Mega-Leiste wird direkt unter dem {Xclusive} Header angezeigt. - Das Geräte-Suffix
(D)hält es nur auf Desktop.
Ersetzen Sie das {Xclusive} Desktop-Menü durch ein Navi+ Mega-Menü
Der Ersatzmodus tauscht das native Menü im Header vollständig aus — Navi+ wird direkt in diesen Container gerendert, wobei das {Xclusive} Header-Layout erhalten bleibt.
- Behält die Position des Menüs im Header — keine zusätzliche Leiste
- Beste Wahl, wenn Sie zwei Navigationszeilen nicht möchten
- Funktioniert auf jedem Design, auch ohne
headerInsertSafe
Kein Hauptmenü-Selektor wurde in der Live-Demo {Xclusive} erkannt — geben Sie ihn manuell ein (suchen Sie ihn mit Navi+ Debug-Modus).
- Erstellen Sie in Navi+ ein neues Menü, wählen Sie Mega-Menü und gestalten Sie die Dropdown-Spalten.
- In Publish aktivieren Sie die Insert/Replace-Methode.
- Geben Sie den Desktop-Navigations-Selektor
nav.header__inline-menu ul.list-menu(D)ein und wählen Sie Ersetzen — Navi+ wird anstelle des nativen {Xclusive} Menüs gerendert. - Nach der Wahl von Ersetzen optimieren Sie für Flash-freies Laden — siehe die Veröffentlichungsanleitung.
Fügen Sie ein Trigger-Symbol vor dem {Xclusive} Logo ein
Fügen Sie ein Trigger-Symbol vor dem Logo hinzu — ein benutzerdefinierter Hamburger neben dem {Xclusive} Logo für Designs ohne Standard-Mobil-Hamburger oder als zweiter Einstiegspunkt in Ihr Schiebe-/Mega-Menü.
- Erstellt einen neuen Triggerpunkt ohne Liquid-Bearbeitung
- Natürliche Platzierung — direkt neben dem Logo, vertraut für Käufer
- Großartig für Desktop-zentrierte Designs ohne Mobil-Hamburger
Der Logo-Selektor #header-inner wurde auf {Xclusive} bestätigt, daher kann Navi+ ein Trigger-Symbol direkt davor einfügen.
- Ein erweitertes Muster — für Designs ohne Mobil-Hamburger oder um einen zweiten Einstiegspunkt hinzuzufügen.
- Erstellen Sie ein kleines Ein-Element-Menü (ein Ein-Element-Mega/Schiebe), dessen Element Ihr Hauptschiebe-Menü mit
open:NaviMenu(EMBED_ID)öffnet. - In Publish aktivieren Sie die Insert/Replace-Methode, geben Sie
#header-inner(M)ein und wählen Sie Insert Before — Symbol erscheint vor dem Xclusive-Logo. - Ein wenig benutzerdefiniertes CSS richtet es aus; kontaktieren Sie den Support, wenn Sie eine Hand brauchen.
11 Wie man ein Navi+-Menü zu Xclusive hinzufügt
Jeden Menütyp auf dieser Seite folgen die gleichen drei Schritte. Aktivieren Sie die App einmal — dann ist jedes neue Menü nur Design und Veröffentlichung. Keine Liquid-Bearbeitung erforderlich.
- Navi+ einmalig aktivieren. Gehen Sie in der Shopify-Admin zu Online Store → Themes → Customize → App embeds und schalten Sie Navi+ ein. Dies lädt die App auf Ihrer Xclusive-Storefront und deckt jedes Menü ab, das Sie erstellen. Installationsanleitung →
- Gestalten Sie das Menü im Navi+-Editor — Elemente, Symbole, Bilder, Spalten und Farben.
- Veröffentlichen Sie es. Öffnen Sie das Veröffentlichungspanel des Menüs. Floating-Menüs (Tab Bar, FAB) benötigen nur den Veröffentlichungs-Toggle; Schiebe- und Bereichsmenüs verweisen auf einen CSS-Selektor aus der Tabelle oben.
Fügen Sie (M) oder (D) zu jedem Selektor hinzu, um nur Mobilgeräte oder nur Desktops anzusprechen — z. B. header(D). Unsicher bei einem Selektor? Öffnen Sie yourstore.com/#navidebug-on, zeigen Sie auf ein Element und drücken Sie Strg/Cmd + C, um es zu kopieren.
Live-Interaktionstests
Playwright klickt automatisch durch den Live-Demo-Shop Xclusive und erfasst das Ergebnis.
Häufig gestellte Fragen — Navi+ auf dem Xclusive Shopify-Design
Wie füge ich ein Navi+-Menü zum {Xclusive} Shopify-Design hinzu?
Wie füge ich eine Tab Bar zum {Xclusive} Shopify-Design hinzu?
a[href$='/cart']).Wie füge ich ein Mega-Menü zum {Xclusive} Shopify-Design hinzu?
nav.header__inline-menu ul.list-menu(D) durch Replace — keine Theme-Code-Bearbeitung erforderlich.Wie ersetze ich das {Xclusive} Mobil-Menü durch ein ausfahrendes Menü?
.text-justify. Das Schiebe-Menü öffnet sich dann von der gleichen Schaltfläche, die Käufer bereits antippen und ersetzt die native Schublade.Muss ich {Xclusive}'s Design-Code bearbeiten, um ein Menü hinzuzufügen?
Funktioniert Navi+ mit dem {Xclusive} Shopify-Design?
Andere Designs der generic-Familie
Navi+ Menüs zu anderen Shopify-Designs hinzufügen
Selektor-Referenz
Panel-Container und ergänzende Selektoren — werden zur Zustandserkennung oder zum Ausblenden nativer Elemente verwendet.
| Rolle | CSS-Selektor | Plattform | Verwendet für |
|---|---|---|---|
| Schiebe-Schublade | [class*='mobile-nav'] |
Mobil | Native Schublade — wird ausgeblendet, wenn Navi+ Slide Menu aktiv ist |
| Suchmodal | — | Mobil + Desktop | Suchfenster Container — Öffnen/Schließen-Status erkennen |
| Warenkorb-Schublade | — | Mobil + Desktop | Warenkorb-Schublade Container — Öffnen/Schließen-Status erkennen |
| Mega-Menü | — | Desktop | Kein natives Mega Menu — Navi+ fügt eines stattdessen ein |