Veröffentlichung auf Shopify
Schritt 2: (Shopify) Veröffentlichen Sie das Menü auf Ihrer Website.
I) METHODE 1: FÜGEN SIE (VOR ODER NACH) DIESEM MENÜ AN EINER BESTIMMTEN STELLE AUF IHRER WEBSITE EIN, ODER ERSETZEN SIE EIN BESTEHENDES MENÜ, MIT EINEM CSS-SELECTOR. (RECOMMENDED)
I.1. Aktivieren Sie Navi+ in App-Embeds
Schritt 1: Klicken Sie auf Online-Shop, dann auf Themes. Tipps: Klicken Sie mit der rechten Maustaste auf Online-Shop und wählen Sie „Link in neuem Tab öffnen“, um Zeit zu sparen.
Schritt 2: Wählen Sie das Theme aus, in dem Sie das Menü veröffentlichen möchten. Klicken Sie auf: Anpassen
- Wenn Ihre Website neu ist und noch keine Benutzer hat, können Sie das Menü ohne Bedenken veröffentlichen – Sie können es jederzeit einfach ein- oder ausschalten, ohne die Besucher zu beeinträchtigen.
- Wenn Ihre Website bereits regelmäßigen Verkehr hat, seien Sie vorsichtiger. Die beste Praxis ist, ein dupliziertes Theme zu erstellen und Navi+ zuerst in dieser Version zu testen.
Schritt 3: Gehen Sie zu App-Embeds, suchen Sie nach „Navi+ auf allen Seiten“ und aktivieren Sie es.
Schritt 4: Vergessen Sie nicht, auf „Speichern“ zu klicken, um die Änderungen anzuwenden.
Nach diesen 4 Schritten wurde Navi+ auf Ihrer Website installiert und ist bereit zur Anzeige. Der Prozess ist jedoch noch nicht abgeschlossen. Gehen Sie zurück zum Navi+-App-Tab, um tatsächlich Menü veröffentlichen zu aktivieren.
I.2. Verständnis des CSS-Selectors
Ein CSS-Selector ist eine Möglichkeit, ein bestimmtes HTML-Element auf Ihrer Webseite anzusprechen. Navi+ verwendet ihn, um genau zu wissen, wo Ihr Menü platziert werden soll – ob es vor oder nach einem Element eingefügt oder ein bestehendes vollständig ersetzt werden soll.
Um den richtigen CSS-Selector für Ihre Website zu finden, können Sie verwenden:
- Debug-Modus — Navi+’s integriertes Tool: Fahren Sie mit der Maus über ein beliebiges Element und kopieren Sie sofort seinen Selector
- Browser DevTools — Manuelle Methode mit dem Inspektor Ihres Browsers
So finden Sie den CSS-Selector mit Browser DevTools
Sie können mit einem Navi+-Supporter chatten, um sofortige Hilfe zu erhalten, anstatt es selbst zu tun. Wenn Sie es jedoch selbst tun möchten, folgen Sie den Screenshots unten.
I.3. Drei Veröffentlichungsoptionen
Schritt 1: Klicken Sie auf die Schaltfläche Auf Website veröffentlichen.
Schritt 2: Aktivieren Sie den Schalter “Menü veröffentlichen durch Einfügen/Ersetzen-Methode”.
Schritt 3: Geben Sie Ihren CSS-Selector ein und wählen Sie eine der drei Veröffentlichungsoptionen unten aus.
Option 1: Vorher einfügen
Fügt das Navi+-Menü sofort vor dem ausgewählten Element ein.
Beispiel: CSS-Selector main → das Menü erscheint über dem Hauptinhalt der Seite.
Häufige CSS-Selectoren für Shopify-Themes (Dawn, Sense, Savor, Horizon):
main— die meisten Shopify-Themes#MainContent— Shopify Dawn-Theme
Nicht in dieser Liste? Chatten Sie mit einem Navi+-Supporter oder verwenden Sie Debug-Modus oder Browser DevTools.
Option 2: Nachher einfügen (am häufigsten für Desktop Mega Menu)
Fügt das Navi+-Menü sofort nach dem ausgewählten Element ein.
Beispiel: CSS-Selector header → das Menü erscheint direkt unter dem Header.
Häufige CSS-Selectoren für Shopify-Themes (Dawn, Sense, Savor, Horizon):
header— die meisten Shopify-Themes.header-wrapper— einige Themes.announcement-bar— platziert das Menü direkt unter einer Ankündigungsleiste
Nicht in dieser Liste? Chatten Sie mit einem Navi+-Supporter oder verwenden Sie Debug-Modus oder Browser DevTools.
Option 3: Ersetzen
Ersetzt das ausgewählte Element vollständig durch das Navi+-Menü. Das ursprüngliche Element wird ausgeblendet und Navi+ nimmt seinen Platz ein.
Beispiel: CSS-Selector .header-menu → die Standardnavigation des Themes wird durch Ihr Navi+ Mega Menu ersetzt.
Häufige CSS-Selectoren für Shopify-Themes (Dawn, Sense, Savor, Horizon):
.header-menu— Shopify Dawn-Theme.header__menu— einige Themes
Hinweis: Ein kurzes Aufblitzen des ursprünglichen Menüs kann erscheinen, während Navi+ lädt. Siehe I.5 unten, um dies zu verhindern.
Nicht in dieser Liste? Chatten Sie mit einem Navi+-Supporter oder verwenden Sie Debug-Modus oder Browser DevTools.
I.4. Gerätespezifisches Targeting
Sie können steuern, ob der CSS-Selector auf Mobilgeräten, Desktops oder beiden angewendet wird, indem Sie ein Suffix hinzufügen:
| Suffix | Gilt für |
|---|---|
(M) |
Nur mobil |
(D) |
Nur Desktop |
| (keins) | Sowohl mobil als auch Desktop |
Beispiele: header(D) — nur Desktop · header(M) — nur mobil · header — beide Plattformen.
I.5. Wichtig! Optimieren Sie die Geschwindigkeit und Benutzererfahrung des Mega Menüs (Ersetzen-Modus)
Wenn Sie ein Menü durch ein anderes ersetzen, wartet Navi+, bis das alte Menü angezeigt wird, und tauscht es dann sofort gegen das neue aus. Obwohl dies fast sofort geschieht, gibt es immer noch einen kurzen Moment, in dem das alte Menü erscheint, was die Benutzer verwirren kann.
Mit diesem Schritt können Sie das alte Menü vollständig ausblenden und stattdessen einen Ladeeffekt anzeigen. Dies lässt die Website schneller erscheinen und verbessert die Benutzererfahrung.
Navi+ bietet eine einfache Lösung zur Optimierung der Benutzererfahrung und Geschwindigkeit wie folgt an
Warum müssen Sie das tun? Ist Navi+ nicht bereits schnell?
Navi+ ist sehr schnell. Es ist vollständig auf einem führenden CDN mit sehr niedriger Latenz (ca. 100 ms) bereitgestellt und kann Millionen von Kunden bedienen, ohne langsamer zu werden.
Allerdings läuft Navi+ immer noch innerhalb des Shopify-Ökosystems. Shopify hat seine eigenen Lade-Regeln:
- Shopify priorisiert das Laden seiner eigenen Ressourcen zuerst.
- Dann lädt Shopify den Theme-Inhalt.
- Schließlich lädt Shopify App-Inhalte, jedoch nicht in einer bestimmten Reihenfolge.
Das bedeutet, wenn Sie mehrere Apps verwenden, kann es sein, dass Navi+ manchmal später als erwartet geladen wird. Deshalb kann es in bestimmten Fällen langsamer erscheinen.
Was ist meine Lösung?
Derzeit hat Navi+ eine hohe Priorität beim Laden auf Shopify-Websites. Es gibt jedoch immer noch eine gewisse Verzögerung. Wir werden diese Probleme hier nacheinander angehen:
Hinweis:
- Fügen Sie das Suffix (M) hinzu, wenn Sie möchten, dass es nur auf Mobilgeräten gilt.
- Fügen Sie das Suffix (D) hinzu, wenn Sie möchten, dass es nur auf Desktops gilt.
- Belassen Sie kein Suffix, wenn Sie möchten, dass es auf beiden Plattformen gilt.
II) METHODE 2: FÜGEN SIE DIESES MENÜ ALS ABSCHNITT/BLOCK IM SHOPIFY-THEME HINZU
Diese Methode fügt das Menü hinzu, indem ein Block/Abschnitt in Ihrem Shopify-Theme hinzugefügt wird. Es ist ein traditioneller Ansatz, daher werde ich es nicht im Detail beschreiben. Mit dieser Methode müssen Sie nicht einmal „Navi+ in App-Embeds aktivieren“, wie in Schritt 1 der Methode 1 erforderlich.
Kopieren Sie die Einbettungs-ID dieses Menüs und fügen Sie sie in den Block mit dem Namen “Navi+ auf Abschnitt” in den Theme-Abschnitten ein. Sie können einen Titel hinzufügen, die volle Breite einstellen und den Rand für diesen Abschnitt nach dem Hinzufügen anpassen.
Leitfaden zum Hinzufügen dieses Menüs als Abschnitt/Block im Shopify-Theme
Unten finden Sie einen detaillierten Leitfaden zum Einfügen eines Navi+-Menüs als Abschnitt/Block in Ihr Shopify-Theme. Diese Methode ermöglicht es Ihnen, das Menü auf eine standardmäßige, von Shopify unterstützte Weise hinzuzufügen, obwohl sie nicht so flexibel ist wie die anderen von Navi+ bereitgestellten Methoden.
Diese Methode gilt für Mega Menüs und Grid Menüs. Sie GILT NICHT für Tabbar, FAB oder Slide Menüs.
