Add a mega menu to Shopify's Shapes theme — Navi+ setup
Im Live-Demo-Shop: das Slide Menu verbindet sich mit dem bestehenden Hamburger-Menü (.-m-1) und blendet die native Schublade (.drawer-transition-host) aus — kein sichtbarer Unterschied für Käufer; Mega Menu fügt sich sauber unter der Kopfzeile ein — dieses Motiv hat keine Probleme mit horizontalem Überlauf (headerInsertSafe = true). 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 | .-m-1 |
Mobil | Navi+ bindet hier ein, um das Slide Menu zu aktivieren |
| Header | .site-header |
Mobil + Desktop | Mega Menu unter der Kopfzeile von Shapes einfügen |
| Hauptmenü | [class*='header'] nav[role='navigation'] |
Desktop | Navi+ Mega Menu ersetzt den Desktop-Navigationsinhalten |
| Logo | .site-header__logo-link |
Mobil + Desktop | Fallback — Auslöser-Symbol vor Logo einfügen, wenn kein Hamburger-Menü vorhanden ist |
| Panel-Auslöser | |||
| Hamburger-Trigger | .-m-1 |
Mobil | Tippen, um die native mobile Schublade zu öffnen |
| Suchsymbol | button[aria-label*='search' i] |
Mobil + Desktop | Tippen, um das Suchfenster / die Suchebene zu öffnen |
| Warenkorb-Symbol | button[class*='cart'] |
Mobil + Desktop | Tippen, um die Warenkorb-Schublade / das Wagen-Panel zu öffnen |
Fügen Sie eine Navi+ Tab Bar zum Shapes Shopify-Design hinzu
Eine Tab Bar heftet einen festen Navigationsstreifen an den unteren Bildschirmrand auf Mobilgeräten — genau dort, wo der Daumen ruht. Shapes 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 Shapes 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 Shapes's eigene Panels auslöst. Navi+ behält die Schublade, Suche und den Warenkorb des Designs — der Tab öffnet diese einfach.
.-m-1button[aria-label*='search' i]button[class*='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 Shapes 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 Shapes Mobile Schublade durch ein Navi+ Schiebe-Menü
Ein Schiebe-Menü ersetzt Shapes'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 .-m-1 wurde als eindeutig auf der Live-Demo Shapes 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
.-m-1ein — Hamburger-Selektor von Shapes. - 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 Shapes 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 Shapes 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 Shapes 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 Shapes 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 Shapes
- 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 Shapes 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 Shapes 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 Shapes 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 Shapes Header ein
Fügen Sie ein Mega-Menü unter dem Header ein — eine mehrspaltige Dropdown-Leiste, die direkt unter dem Shapes 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
Shapes ist headerInsertSafe = true — ein Mega-Menü wird unter dem Header ohne horizontalen Überfluss eingefügt, und das native Menü bleibt an Ort und Stelle.
- 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
.site-header(D)ein und wählen Sie Nach dem Einfügen — die Mega-Leiste wird direkt unter dem {Shapes} Header angezeigt. - Das Geräte-Suffix
(D)hält es nur auf Desktop.
Ersetzen Sie das {Shapes} 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 {Shapes} 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
Der Hauptmenü-Selektor [class*='header'] nav[role='navigation'] wurde bestätigt — Navi+ rendert das Mega-Menü genau dort, wo das native Menü im {Shapes} Header sitzt.
- 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
[class*='header'] nav[role='navigation'](D)ein und wählen Sie Ersetzen — Navi+ wird anstelle des nativen {Shapes} 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 {Shapes} Logo ein
Fügen Sie ein Trigger-Symbol vor dem Logo hinzu — ein benutzerdefinierter Hamburger neben dem {Shapes} 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 .site-header__logo-link wurde auf {Shapes} 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
.site-header__logo-link(M)ein und wählen Sie Insert Before — Symbol erscheint vor dem Shapes-Logo. - Ein wenig benutzerdefiniertes CSS richtet es aus; kontaktieren Sie den Support, wenn Sie eine Hand brauchen.
11 Wie man ein Navi+-Menü zu Shapes 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 Shapes-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 Shapes und erfasst das Ergebnis.
Häufig gestellte Fragen — Navi+ auf dem Shapes Shopify-Design
Wie füge ich ein Navi+-Menü zum {Shapes} Shopify-Design hinzu?
Wie füge ich eine Tab Bar zum {Shapes} Shopify-Design hinzu?
button[class*='cart']).Wie füge ich ein Mega-Menü zum {Shapes} Shopify-Design hinzu?
.site-header(D) mit Insert After ein — keine Theme-Code-Bearbeitung erforderlich.Wie ersetze ich das {Shapes} Mobil-Menü durch ein ausfahrendes Menü?
.-m-1. Das Schiebe-Menü öffnet sich dann von der gleichen Schaltfläche, die Käufer bereits antippen und ersetzt die native Schublade.Muss ich {Shapes}'s Design-Code bearbeiten, um ein Menü hinzuzufügen?
Funktioniert Navi+ mit dem {Shapes} 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 | .drawer-transition-host |
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 |