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

Schritt 3: Gehen Sie zu App-Embeds, finden 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 Menü veröffentlichen tatsächlich 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-Entwicklertools – Manuelle Methode mit dem Inspektor Ihres Browsers

So finden Sie den CSS-Selector mit den Browser-Entwicklertools

Sie können mit einem Navi+-Supporter chatten, um sofortige Hilfe zu erhalten, anstatt es selbst zu tun. Wenn Sie es jedoch selbst machen 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 (am häufigsten für Grid-Menü)

Fügt das Navi+-Menü sofort vor dem ausgewählten Element ein.

Beispiel: CSS-Selector main → das Grid-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-Entwicklertools.

Option 2: Nachher einfügen

Fügt das Navi+-Menü sofort nach dem ausgewählten Element ein.

Beispiel: CSS-Selector header → das Grid-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

Nicht in dieser Liste? Chatten Sie mit einem Navi+-Supporter oder verwenden Sie Debug-Modus oder Browser-Entwicklertools.

Option 3: Ersetzen

In den meisten Shopify-Stores gibt es kein integriertes Grid-Menü-Element, das ersetzt werden kann. Vorher einfügen main ist der empfohlene Ansatz.

Wenn Ihr Theme jedoch ein gitterartiges Element hat, das Sie ersetzen möchten, verwenden Sie Debug-Modus oder Browser-Entwicklertools, um seinen Selector zu finden.

I.4. Gerätespezifisches Targeting

Sie können steuern, ob der CSS-Selector auf Mobilgeräten, Desktop oder beiden angewendet wird, indem Sie ein Suffix hinzufügen:

Suffix	Gilt für
(M)	Nur Mobilgerät
(D)	Nur Desktop
(keins)	Sowohl Mobilgerät als auch Desktop

Beispiele: main(D) — nur Desktop · main(M) — nur Mobilgerät · main — beide Plattformen.

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 dann 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.