So erstellen Sie ein Menü mit der Navi+ App auf Shopify (Schritt-für-Schritt-Anleitung)

Quick answer: how to create a menu with the Navi+ app on Shopify

Um ein Menü mit der Navi+ App auf Shopify zu erstellen, installieren Sie Navi+ aus dem Shopify App Store, klicken auf Add menu, wählen einen Menütyp, starten mit einer Vorlage, einem leeren Menü oder KI, aktivieren Store Connector in den App-Einbettungen und veröffentlichen.

1. Installieren Sie Navi+ aus dem Shopify App Store und öffnen Sie die App.
2. Klicken Sie auf Add menu und wählen Sie die gewünschte Navigationsart.
3. Starten Sie mit einer fertigen Vorlage, einem leeren Menü oder einem KI-Gerüst.
4. Verknüpfen, ordnen und gestalten Sie Links zu Kollektionen, Produkten oder Seiten.
5. Aktivieren Sie Store Connector in den App-Einbettungen, speichern Sie und klicken Sie auf Publish to website.
6. Überprüfen Sie Ihre Live-Navigation auf Mobilgeräten und Desktop-Browsern.

Es ist kein Theme-Code nötig. Navi+ arbeitet über ein Shopify-Theme-App-Embed, sodass Sie das Menü in der App erstellen und ansehen, statt Theme-Dateien zu bearbeiten.

Before you start: which Navi+ menu type do you need?

Wenn Sie vor dem Aufbau das passende Navigationsformat wählen, vermeiden Sie Nacharbeit. Jeder Shop hat einen anderen Katalogumfang, wählen Sie daher den Typ, der dazu passt, wie Ihre Kunden stöbern.

Abbildung 1: Konzeptillustration (Concept illustration) — Before you start: which Navi+ menu type do you need?

Shops mit überwiegend mobilen Besuchern können mit einer Tab Bar oder einem Mobile Menu beginnen. Wie die Nielsen Norman Group festhält, ist versteckte Navigation schwerer auffindbar als sichtbare Navigation. Eine fixierte Tab Bar hält wichtige Ziele sichtbar, statt sie hinter einem geschlossenen Menü zu verbergen.

Obwohl Sie mehrere Menütypen gleichzeitig aktivieren können, empfiehlt es sich, zunächst ein einzelnes Menü vollständig einzurichten und zu testen. Einen ausführlichen Leitfaden zur Auswahl finden Sie in unserem Ratgeber wie man den richtigen Menütyp wählt.

Step 1: Install Navi+ from the Shopify App Store

Rufen Sie die Navi+ Tab Bar & Mega Menu Seite im Shopify App Store auf. Die Installation über den offiziellen Store führt Sie durch den Standard-Installationsablauf von Shopify.

Klicken Sie auf Install, um die Einrichtung zu starten. Shopify zeigt seinen Standard-Berechtigungsdialog. Navi+ zeigt Ihre Menüs über ein Theme-App-Embed an, das Sie in Schritt 5 aktivieren.

Bestätigen Sie die Berechtigungen, um die Installation abzuschließen. Die App öffnet sich anschließend automatisch in Ihrer Shopify-Administration. Zukünftig erreichen Sie den Editor jederzeit über den Menüpunkt Apps in der linken Seitenleiste.

Step 2: Click Add menu and choose a starting point (template, blank, or AI)

Klicken Sie im Navi+ Dashboard auf die auffällige Schaltfläche Add menu. Dadurch öffnet sich der Bildschirm Choose kind of menu mit sechs Karten: Tab Bar, Mobile Menu, Desktop Mega Menu, Mobile Mega Menu, Icon Menu und Floating Button. Wählen Sie die passende Karte für Ihr Store-Ziel aus.

Start from a template

Wählen Sie Create from a template, um vorgefertigte Navigationslayouts zu durchsuchen. Sobald Sie ein passendes Design gefunden haben, klicken Sie auf Use this template. Der Editor befüllt die Struktur mit Muster-Links, Icons und Stilen, die Sie direkt anpassen können.

Start blank

Wählen Sie Blank, wenn Sie Ihre Menüstruktur bereits auf dem Papier festgelegt haben. Dieser Weg bietet maximale Gestaltungsfreiheit, ohne Vorlagen-Links löschen zu müssen. Wenn Ihre Hierarchie noch nicht steht, lesen Sie unsere Anleitung zum Skizzieren der Menüstruktur vor dem Erstellen.

Build the structure with AI

Nutzen Sie den integrierten KI-Assistenten für einen schnellen Entwurf ohne manuelles Tippen. Beschreiben Sie Ihr Shop-Konzept und Sortiment in einfachen Worten. Die KI generiert ein strukturiertes Menügerüst direkt im Editor. Sie behalten die volle Kontrolle, um Links zu prüfen, Kollektionen zu verknüpfen und Farben abzustimmen.

Use your existing Shopify menu

Navi+ kann auch ein bestehendes Shopify-Navigationsmenü als Ausgangspunkt anbinden. Sobald es im Editor ist, prüfen Sie die verschachtelten Positionen vor der Veröffentlichung und noch einmal, wenn Sie das ursprüngliche Menü in Shopify ändern.

Step 3: Add and arrange menu items

Das Hinzufügen und Umsortieren von Einträgen erfolgt per Drag-and-drop. Sie können neue Einträge hinzufügen, sie ziehen, um die Reihenfolge zu ändern, und sie unter einem übergeordneten Eintrag verschachteln.

Link to products, collections, and pages

Jeder Menüpunkt benötigt ein funktionierendes Ziel. In Navi+ können Einträge auf Produkte, Kollektionen und Seiten verlinken. Gliedern Sie Kategorien logisch, halten Sie Hauptkategorien kurz und platzieren Sie Bestseller weit vorne im Menü. Eine detaillierte Anleitung finden Sie in unserem Leitfaden zum Einrichten von Menü-Links in Shopify.

Nest items up to three levels

Bei umfangreichen Katalogen verhindert eine Schachtelung visuelle Überladung. Mit dem Navi+ Business-Paket können Sie Ihre Navigation bis zu drei Ebenen tief staffeln. Zum Vergleich: Das native Shopify-Menü erlaubt unter einem Haupteintrag maximal zwei Unterebenen laut offizieller Dokumentation.

Step 4: Customize icons, images, colors, and layout

Sobald Ihr Menübaum steht, passen Sie das Styling an Ihre Marke an. Wählen Sie für eine Tab Bar klare Icons und prüfen Sie die Lesbarkeit der Beschriftungen auf dem Smartphone. Fügen Sie bei Mega Menüs Kollektionsbilder hinzu und wählen Sie ein Layout, das zu Ihrem Katalog passt.

Passen Sie Text- und Hintergrundfarben an Ihr aktives Shopify-Theme an. Prüfen Sie Text- und Icon-Kontrast immer auf einem echten Smartphone-Bildschirm, um sicherzugehen, dass alles lesbar ist.

Vor der Live-Schaltung öffnen Sie den Reiter Publish und nutzen Test this menu, um das Menü in der Vorschau zu prüfen. Weitere Gestaltungstipps finden Sie in unserem Leitfaden zum Ändern des Menüstils.

Step 5: Turn on Store Connector in App embeds, then publish

Navi+ im Storefront anzuzeigen erfordert kein Schreiben oder Bearbeiten von Theme-Code. Stattdessen läuft es über ein Shopify-Theme-App-Embed.

Abbildung 2: Konzeptillustration (Concept illustration) — Step 5: Turn on Store Connector in App embeds, then publish

Test on a duplicate theme first

Wenn Ihr Store aktive Besucher hat, empfiehlt es sich, Änderungen in einer separaten Theme-Kopie zu testen. Wie in den Shopify-Richtlinien zur Theme-Verwaltung empfohlen, dient ein Theme-Duplikat als Sicherheitskopie, um Anpassungen gefahrlos zu überprüfen.

Turn on Store Connector

Gehen Sie im Shopify-Adminbereich zu Online Store > Themes und klicken Sie auf Customize. Wählen Sie in der linken Leiste das Symbol für App embeds, suchen Sie Store Connector, aktivieren Sie den Umschalter gemäß der Shopify-Hilfe und klicken Sie auf Save. Diese Aktivierung muss nur einmal pro Website vorgenommen werden.

Click Publish to website

Kehren Sie zum Navi+ Dashboard zurück, öffnen Sie Ihr Menü und klicken Sie auf Publish to website. Die App zeigt passende Anzeigeoptionen an—wie etwa Replace your main menu, Add below your header oder Use your existing menu icon. Navi+ unterteilt Bereitstellungen in drei Gruppen und führt Sie zur kompatiblen Option. Bestätigen Sie die Auswahl und schalten Sie das Menü live.

Step 6: Preview on mobile and desktop and fix common problems

Überprüfen Sie Ihren Live-Store nach der Veröffentlichung sowohl auf Desktop-Monitoren als auch auf echten Smartphones. Touchscreens machen Ergonomie und Abstände spürbar, die Desktop-Simulatoren oft nicht exakt wiedergeben.

Menu does not appear

Wenn das Menü nicht erscheint, prüfen Sie, ob der Umschalter Store Connector im aktiven Live-Theme aktiviert wurde und ob Sie im Theme-Editor auf Save geklickt haben.

Two menus show at once

Werden altes und neues Menü gleichzeitig angezeigt, ist der Standard-Navigationsblock des Themes noch aktiv. Stellen Sie in Navi+ die Option Replace your main menu ein oder deaktivieren Sie den Menüblock im Theme-Editor.

Menu disappeared after changing theme

Beim Wechsel des Live-Themes werden App-Einbettungen nicht automatisch übernommen. Öffnen Sie einfach den Editor des neuen Themes, aktivieren Sie Store Connector in den App-Einbettungen und speichern Sie. Ausführliche Hilfestellung bietet unsere vollständige Checkliste für nicht angezeigte Menüs.

How to turn off a Navi+ menu or go back to your theme menu

Der Weg zurück zur Standardnavigation erfordert keine Bearbeitung von Theme-Code, da Navi+ über ein App-Embed läuft.

Um ein einzelnes Menü auszuschalten und die App aktiv zu lassen, öffnen Sie das Navi+ Dashboard. Jedes erstellte Menü zeigt einen Status On / Off. Wenn Sie ein Menü auf Off stellen, wird es im Live-Storefront nicht mehr angezeigt, sodass Ihr Standard-Theme-Menü wieder erscheinen kann.

Möchten Sie alle Navi+ Menüs auf einem Theme komplett ausschalten, öffnen Sie Online Store > Themes > Customize, deaktivieren Sie Store Connector bei den App embeds und klicken Sie auf Save. Bei einem Duplikat löschen Sie den Theme-Entwurf einfach.

Trade-offs: when you don’t need Navi+ yet

Obwohl Menü-Apps vielseitige Funktionen bieten, ist die Installation nicht für jeden Shopify-Händler zwingend erforderlich:

Erstens: Wenn Ihr Shop nur wenige Produkte anbietet, reicht die native Shopify-Navigation—die bis zu zwei Unterebenen unterstützt—kombiniert mit einem soliden Theme-Menü oft völlig aus. Eine externe App für eine Handvoll Links erzeugt unnötigen Verwaltungsaufwand.

Zweitens erfordert jede App-Einbettung Aufmerksamkeit bei Theme-Upgrades. Wenn Sie ein neues Theme veröffentlichen, müssen Sie daran denken, den Store Connector im neuen Theme manuell wieder zu aktivieren.

Drittens liefert der KI-Assistent zwar ein nützliches Grundgerüst, aber kein schlüsselfertiges Menü. Händler müssen dennoch Zeit investieren, um Links zuzuordnen, Kollektionen zu verbinden und Farben abzustimmen.

Schließlich kann die gleichzeitige Nutzung zu vieler Menüarten—wie Tab Bar, Seitenmenü und schwebende Buttons—den mobilen Bildschirm überladen und Kunden verwirren, wenn die Struktur nicht klar durchdacht ist.

Where Navi+ fits

Sobald Ihr erstes Menü stabil läuft, besteht der nächste logische Optimierungsschritt meist darin, einen ergänzenden Menütyp hinzuzufügen. Beispielsweise kombinieren viele Händler eine Tab Bar für Schnellzugriffe (Suche, Warenkorb, Top-Kollektionen) mit einem Mobile Menu Drawer für das Gesamtsortiment. Ein dezenter Floating Button kann zudem schnellen Support bieten.

Alle weiteren Menüs verwalten Sie über denselben Add menu Button im Dashboard. Navi+ Menüs lassen sich darüber hinaus auch auf Websites außerhalb von Shopify ohne Programmieraufwand einbinden. Mehr zur Konzeption erfahren Sie im Leitfaden zum Erstellen von Desktop- und Mobilmenüs.

Wenn Ihr erstes Menü aktiv ist, folgt meist ein zweites Menü für eine andere Aufgabe — wie ein Mobile Menu für den Gesamtkatalog neben der Tab Bar. Sie können es über denselben Button Add menu hinzufügen. Falls noch nicht geschehen, installieren Sie Navi+ Tab Bar & Mega Menu im Shopify App Store.

Action checklist

Nutzen Sie diese Checkliste zur systematischen Einrichtung und Prüfung Ihrer Shopify-Navigation:

• Wählen Sie den Menütyp, der zu Ihrem aktuellen Store-Ziel passt
• Klicken Sie auf Add menu im Navi+ Dashboard
• Wählen Sie eine Startmethode: Vorlage, leere Fläche oder KI-Gerüst
• Verknüpfen Sie Ziellinks für Produkte, Kollektionen und Seiten
• Begrenzen Sie die Kategoriestruktur auf maximal drei Ebenen
• Nutzen Sie Test this menu im Reiter Publish zur Designprüfung
• Duplizieren Sie Ihr aktives Theme für sichere Tests bei Live-Traffic
• Schalten Sie Store Connector bei App embeds ein und klicken Sie auf Save
• Klicken Sie auf Publish to website und wählen Sie die Platzierung
• Prüfen Sie das Navigationsverhalten auf echten Smartphones und Desktop

Installieren Sie Navi+ Tab Bar & Mega Menu im Shopify App Store, um Menüs ohne Theme-Code aufzubauen.

FAQ

Do I need to edit theme code to show a Navi+ menu?

Nein. Sie müssen keinerlei Theme-Liquid-Code bearbeiten. Aktivieren Sie einfach die Store Connector App-Einbettung im Theme-Editor und veröffentlichen Sie das Menü in der App. Laut Dokumentation muss diese Einbettung nur einmal pro Website vorgenommen werden.

Can I use my existing Shopify menu with Navi+?

Ja. Navi+ kann sich mit Ihren bestehenden Shopify-Menüs verbinden. Prüfen Sie nach dem Verbinden jede verschachtelte Ebene, ob Kategorien und Links so aussehen, wie Sie es möchten.

Should I start from a template or with AI?

Eine Vorlage ist schneller, wenn Ihnen ein bestimmtes Layout bereits zusagt. Das KI-Tool generiert ein strukturiertes Gerüst aus Ihrer Textbeschreibung, erfordert aber das manuelle Zuordnen von Links, Bildern und Farben.

How many levels can a Navi+ menu have?

Mit dem Business-Paket können Sie Menüs bis zu drei Ebenen tief strukturieren. Zum Vergleich: Das Standardmenü von Shopify unterstützt maximal zwei verschachtelte Unterebenen.

How do I turn a Navi+ menu off?

Sie können jedes Menü jederzeit im Navi+ Dashboard auf Off schalten. Um alle Menüs auf einem Theme zu deaktivieren, schalten Sie Store Connector in den App-Einbettungen des Theme-Editors aus und speichern.

Why is my Navi+ menu not showing?

Häufigste Ursache ist, dass Store Connector in einem Entwurfs-Theme aktiviert wurde statt im Live-Theme, oder das Speichern vergessen wurde. Nach einem Theme-Wechsel muss die Einbettung im neuen Theme aktiviert werden.

Sources

• Shopify App Store: Navi+ Tab Bar & Mega Menu
• Navi+ Help: How to install Navi+
• Navi+ Help: Publishing on Shopify
• Navi+ Help: Menu Depth
• Navi+ Help: Create Menu Structure with AI
• Navi+ Help: Publish Overview
• Shopify Help Center: App embeds
• Shopify Help Center: Duplicating themes
• Shopify Help Center: Drop-down menus
• Shopify Help Center: Menus and links
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation
• Product Hunt: Navi+ Menu Builder