Veröffentlichung auf Shopify

Schritt 2: (Shopify) Veröffentlichen Sie das Menü auf Ihrer Website.

I.1. Aktivieren Sie Navi+ in App-Embeds

Schritt 1: Klicken Sie auf Online-Shop und 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 „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. Wählen Sie die Anzeigeeinstellungen und veröffentlichen Sie das Menü.

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: Wählen Sie den richtigen CSS-Selector und die Ersetzen/Einfügen-Methode

In diesem Leitfaden konzentrieren wir uns auf 2 Möglichkeiten: dieses Menü unter dem Header einzufügen oder das Standard-Mega-Menü zu ersetzen. Sie können diese Methode auch kreativ nutzen, indem Sie andere CSS-Selectoren finden und anwenden, um das Menü auszulösen.

Wie fügt man dieses Menü unter dem Header der Website ein?

Um dies zu tun, identifizieren Sie einfach den CSS-Selector des Headers Ihrer Website und geben Sie ihn in das Textfeld ein. Wir haben bereits die CSS-Selectoren für einige der beliebtesten Themes für Sie gefunden, die unten aufgeführt sind.

  1. CSS-Selectoren für einige beliebte, kostenlose Themes.. von Shopify wie Dawn, Sense, Savor, Horizon..
header
  1. Nicht in dieser Liste, keine Sorge
- Sie können mit einem Navi+-Supporter chatten, um sofortige Hilfe zu erhalten – dies dauert nur wenige Minuten, um den CSS-Selector zu finden.

- Oder Sie können dem Selbsthilfe-Leitfaden in den nächsten Themen folgen (Direkt nach diesem Thema).
Wie ersetzt man das Standard-Mega-Menü?

Um dies zu tun, identifizieren Sie einfach den CSS-Selector des Headers Ihrer Website und geben Sie ihn in das Textfeld ein. Wir haben bereits die CSS-Selectoren für einige der beliebtesten Themes für Sie gefunden, die unten aufgeführt sind.

  1. CSS-Selectoren für einige beliebte, kostenlose Themes.. von Shopify wie Dawn, Sense, Savor, Horizon..
.header-menu
  1. Nicht in dieser Liste, keine Sorge
- Sie können mit einem Navi+-Supporter chatten, um sofortige Hilfe zu erhalten – dies dauert nur wenige Minuten, um den CSS-Selector zu finden.

- Oder Sie können dem Selbsthilfe-Leitfaden in den nächsten Themen folgen (Direkt nach diesem Thema).
Wie finde ich den CSS-Selector auf meiner Website?

Sie können mit einem Navi+-Supporter chatten, um sofortige Hilfe zu erhalten, anstatt es selbst zu tun.\ Allerdings wird (1) dies Ihnen helfen, die Grundidee zu verstehen, und (2) wenn Sie es selbst tun möchten, folgen Sie den Anweisungen unten.

I.3. Wichtig! Optimieren Sie die Geschwindigkeit und Benutzererfahrung des Mega Menüs (Ersetzungsmodus)

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:

  1. Shopify priorisiert das Laden seiner eigenen Ressourcen zuerst.
  2. Dann lädt Shopify den Theme-Inhalt.
  3. Schließlich lädt Shopify den App-Inhalt, 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 angewendet wird.
  • Fügen Sie das Suffix (D) hinzu, wenn Sie möchten, dass es nur auf Desktop angewendet wird.
  • Fügen Sie kein Suffix hinzu, wenn Sie möchten, dass es auf beiden Plattformen angewendet wird.

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 es in Schritt 1 der Methode 1 erforderlich ist.

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 Abstand 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 standardisierte, 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.