Veröffentlichung auf Shopify

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

2.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 Duplikat-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 Menü veröffentlichen tatsächlich 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 (nur sichtbar, 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 vollständige Sitemap im Slide-Menü angezeigt wird, während der Zugriff einfach bleibt.

Das Slide-Menü ist ideal, um Ihre vollständige Sitemap anzuzeigen, 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 ein Menüelement angeklickt 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. Infolgedessen ist es normalerweise sehr einfach, hat eine flache Tiefe und unterstützt keine Symbole, 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 des Hamburger-Menü-Icons 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.

Agenten-Anweisungen: Abfragen dieser Dokumentation

Wenn Sie zusätzliche Informationen benötigen, die auf dieser Seite nicht direkt verfügbar sind, können Sie die Dokumentation dynamisch abfragen, indem Sie eine Frage stellen.

Führen Sie eine HTTP GET-Anfrage an die aktuelle Seiten-URL mit dem ask Abfrageparameter aus:

GET https://help.shopifas.com/manual/internal/what-is/common/how-to-find-css-selector.md?ask=<question>

Die Frage sollte spezifisch, eigenständig und in natürlicher Sprache verfasst sein. Die Antwort enthält eine direkte Antwort auf die Frage sowie relevante Auszüge und Quellen aus der Dokumentation.

Verwenden Sie diesen Mechanismus, wenn die Antwort nicht ausdrücklich auf der aktuellen Seite vorhanden ist, Sie eine Klärung oder zusätzlichen Kontext benötigen oder Sie verwandte Dokumentationsabschnitte abrufen möchten.

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 Erfahrung des Slide-Menüs, die von Navi+ erstellt wurde. Bevor Navi+ das alte Slide-Menü vollständig ersetzt, ist das ursprüngliche Menü des Themes 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 Theme-Menü erscheint und einen visuellen Fehler verursacht.

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 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 Themes.
  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 sich in bestimmten Fällen langsamer anfühlen.

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.