Shopify-Menü mit einer Navigations-App erstellen (Schritt für Schritt)

Die Gestaltung einer intuitiven Shop-Navigation ist eine wichtige Grundlage für die Nutzerfreundlichkeit eines Shopify-Stores. Eine Menü-App ersetzt Ihre bestehende Shopify-Navigation keineswegs: Sie baut direkt auf einer sauberen Struktur unter Content > Menus auf, ergänzt visuelle Layouts, die das Theme allein nicht darstellen kann (wie mehrspaltige Mega-Menüs oder separate mobile Ansichten), und wird erst sichtbar, wenn Sie sie in den App-Embeds Ihres Themes aktivieren.

Wenn die Standard-Dropdowns Ihres Themes an ihre Grenzen stoßen, Sie strukturierte Kategoriespalten mit Produktbildern benötigen oder eine bedienungsfreundliche mobile Tab-Bar am unteren Bildschirmrand einrichten möchten, führt Sie diese Anleitung Schritt für Schritt durch den gesamten Prozess – ganz ohne Programmierkenntnisse.

Schnelle Antwort: Menü mit einer Shopify-Navigations-App erstellen

Um ein Menü mit einer Shopify-Navigations-App zu erstellen, planen Sie Ihre Links unter Content > Menus, installieren die App und erstellen das Menü im Editor, fügen Untermenüs oder ein Mega-Menü hinzu, richten ein mobiles Layout ein, aktivieren die App unter App embeds im Theme-Editor und testen auf Desktop sowie Mobilgeräten.

Der fünfstufige Ablauf im Überblick:

1. Menüstruktur unter Content > Menus vorbereiten: Organisieren Sie Kollektionen, Produkte und Basisseiten im Shopify-Adminbereich, bevor Sie eine Drittanbieter-App installieren.
2. Navigations-App installieren und erstes Menü anlegen: Fügen Sie die ausgewählte App aus dem Shopify App Store hinzu und konfigurieren Sie das Desktop-Menü oder wählen Sie eine Vorlage.
3. Untermenüs, Mega-Menü und Bildkacheln ergänzen: Ordnen Sie verschachtelte Links in übersichtliche Spalten ein und binden Sie Kollektionsbilder ein, um die visuelle Orientierung zu erleichtern.
4. Mobiles Menü gestalten und auf einem echten Smartphone prüfen: Richten Sie ein seitliches Drawer-Menü oder eine fixierte Tab-Bar am unteren Bildschirmrand ein und testen Sie die Touch-Bedienung.
5. Über App-Embeds aktivieren und Fehler beheben: Schalten Sie den Schalter der App-Einbettung im Theme-Editor ein, speichern Sie die Einstellungen und überprüfen Sie die Darstellung auf allen Displaygrößen.

Wann das Standard-Menü von Shopify ausreicht (und wann Sie eine App brauchen)

In Shopify werden native Menüs zentral unter Content > Menus im Adminbereich verwaltet, während die Einstellungen Ihres installierten Themes festlegen, an welcher Stelle der Storefront diese Menüs angezeigt werden.

Für kleinere Produktkataloge deckt die Standardnavigation von Shopify den alltäglichen Bedarf in der Regel gut ab. Laut offizieller Dokumentation des Shopify Help Centers kann ein Hauptmenüpunkt bis zu zwei Ebenen verschachtelter Dropdown-Menüs enthalten (Hauptpunkt → Unterebene 1 → Unterebene 2). Diese dreistufige Hierarchie eignet sich für überschaubare Sortimente, Standard-Infoseiten und einfache Produktkategorien, ohne dass zusätzliche Software nötig ist.

Allerdings gilt ein zentraler Grundsatz der Usability-Forschung: Wie das Baymard Institute in seinen Navigationsstudien hervorhebt, müssen Kunden ein Produkt zuerst finden können, um es überhaupt kaufen zu können. Wächst ein Shop auf viele Unterkategorien an, zwingen reine Text-Dropdowns Besucher dazu, lange vertikale Listen zu durchsuchen. Je nach Theme lassen sich Kategorie-Banner, Produktbilder oder mehrspaltige Raster im eingebauten Menü nur mit zusätzlichen Anpassungen einbinden.

Einen detaillierten Überblick über die baulichen Grenzen von Standard-Themes finden Sie in unserer Analyse zu Shopify theme menu limitations.

Wenn Ihr Shop nur ein kompaktes Sortiment umfasst und Kunden alle Produkte mit ein oder zwei Klicks erreichen, ist das native Menü nicht nur ausreichend, sondern auch die einfachste Lösung. Sobald Sie jedoch visuelle Führung und ergonomische Menüführungen für umfangreiche Produktwelten benötigen, wird eine spezialisierte App praktisch.

Schritt 1: Menüstruktur vor der Installation planen

Ein aufgeräumtes Menü beginnt mit einem aufgeräumten Shopify-Katalog. Bevor Sie im Shopify App Store nach Erweiterungen suchen, sollten Sie Ihre Struktur skizzieren.

Stellen Sie zunächst sicher, dass alle Zielseiten in Ihrem Shopify-Adminbereich tatsächlich existieren. Legen Sie sämtliche Kollektionen an, ordnen Sie ihnen Produkte zu und prüfen Sie, ob wichtige Informationsseiten (Über uns, Kontakt, Versand, FAQ) veröffentlicht sind. Eine Navigationsleiste kann keine Verknüpfungen zu Seiten herstellen, die noch nicht angelegt wurden.

Skizzieren Sie anschließend Ihren Menübaum auf Papier oder in einer Tabelle und beschränken Sie sich nach Möglichkeit auf maximal drei logische Ebenen. Prägnante, verständliche Beschriftungen lassen sich leichter erfassen als verspielte Marketingbegriffe. Wählen Sie vertraute Bezeichnungen wie “Herrenjacken” statt vager Formulierungen wie “Winterwelten”.

Bauen oder bereinigen Sie danach Ihre Hauptmenüliste unter Content > Menus im Shopify-Admin. Zahlreiche Navigations-Apps können direkt auf diese bestehende Struktur zugreifen und ersparen Ihnen das mühsame Neueingeben aller Adressen. Eine Orientierungshilfe zur Wahl des passenden Menütyps für Ihre Store-Größe bietet unser Leitfaden choose the right menu type.

Shopifys eigene Anleitung zu Drop-down-Menüs:

Sobald Ihre Links und Kollektionen im Adminbereich geordnet vorliegen, können Sie mit der Konfiguration in der App beginnen.

Schritt 2: App installieren und erstes Menü aufbauen

Nachdem Sie eine Navigations-App im Shopify App Store ausgewählt haben, klicken Sie auf Install, um die Anwendung zu Ihrem Shop hinzuzufügen. Apps, die mit Shopifys Theme App Extensions gebaut sind, erfordern kein manuelles Bearbeiten Ihres Theme-Codes. Prüfen Sie daher, ob die gewählte App so funktioniert.

Im App-Dashboard wählen Sie im ersten Schritt aus, welchen Menütyp Sie einrichten möchten:

• Desktop Mega Menu: Eine breite Menütafel für große Bildschirme, die mehrere Spalten mit Kategorielinks neben Bildbannern anzeigt.
• Mobile Drawer Menu: Ein seitliches Menüpanel, das sanft ins Bild gleitet, wenn Kunden auf dem Smartphone das Hamburger-Symbol antippen.
• Bottom Tab Bar: Eine fixierte Navigationsleiste am unteren Displayrand mobiler Geräte für die wichtigsten Kernbereiche des Shops.

Je nach App können Sie auf fertige Layout-Vorlagen zurückgreifen oder ein Menü von Grund auf neu erstellen. Einige Navigations-Apps bieten zudem die Möglichkeit, bestehende Shopify-Menüs direkt zu verbinden. Dabei wird Ihre vorhandene Linkstruktur übernommen, sodass Sie Hierarchien nicht manuell neu zusammenklicken müssen.

Fügen Sie im visuellen Editor Ihre Hauptkategorien hinzu (wie “Shop”, “Neuheiten” oder “Kollektionen”) und verknüpfen Sie diese über die integrierte Auswahlliste mit den passenden Shopify-Zielen. Nutzen Sie die Vorschaufunktion des Editors, um Schriftgrößen, Abstände und Ausrichtungen zu überprüfen, bevor Sie Bildmaterial einpflegen.

Schritt 3: Untermenüs, Mega-Menü, Bilder und Kollektions-Links hinzufügen

Sobald das Grundgerüst steht, können Sie verzweigte Produktbereiche zu mehrspaltigen Mega-Menüs ausbauen. Wie die Nielsen Norman Group zu Mega-Menüs festhält, sind Mega-Menüs eine hervorragende Designentscheidung für eine große Zahl von Optionen, weil sie alles auf einmal sichtbar halten.

So bauen Sie ein wirkungsvolles Mega-Menü in der App auf:

1. Links logisch nach Themen gruppieren: Unterteilen Sie Unterkategorien in vertikale Spalten mit eindeutigen Überschriften (z. B. “Oberteile”, “Hosen”, “Accessoires”).
2. Klicktiefe im Menüfenster flach halten: Belassen Sie die Links unterhalb jeder Spaltenüberschrift auf einer einzigen Ebene, damit Kunden alle Punkte sofort erfassen können.
3. Visuelle Orientierungshilfen nutzen: Laut Nielsen Norman Group helfen Bilder im Mega-Menü den Nutzern dabei, zielsicher die gewünschte Option auszuwählen. Platzieren Sie repräsentative Kollektionsbilder oder Produktkarten neben den Linkspalten.
4. Kollektionen und Produkte verknüpfen: Wählen Sie Kollektionen oder Produkte über die integrierte Auswahl der App aus, statt URLs von Hand einzutippen. Das verringert Tippfehler, dennoch sollten Sie Ihre Links prüfen, sobald Sie eine Kollektion oder Seite umbenennen oder löschen.

Ausführliche Gestaltungsempfehlungen zu Spaltenbreiten, visuellen Hierarchien und Werbebannern finden Sie in unserem Ratgeber zu mega menu best practices.

Ersetzt eine Menü-App Ihr Shopify-Navigationsmenü?

Eine häufige Sorge von Händlern ist die Frage, ob die Installation einer App das bisherige Shopify-Menü unwiderruflich überschreibt.

Die Antwort: Ihr natives Menü bleibt unter Content > Menus im Shopify-Adminbereich bestehen, dort pflegen Sie Ihre Links weiterhin. Die App steuert lediglich, wie ihr eigenes Menü auf der Storefront Ihres Themes angezeigt wird.

Je nach Funktionsweise der App und gewählter Einstellung kommen verschiedene Integrationsmethoden zum Einsatz:

• Davor oder danach einfügen (Insert Before / Insert After): Die App platziert ihren Menü-Container über oder unter einem vorhandenen Theme-Element mithilfe eines CSS-Selektors (z. B. am Header oder an der Ankündigungsleiste).
• Theme-Menü ersetzen (Replace Theme Menu): Die App zielt über einen CSS-Selektor exakt auf das Menü-Element des Themes ab und ersetzt diesen Bereich vollständig durch die eigene Menüstruktur.
• Einbindung als Section oder Block: Einige Apps ermöglichen das Hinzufügen von Menüs als reguläre Abschnitte oder Blöcke direkt im Theme-Editor. Bei Navi+ gilt diese Methode beispielsweise gezielt für Mega Menus und Grid Menus.

Konzeptillustration: Gegenüberstellung von Menü-Einfügung unter dem Header und vollständigem Ersetzen via CSS-Selektor.

Abbildung 1: Konzeptillustration — Einfügen eines App-Menüs unter dem Header versus Ersetzen des Theme-Menüs per CSS-Selektor.

Ihr bestehendes Shopify-Menü in der App verwenden

Verschiedene Apps bieten die Option, bestehende Shopify-Menüs als Ausgangsbasis einzubinden. Prüfen Sie jedoch in der Dokumentation der App, ob spätere Änderungen unter Content > Menus automatisch synchronisiert werden oder ob Sie im Dashboard der App auf eine Synchronisieren-Schaltfläche (Sync) klicken müssen.

Was passiert, wenn Sie das Theme wechseln?

Wenn Sie ein neues Theme installieren oder aktivieren, erscheint das Menü der App nicht automatisch auf der neuen Storefront. Wie das Shopify Help Center zu Theme-Erweiterungen erläutert, müssen Sie Apps in Ihrem neuen Theme manuell reaktivieren, da App-Einbettungen nach einem Wechsel standardmäßig deaktiviert sind.

Da verschiedene Themes unterschiedliche HTML-Strukturen und CSS-Klassennamen für Kopfzeilen verwenden, muss bei einer Ersetzung per CSS-Selektor zudem überprüft werden, ob der Zielselektor im neuen Theme noch übereinstimmt. Für Stores mit laufendem Kundenverkehr empfiehlt es sich, die Menü-App zunächst auf einem duplizierten Theme zu testen.

Schritt 4: Mobiles Menü aufbauen und auf einem Smartphone prüfen

Ein Desktop-Mega-Menü lässt sich nicht einfach proportional verkleinern, um auf ein Smartphone-Display zu passen. Wenn man versucht, breite Spaltenanordnungen auf kleinen Bildschirmen zu erzwingen, führt dies zu unübersichtlichen, schwer bedienbaren Oberflächen.

In Usability-Tests des Baymard Institute öffneten einige Probanden das mobile Hauptmenü nur, um es sofort wieder zu schließen, weil sie von den Optionen überfordert und verwirrt waren. Zudem weist Shopifys Dokumentation zu Dropdown-Menüs darauf hin, dass manche Themes zusätzliche CSS-Anpassungen erfordern, um die mobile Bedienung zu verbessern.

Beim Aufbau der mobilen Navigation bieten sich vor allem zwei Formate sowie eine responsive Umschaltung an:

• Mobiles Drawer-Menü: Ein seitliches Klappmenü, das sich sanft über den Bildschirm legt und Unterkategorien über saubere Akkordeon-Zeilen aufklappt, ohne den Kontext zu verlieren.
• Fixierte Tab-Bar (Bottom Navigation): Eine dauerhaft sichtbare Leiste am unteren Displayrand, die häufig genutzte Ziele (Startseite, Suche, Kategorien, Warenkorb) direkt in die ergonomische Daumenzone legt.
• Intelligente Responsive-Umschaltung: Einige Apps bringen automatische Umschaltlogiken mit. Bei Navi+ wechselt das Menü beispielsweise auf Bildschirmen unter 768 Pixeln automatisch in den Mobilmodus, und die Funktion Smart responsive bettet eine Live-Referenz des Desktop-Menüs in einen mobilen Drawer ein.

Konzeptillustration: Mobiles Drawer-Menü im Vergleich zu einer fixierten Tab-Bar am unteren Bildschirmrand.

Abbildung 2: Konzeptillustration — Vergleich zwischen mobilem Drawer-Menü und fixierter Tab-Bar.

Begutachten Sie das mobile Menü unbedingt auf einem echten Smartphone und nicht ausschließlich in der Browser-Emulation am Desktop. Erst auf einem echten Gerät spüren Sie, ob die Abstände zwischen Touch-Zielen groß genug sind und ob Wischgesten flüssig reagieren.

Vertiefende Einblicke in mobile Navigationsmuster bieten unsere Fachartikel zum mobile drawer menu, zur Einrichtung einer daumenfreundlichen bottom tab bar sowie zu modernen Touch-Ergonomie-Konzepten unter mobile navigation beyond the hamburger menu.

Schritt 5: Im Storefront veröffentlichen und typische Probleme beheben

Die Fertigstellung eines Menüs im App-Editor schaltet dieses noch nicht automatisch für Store-Besucher frei. Auf Theme App Extensions aufbauende Apps nutzen App-Embeds, sodass Sie die App im Theme-Editor aktivieren können, ohne Ihren Theme-Code manuell zu bearbeiten.

Gemäß den Entwickler-Richtlinien von Shopify für Theme App Extensions sind App-Embed-Blöcke nach der Installation einer App standardmäßig deaktiviert. Händler müssen diese Blöcke im Theme-Editor unter Theme-Einstellungen > App-Einbettungen (App embeds) manuell einschalten und speichern.

Laut technischer Dokumentation von Shopify handelt es sich bei App-Embeds um Elemente, die über dem Theme schweben oder sich darüberlegen, und sie lassen sich mit jeder Theme-Version verwenden. Da Erweiterungen auf diese Weise eingebunden werden, müssen Händler ihren Theme-Code nicht manuell bearbeiten.

So veröffentlichen Sie Ihr Menü:

1. Öffnen Sie den Shopify-Adminbereich und navigieren Sie zu Online Store > Themes.
2. Klicken Sie neben Ihrem aktiven Theme (oder dem Test-Duplikat) auf Anpassen (Customize).
3. Klicken Sie in der linken Leiste auf das Symbol für App-Einbettungen.
4. Suchen Sie den Eintrag Ihrer Navigations-App und stellen Sie den Schalter auf Ein (On).
5. Klicken Sie oben rechts auf Speichern (Save).

Trade-offs: Wann Sie keine Menü-App benötigen

Obwohl Menü-Apps ein hohes Maß an Gestaltungsfreiheit bieten, ist die Installation nicht für jeden Shopify-Händler zwingend notwendig. Jede zusätzliche App bringt gewisse betriebliche Überlegungen mit sich:

• Einfache Sortimente benötigen keine komplexen Menüs: Wenn Ihr Shop nur wenige Artikel in ein oder zwei Kollektionen führt, kann das native Dropdown-Menü von Shopify (mit bis zu zwei Unterebenen) ein schnelles und aufgeräumtes Einkaufserlebnis bieten.
• Zusätzlicher Prüfaufwand bei Theme-Wechseln: Wann immer Sie ein anderes Theme aktivieren, schalten sich App-Embeds nicht von selbst ein und Selektoren müssen eventuell neu überprüft werden.
• Manche Themes bringen ein Mega-Menü mit: Einige Themes bieten eine native mehrspaltige Header-Einstellung. Wenn diese Option Ihre Gestaltungsanforderungen erfüllt, testen Sie sie zuerst, bevor Sie zusätzliche Apps einbinden.

Setzen Sie eine Menü-App gezielt dann ein, wenn Sortimentsgröße, visuelle Warenpräsentation oder mobile Anforderungen die nativen Fähigkeiten Ihres Themes übersteigen.

Checkliste: Fragen vor der Installation einer Menü-App

Bevor Sie sich für eine Menü-App entscheiden, sollten Sie das Tool anhand folgender Kriterien bewerten:

• Anbindung an native Menüs: Kann die App vorhandene Linklisten aus Content > Menus importieren, und ist verständlich dokumentiert, wie Links aktualisiert werden?
• Eigenständige mobile Layouts: Bietet die App ergonomische mobile Lösungen (wie Drawer oder fixe Tab-Bars), statt Desktop-Panels lediglich zu schrumpfen?
• Saubere No-Code-Integration: Arbeitet die App vollständig über App-Embeds und Theme-Blöcke, ohne manuelle Änderungen an Liquid-Dateien zu erzwingen?
• Ablauf beim Theme-Wechsel: Ist der Prozess zur Reaktivierung der App-Embeds bei einem Wechsel des aktiven Themes unkompliziert?
• Gefahrlose Tests auf Duplikaten: Lässt sich das Menü auf einem unveröffentlichten Theme-Duplikat gestalten und testen, ohne den Live-Betrieb zu stören?
• Unterstützte Hierarchieebenen: Erlaubt die App die benötigte Kategorientiefe, ohne die Übersichtlichkeit zu gefährden (empfohlen: maximal drei Ebenen)?
• Hilfestellung bei Layoutproblemen: Stellt der Entwickler klare Hilfestellungen bereit, falls Ihr Theme ungewöhnliche CSS-Header-Selektoren verwendet?

Wo sich Navi+ einordnet

Wenn Sie diesen Ablauf in Ihrem Store umsetzen möchten, bietet Navi+ Tab Bar & Mega Menu einen Drag-and-drop-Editor für Shopify.

Mit Navi+ erstellen Händler fixierte Bottom-Tab-Bars, mehrspaltige Desktop-Mega-Menüs, mobile Drawer-Menüs, Icon-Menüs und Floating-Action-Buttons per Drag-and-drop. Sie können bestehende Shopify-Menüs direkt anbinden, um Ihre vorhandene Linkstruktur zu übernehmen.

Um das Menü auf Ihrer Storefront bereitzustellen, aktivieren Sie einfach die Einbettung “Store Connector” in den App-Embeds Ihres Themes. Anschließend können Sie wählen, ob das Menü vor oder nach bestehenden Elementen eingefügt werden soll, oder Sie nutzen den Replace-Modus, um die Standardnavigation des Themes per CSS-Selektor zu ersetzen. Für Mega Menus und Grid Menus steht zusätzlich die Platzierung über Abschnitte und Blöcke bereit.

Um Ihre Besucher nicht zu stören, empfiehlt Navi+ Shops mit laufendem Traffic, das Menü zuerst auf einer Kopie des Themes zu testen. Wenn Sie diesen Ablauf ausprobieren möchten: Navi+ Tab Bar & Mega Menu hat einen kostenlosen Tarif. Bauen Sie das Menü, testen Sie es auf einem duplizierten Theme und schalten Sie es erst ein, wenn Sie zufrieden sind.

FAQ

Ersetzt eine Menü-App mein Shopify-Navigationsmenü?

Das hängt von der gewählten Einstellung in der App ab. Eine Menü-App kann neue Menüs oberhalb oder unterhalb des Headers einfügen oder das Menü des Themes per CSS-Selektor ersetzen. Die ursprüngliche Linkstruktur bleibt unter Content > Menus erhalten.

Was passiert mit meiner Menü-App, wenn ich das Theme wechsle?

App-Embeds werden beim Wechsel des aktiven Themes nicht automatisch übertragen. Sie müssen die App-Einbettung im Editor des neuen Themes erneut aktivieren und prüfen, ob hinterlegte CSS-Selektoren mit dem neuen Theme übereinstimmen.

Wie viele Ebenen kann ein Shopify-Dropdown-Menü haben?

Gemäß offizieller Shopify-Dokumentation kann ein Hauptmenüpunkt im nativen System maximal zwei verschachtelte Dropdown-Ebenen besitzen, woraus sich eine maximale Gesamttiefe von drei Ebenen ergibt.

Muss ich Theme-Code bearbeiten, um eine Menü-App zu nutzen?

Nicht, wenn die App mit Shopifys Theme App Extensions gebaut ist: Sie können Menüs direkt im Theme-Editor veröffentlichen und konfigurieren, ohne den Theme-Code manuell zu bearbeiten. Prüfen Sie, ob die gewählte App so funktioniert.

Wann benötige ich ein Mega-Menü anstelle eines Dropdowns?

Ein Mega-Menü empfiehlt sich, wenn ein umfangreicher Katalog viele Kategorien umfasst, die Kunden gleichzeitig überblicken sollen, oder wenn Bilder und Teaser den Besuchern helfen, auf Anhieb die richtige Abteilung anzusteuern.

Wie sorge ich dafür, dass mein Menü auf Mobilgeräten funktioniert?

Gestalten Sie ein spezielles mobiles Layout – beispielsweise ein Off-Canvas-Drawer oder eine fixierte Tab-Bar am unteren Rand – oder nutzen Sie automatische Umschaltfunktionen der App. Testen Sie das Ergebnis stets auf einem echten Smartphone.

Quellen

• Shopify Help Center — Menus and links. help.shopify.com/en/manual/online-store/menus-and-links
• Shopify Help Center — Drop-down menus. help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus
• Shopify Help Center — Apps and theme structure. help.shopify.com/en/manual/online-store/themes/theme-structure/extend/apps
• Shopify Developer Documentation — Theme app extension configuration. shopify.dev/docs/apps/build/online-store/theme-app-extensions/configuration
• Shopify Developer Documentation — Theme app extensions overview. shopify.dev/docs/apps/build/online-store/theme-app-extensions
• Nielsen Norman Group — Mega Menus Work Well for Site Navigation. nngroup.com/articles/mega-menus-work-well
• Baymard Institute — Homepage & Navigation UX Best Practices. baymard.com/blog/ecommerce-navigation-best-practice
• Navi+ Help Center — Publishing Mega Menu on Shopify. help.naviplus.io/docs/usage/mega-menu-desktop/publishing-on-shopify
• Navi+ Help Center — Mega Menu Desktop FAQ. help.naviplus.io/docs/usage/mega-menu-desktop/faq
• Shopify App Store — Navi+ Tab Bar & Mega Menu. apps.shopify.com/pronavi-navigation-design