Veröffentlichung auf Shopify

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

2.1. Aktivieren Sie Navi+ in App-Integrationen

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 Duplikat-Theme zu erstellen und Navi+ zuerst in dieser Version zu testen.

Schritt 3: Gehen Sie zu App-Integrationen, 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.

2.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 (sichtbar nur wenn vom Benutzer geöffnet)”.

Schritt 3: Wählen Sie die Anzeigemethode

Methode 1: Öffnen Sie dieses Menü von einem anderen Navi+-Menüelement mit der Syntax open:NaviMenu

Diese Methode ermöglicht es Ihnen, ein Slide-Menü zu öffnen, wenn der Benutzer auf ein Menüelement aus einem anderen Navi+-Menü klickt oder tippt (zum Beispiel: auf einer Tabbar, einem FAB in der unteren Ecke des Bildschirms oder einem Mega-Menü). Hauptziele dieser Methode:

Zweck 1: Verbesserte Sichtbarkeit und Benutzererfahrung, indem die gesamte Sitemap im Slide-Menü angezeigt wird, während sie leicht zugänglich bleibt.

Das Slide-Menü eignet sich ideal zur Anzeige Ihrer gesamten Sitemap dank seines großen Raums und flexiblen Layouts, was es perfekt macht, um den gesamten Produktkatalog, Links zu wichtigen Seiten, Blogs, Support-Tools usw. anzuzeigen. Das Slide-Menü ist jedoch standardmäßig oft weniger sichtbar. Um die Auffindbarkeit zu verbessern, können Sie ein anderes Navi+-Menü (wie eine Tabbar) verwenden, um Ihre wichtigsten und erkennbaren Links zu präsentieren, und ein hervorgehobenes Menüelement platzieren, das das Slide-Menü auslöst. Dies sorgt für bessere Sichtbarkeit und Benutzerengagement für das Slide-Menü.

Zweck 2: Unbegrenzte Menütiefe mit einer großen, flexiblen Menüstruktur (Nur Navi+)

Anstatt ein Popup mit begrenztem Platz anzuzeigen, wenn auf ein Menüelement geklickt wird, können Sie ein anderes Slide-Menü mit drei Ebenen und mehreren Möglichkeiten zur Präsentation von Informationen öffnen. Dies kann für andere Menüelemente oder sogar für dasselbe Slide-Menü wiederholt werden, sodass Sie praktisch unbegrenzte Tiefe für Ihre Navi+-Menüs erstellen können.

Methode 2: Wenn ein UI-Element (definiert durch einen CSS-Selektor wie #id_of_element oder .class_name) angeklickt oder angetippt wird, wird dieses Menü angezeigt.

Dies ist arguably die beste und am häufigsten verwendete Methode mit dem Slide-Menü.
In diesem Leitfaden konzentrieren wir uns darauf, das Standard-Hamburger-Menü der Website auf Mobilgeräten zu ersetzen.
Sie können diese Methode auch kreativ anwenden, indem Sie andere CSS-Selektoren finden und verwenden, um das Menü auszulösen.

Wie man das Standard-Hamburger-Menü Ihrer Website mit dem Navi+ Slide-Menü ersetzt (Beliebter Leitfaden)?

Auf den meisten Shopify-Websites wird das Standard-Hamburger-Menü aus der Desktop-Version über responsives Design generiert. Daher ist es normalerweise sehr einfach, hat eine flache Tiefe und unterstützt keine Icons, Bilder oder fortgeschrittene Layouts. Es durch ein Navi+ Slide-Menü zu ersetzen, ist eine gängige und praktische Wahl, um die fortschrittlichen Funktionen von Navi+ zu nutzen.

Um dies zu tun, identifizieren Sie einfach den CSS-Selektor Ihres Hamburger-Menü-Icons auf Ihrer Website und geben Sie ihn in das Textfeld ein. Wir haben bereits die CSS-Selektoren für einige der beliebtesten Themes für Sie gefunden, die unten aufgeführt sind.

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

- Oder Sie können dem Selbsthilfe-Leitfaden in den nächsten Themen folgen (Direkt nach diesem Thema).
Wie finde ich den CSS-Selektor 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 Kernidee zu verstehen, und (2) wenn Sie es selbst tun möchten, folgen Sie den Anweisungen unten.

2.3. Wichtig! Optimieren Sie die Geschwindigkeit des Slide-Menüs, fügen Sie einen Ladeeffekt hinzu und verhindern Sie doppelte Menüs

Es ist nichts, was Sie sofort beheben müssen, aber auf lange Sicht ist es wichtig für die Benutzererfahrung des Slide-Menüs, das von Navi+ erstellt wurde. Bevor Navi+ das alte Slide-Menü vollständig ersetzt, ist das ursprüngliche Menü des Themas weiterhin aktiv. Für einen kurzen Moment – etwa eine halbe Sekunde – kann es vorkommen, dass, wenn ein Benutzer das Menü lädt und schnell auf die Hamburger-Schaltfläche tippt (ein seltener Fall, aber dennoch möglich), das alte Themenmenü erscheint und einen visuellen Fehler verursacht.

Navi+ bietet eine einfache Lösung zur Optimierung der Benutzererfahrung und Geschwindigkeit wie folgt Schritte

Warum müssen Sie das tun? Ist Navi+ nicht bereits schnell?

Navi+ ist sehr schnell. Es wird 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+ weiterhin 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 Inhalt des Themas.
  3. Schließlich lädt Shopify den App-Inhalt, jedoch nicht in einer bestimmten Reihenfolge.

Das bedeutet, dass, wenn Sie mehrere Apps verwenden, Navi+ manchmal später als erwartet geladen werden kann. 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:

Slide-Menü: Fügen Sie einen Ladeeffekt hinzu und sperren Sie den Auslöser-Selektor

Sehr einfach: Geben Sie einfach den CSS-Selektor ein, den Sie für das Slide-Menü verwenden, in den Einbettungsbereich der Navi+-App (siehe Bild unten).

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.