So fügen Sie ein Untermenü zu Ihrem Shopify-Navigationsmenü hinzu (Dropdown, Ebenen und Mobile)

Das Hinzufügen eines Untermenüs in Shopify erfordert nur einen Handgriff unter Content > Menüs — doch es funktioniert für Kunden nur dann reibungslos, wenn der Haupteintrag, das Header-Menü des Themes und der mobile Drawer korrekt konfiguriert sind.

Zu Beginn reicht eine einfache horizontale Leiste mit vier oder fünf Links völlig aus. Wächst Ihr Sortiment jedoch, überfordert das Auflisten aller Kollektionen auf einer einzigen Zeile Ihre Kopfzeile. Im Shop-Design beschreiben die Begriffe Untermenü, Dropdown-Menü und verschachtelte Menüeinträge dasselbe Muster: Untergeordnete Links werden übersichtlich unter einem übergeordneten Eintrag gebündelt. Sie können dies direkt im Shopify-Admin ohne Programmierkenntnisse einrichten.

Schnelle Antwort: So fügen Sie ein Untermenü in Shopify hinzu

Um ein Untermenü in Shopify hinzuzufügen, gehen Sie zu Content > Menüs, öffnen Sie Ihr Hauptmenü, fügen Sie den gewünschten Eintrag unter einem Haupteintrag hinzu, ziehen Sie ihn darunter und leicht nach rechts und klicken Sie auf Menü speichern. Ein Haupteintrag kann bis zu zwei Ebenen verschachtelter Dropdown-Menüs enthalten.

Befolgen Sie diese fünf Schritte:

1. Öffnen Sie in Ihrem Shopify-Admin Content > Menüs.
2. Klicken Sie auf den Namen Ihres Menüs (meist Main menu).
3. Klicken Sie auf Menüpunkt hinzufügen, geben Sie den Namen und den Ziellink ein und klicken Sie auf Hinzufügen.
4. Halten Sie das Ziehpunkt-Symbol (⠿) neben dem Eintrag gedrückt und ziehen Sie ihn unter und leicht nach rechts unter den Haupteintrag.
5. Klicken Sie auf Menü speichern.

Ein Eintrag auf oberster Ebene kann bis zu zwei Ebenen verschachtelter Menüs darunter aufnehmen.

Was ein Untermenü ist und wann Ihr Shop eines benötigt

Ein Untermenü ist eine Liste untergeordneter Links unter einem übergeordneten Header. Auf dem Desktop öffnet das Überfahren oder Anklicken eine Auswahlliste. Auf Smartphones klappen die Einträge im Navigations-Drawer auf.

Verschachtelte Navigationen sind eine beliebte Lösung, um Kollektionen, Produkte und Seiten effektiv zu organisieren. Statt Ihren Header zu überfrachten, schaffen verschachtelte Menüs eine klare Struktur. Käufer scannen übergeordnete Bereiche wie „Bekleidung“, bevor sie spezifische Untergruppen wie „Jacken“ wählen.

Fügen Sie ein Untermenü hinzu, wenn Ihr Shop über eine flache Struktur hinauswächst. Shopify empfiehlt, maximal sieben Einträge auf oberster Ebene zu verwenden, um eine Überfüllung zu vermeiden. Das Bündeln verwandter Kollektionen hält eine lange Leiste übersichtlicher.

Sie benötigen kein Untermenü, wenn Ihr Shop nur wenige Artikel oder zwei bis drei Kollektionen führt. Ein Dropdown aufzuzwingen, erzeugt unnötige Klicks.

Eine saubere Hierarchie hilft auch Suchmaschinen beim Erfassen Ihres Katalogs. Erfahren Sie, wie Google Ihr Menü crawlt, um zu sehen, wie Menülinks Suchmaschinen helfen, Ihre Kollektionsseiten zu finden.

Schritt-für-Schritt-Anleitung: Untermenü in Shopify erstellen

Shopify bietet einen intuitiven Drag-and-Drop-Menü-Manager. Sie können Ihr Menü am Desktop oder direkt in der mobilen App aufbauen.

Am Desktop

1. Gehen Sie in Ihrem Shopify-Admin zu Content > Menüs. (Hinweis: Ältere Anleitungen nennen diesen Bereich Onlineshop > Navigation; das aktuelle Shopify Help Center verwendet Content > Menüs.)
2. Klicken Sie auf das Menü, das Sie anpassen möchten, meist Main menu.
3. Falls noch kein Haupteintrag vorhanden ist, klicken Sie auf Menüpunkt hinzufügen, vergeben Sie einen Namen (wie „Shop“), wählen Sie einen Link und klicken Sie auf Hinzufügen.
4. Klicken Sie erneut auf Menüpunkt hinzufügen, um den Untereintrag zu erstellen. Tragen Sie den Namen ein, wählen Sie die Zielkollektion oder -seite und klicken Sie auf Hinzufügen.
5. Suchen Sie das Sechs-Punkte-Symbol (⠿) links neben dem Eintrag. Klicken und halten Sie das Ziehpunkt-Symbol (⠿) neben dem Menüpunkt und ziehen Sie ihn an eine andere Position. Ziehen Sie ihn unter den Haupteintrag und bewegen Sie den Cursor leicht nach rechts, bis die Zeile einrückt. Lassen Sie die Maustaste los.
6. Wiederholen Sie diesen Vorgang für weitere Unterkategorien und ordnen Sie die Einträge nach Wunsch an.
7. Klicken Sie auf Menü speichern. Speichern Sie Menüänderungen regelmäßig, um das Limit für ungespeicherte Änderungen nicht zu überschreiten.

In der mobilen Shopify-App

Sie können Menüs auch auf Ihrem Smartphone verwalten:

1. Öffnen Sie die Shopify-App, tippen Sie auf das Menüsymbol und öffnen Sie Menüs im Bereich Contents.
2. Tippen Sie auf den Namen Ihres Hauptmenüs und anschließend auf Menüpunkt hinzufügen.
3. Geben Sie Name und Ziellink ein und tippen Sie auf Hinzufügen.
4. Halten Sie das Ziehpunkt-Symbol (⠿) gedrückt, ziehen Sie den Eintrag unter den Haupteintrag und wischen Sie leicht nach rechts, bis er einrückt.
5. Tippen Sie auf Speichern.

Shopify empfiehlt, Menüs auf Mobilgeräten zu testen, um zu bestätigen, dass Dropdown-Menüs wie erwartet aufklappen und Links gut erreichbar sind.

Einen Haupteintrag erstellen, der nur das Dropdown öffnet

Viele Händler fragen: „Wie erstelle ich einen Menüpunkt in Shopify, der nicht klickbar ist?“

Oft soll ein Begriff wie „Nach Kategorie shoppen“ rein als Auslöser für das Dropdown dienen. Führt der Haupteintrag zu einer leeren Seite, leitet ein Klick den Besucher ungewollt von seiner aktuellen Ansicht weg.

So richten Sie einen nicht klickbaren Haupteintrag ein:

1. Klicken Sie unter Content > Menus neben dem Haupteintrag auf Bearbeiten (oder auf Menüpunkt hinzufügen).
2. Tragen Sie die Bezeichnung in das Feld Name ein. Verwenden Sie aussagekräftige Bezeichnungen wie „Nach Kategorie shoppen“ für Einträge mit #-Links, damit Kunden wissen, was sie erwartet.
3. Wenn der Header nirgendwohin verlinken soll, tragen Sie # in das Feld für den Link ein.
4. Klicken Sie auf Änderungen anwenden und anschließend auf Menü speichern.

Die meisten Themes setzen Dropdown-Header als Schaltflächen statt als klickbare Links um. Bei einem #-Link gibt es keine Seite zu laden, daher kann ein Tippen stattdessen das Dropdown öffnen.

Möchten Sie Kunden dennoch Zugriff auf eine übergeordnete Kollektionsseite geben, fügen Sie als ersten Eintrag im Untermenü einen Link namens „Alle [Kategoriename] anzeigen“ ein.

Beachten Sie: Wenn Sie einen Menüpunkt entfernen, der verschachtelte Unterpunkte besitzt, werden auch diese Unterpunkte gelöscht. Ziehen Sie Untereinträge vor dem Löschen immer erst auf die oberste Ebene heraus.

Abbildung 1: Konzeptillustration — Haupteintrag mit Rauten-Link (#) als reiner Menü-Auslöser im Vergleich zu einem direkten Seitenlink.

Wie viele Ebenen kann ein Shopify-Untermenü haben?

Händler mit umfangreichen Katalogen fragen sich oft: „Wie viele Menüebenen unterstützt Shopify?“

Im Menü-Manager von Shopify kann der oberste Eintrag bis zu zwei Ebenen verschachtelter Menüs darunter enthalten. Das ergibt insgesamt drei Ebenen:

• Ebene 1 (Hauptebene): Der primäre Link in Ihrer Kopfzeile (z. B. „Herren“).
• Ebene 2 (Erstes Untermenü): Die Auswahlliste unter Ebene 1 (z. B. „Schuhe“).
• Ebene 3 (Zweites Untermenü / Flyout): Eine Unterverzweigung von Ebene 2 (z. B. „Sneaker“).

Shopify unterstützt zwar drei Ebenen im Admin, doch Ihr Theme bestimmt, ob alle drei dargestellt werden. Stellen Sie sicher, dass Sie Ihr Theme aktualisieren, damit es alle drei Menüebenen in Ihrem Onlineshop anzeigt.

Auch der Anzeigeort spielt eine Rolle: Während praktisch alle Themes verschachtelte Einträge im Hauptmenü darstellen, zeigen nur einige Themes verschachtelte Einträge an anderen Orten wie im Footer oder in Sidebars als Dropdowns an.

Um Ihr Theme zu prüfen, verschachteln Sie einen Testeintrag auf Ebene 3 unter Ebene 2, speichern Sie und prüfen Sie die Vorschau auf Desktop und Smartphone. Klappt die dritte Ebene nicht auf, unterstützt Ihr Theme sie möglicherweise nicht.

Beschränken Sie sich nach Möglichkeit auf zwei Ebenen. Dreistufige Flyouts sind schwerer zu bedienen, besonders mit der Maus. Für größere Kataloge bietet unser Leitfaden zur Planung mehrstufiger Shopify-Menüs praktische Strukturierungsansätze.

So funktionieren Untermenüs auf Mobilgeräten

Smartphones haben keine Maus, daher muss Ihr Untermenü per Tippen funktionieren.

Was Kunden im Drawer sehen

Auf Smartphone-Displays weicht das horizontale Menü einem Hamburger-Symbol. Ein Tippen darauf öffnet den Drawer:

• Übergeordnete Punkte zeigen oft ein Erweiterungssymbol wie ein Pluszeichen (+) oder einen Pfeil.
• Das Antippen klappt die Unterpunkte meist als Liste auf oder öffnet ein Unterpanel; das genaue Verhalten hängt von Ihrem Theme ab.
• Verwendet ein Haupteintrag einen #-Link, öffnen die meisten Themes die Liste, statt eine Seite zu laden.

Shopify empfiehlt, Menüs auf Mobilgeräten zu testen, um zu bestätigen, dass Dropdown-Menüs wie erwartet aufklappen und Schaltflächen daumengerecht dimensioniert sind.

Einen „Alle anzeigen“-Link ergänzen

Auf dem Desktop können Besucher über ein Menü fahren und dennoch auf den Hauptlink klicken. Auf Touchscreens gibt es keinen Hover-Zustand: Ein Tippen öffnet entweder das Menü oder steuert eine URL an.

Das Bereitstellen einer „Alle anzeigen“-Option in der mobilen Hauptnavigation ist laut Baymard Institute ein kostengünstiger Weg, um dieses Kundenbedürfnis zu erfüllen.

Trotz des Nutzens ergaben Baymard-Erhebungen, dass nur 24 % der Websites dies gut umsetzen.

So setzen Sie dies um:

1. Ergänzen Sie unter jedem Hauptpunkt einen Link namens „Alle [Kategorie] anzeigen“, der auf die Gesamtkollektion verweist.
2. Platzieren Sie diesen Link ganz oben in der Unterliste.
3. Halten Sie Listen kompakt, um langes Scrollen zu vermeiden.

Weitere Gestaltungsregeln finden Sie in unserem Leitfaden zu Best Practices für mobile Drawer-Menüs.

Untermenü wird nicht angezeigt? Häufige Fehler beheben

Erscheint Ihr Untermenü nach dem Speichern nicht, liegt die Ursache meist an einem von vier Konfigurationsfehlern:

Das Theme verwendet ein anderes Menü

Der häufigste Fehler: Sie bearbeiten das Menü Main menu, während Ihr Theme auf eine andere Liste eingestellt ist. Stellen Sie sicher, dass das ausgewählte Menü genau jenes ist, das Sie gerade bearbeitet haben. Sie können das Standard-Hauptmenü in den Header-Einstellungen der meisten Themes anpassen. Gehen Sie zu Onlineshop > Themes > Anpassen > Header, prüfen Sie die Einstellung Menü, wählen Sie Ihr Menü aus und speichern Sie.

Der Eintrag ist nicht eingerückt

Liegen Untereinträge bündig am linken Rand, behandelt Shopify sie als Hauptebene. Ziehen Sie den Unterpunkt unter Content > Menüs unter den Haupteintrag und bewegen Sie ihn leicht nach rechts, bis die Zeile einrückt. Speichern Sie anschließend.

Das Theme blendet die dritte Ebene aus

Erscheinen Ebene-3-Einträge nicht, fehlt Ihrem Theme womöglich die Skriptunterstützung für tiefere Flyouts. Stellen Sie sicher, dass Sie Ihr Theme aktualisieren, damit es alle drei Menüebenen in Ihrem Onlineshop anzeigt. Beachten Sie auch, dass manche Themes verschachtelte Menüs nur im Header und nicht in Seitenleisten unterstützen.

Konflikte durch eigenen Code oder Apps

Flackern Dropdowns oder öffnen sich nicht, blockieren oft Drittanbieter-Apps oder CSS-Regeln in theme.liquid das Aufklappen. Duplizieren Sie Ihr Theme und testen Sie die Navigation in der unberührten Kopie.

Barrierefreiheit für Tastatur und Screenreader

Die Navigation muss auch für Kunden bedienbar sein, die Tastaturen oder Screenreader nutzen.

Die Richtlinien der W3C Web Accessibility Initiative (WAI) besagen, dass Menüeinträge mit Untermenüs visuell und im Markup gekennzeichnet sein müssen. Ein Pfeilsymbol signalisiert Sehenden das Vorhandensein weiterer Links, während ARIA-Attribute Screenreadern den Status melden.

Zudem legen W3C-Standards fest, dass Untermenüs beim Navigieren mit der Tabulatortaste nicht automatisch aufklappen dürfen. Der Grund: Tastaturnutzer müssten sonst jeden Untereintrag durchlaufen, um zum nächsten Haupteintrag zu gelangen.

Detaillierte Standards finden Sie in unserem Leitfaden für barrierefreie Navigationsmenüs.

Abbildung 2: Konzeptillustration — Überprüfung des ausgewählten Menüs in den Theme-Header-Einstellungen und Kontrolle der Einrückung von Unterpunkten.

Abwägungen: Wann Sie kein weiteres Untermenü anlegen sollten

Untermenüs bringen Ordnung, doch mehr Ebenen bedeuten nicht automatisch besseren Komfort. Jede zusätzliche Ebene erzeugt Reibung beim Stöbern.

Werden Listen zu lang, leidet die Usability. Die Nielsen Norman Group warnt: „Sehr lange Dropdowns, die ein Scrollen erfordern, machen es Nutzern unmöglich, alle Optionen auf einen Blick zu erfassen.“ Müssen Kunden scrollen, werden Einträge am Ende leicht übersehen.

Prüfen Sie vor dem Anlegen neuer Untermenüs diese Alternativen:

1. Kleine Kollektionen zusammenfassen: Fassen Sie Minikollektionen mit nur wenigen Artikeln zu einer größeren Kollektionsseite zusammen.
2. Bezeichnungen präzisieren: Treffende Hauptbegriffe ersparen Kunden das Suchen in verschachtelten Verzweigungen.
3. Kollektionsfilter nutzen: Lassen Sie Kunden nach Größe, Farbe oder Preis direkt auf der Kollektionsseite filtern, statt jede Variante im Menü aufzuführen.
4. Auf ein Mega-Menü umsteigen: Bei Dutzenden Kategorien ordnet ein mehrspaltiges Mega-Menü Links übersichtlich in Spalten mit Überschriften an. Dies erlaubt die Erfassung ohne Scrollen, erfordert jedoch entsprechende Theme- oder App-Unterstützung.

Mehr zu den Grenzen von Standard-Themes erfahren Sie in unserer Analyse zu Shopify-Theme-Menü-Limits.

Wo Navi+ ins Spiel kommt

Shopifys integrierter Menü-Manager reicht für einfache Dropdowns aus. Bei wachsenden Katalogen stoßen Händler jedoch an Grenzen. Lange einspaltige Listen können unübersichtlich werden, und das mobile Standardmenü eines Themes kann einfacher sein, als Ihr Katalog es braucht.

Wächst Ihr Sortiment über einfache Listen hinaus, bietet Navi+ flexible Lösungen:

• Desktop Mega Menus: Erstellen Sie Mega-Menüs mit Produkten, Kollektionen, Bildern, Symbolen und flexiblen Layouts. Ordnen Sie Unterkategorien in flexiblen Layouts an, damit Kunden Optionen ohne Scrollen erfassen können.
• Mobile Menus: Gestalten Sie mobile Menüs, Drawer-Menüs und Hamburger-Menüs für eine komfortablere Navigation auf Smartphones.

Navi+ Menüs erstellen Sie in der Navi+ App per Drag-and-Drop, ohne Programmierung. Sie sind vom Menü in Ihrem Shopify-Admin getrennt, das nicht automatisch ersetzt wird.

Wenn Ihr Untermenü zu einer langen Liste angewachsen ist oder Sie Bilder und Spalten auf dem Desktop sowie einen aufgeräumten mobilen Drawer wünschen, können Sie Navi+ Tab Bar & Mega Menu parallel zu Ihrem Theme testen, während Ihr Shopify-Menü bestehen bleibt.

Checkliste vor der Veröffentlichung Ihres Untermenüs

Prüfen Sie diese acht Punkte vor dem Livegang Ihres Menüs:

• Header-Menü verifiziert: Unter Onlineshop > Themes > Anpassen > Header sichergestellt, dass das aktive Menü mit der Liste in Content > Menüs übereinstimmt.
• Einrückung kontrolliert: Geprüft, ob jeder Untereintrag sichtbar unter dem Haupteintrag eingerückt ist.
• Aussagekräftiger Rauten-Header: Bei #-Links eine verständliche Bezeichnung wie „Nach Kategorie shoppen“ gewählt.
• „Alle anzeigen“-Link integriert: Oben in jeder Unterliste einen Link zu „Alle [Kategorie] anzeigen“ für Smartphone-Nutzer hinterlegt.
• Auf echten Smartphones getestet: Sichergestellt, dass sich das Untermenü öffnet und die Links auf einem echten Smartphone leicht zu tippen sind.
• Maximal sieben Haupteinträge: Hauptleiste auf sieben oder weniger Punkte begrenzt, um Überladung zu vermeiden.
• Sichtbare Ausklapp-Symbole vorhanden: Geprüft, ob Pfeile oder Symbole auf das Vorhandensein von Untermenüs hinweisen.
• Menüänderungen gespeichert: Auf Menü speichern geklickt, um alle Anpassungen zu sichern.

Häufig gestellte Fragen (FAQ)

Wie füge ich ein Untermenü in Shopify hinzu?

Gehen Sie in Ihrem Shopify-Admin zu Content > Menüs, öffnen Sie Ihr Hauptmenü, klicken Sie auf Menüpunkt hinzufügen, um einen Untereintrag zu erstellen, und ziehen Sie ihn am Ziehpunkt (⠿) unter und leicht nach rechts unter den Haupteintrag. Klicken Sie auf Menü speichern.

Wie viele Ebenen kann ein Shopify-Menü haben?

Ein Haupteintrag kann bis zu zwei verschachtelte Dropdown-Ebenen unter sich aufnehmen, was maximal drei Ebenen ergibt. Ihr Theme muss aktualisiert sein, um alle drei Ebenen im Shop darzustellen.

Wie mache ich einen Hauptmenüpunkt nicht klickbar?

Tragen Sie # in das Feld „Link suchen oder einfügen“ des Haupteintrags ein und wählen Sie eine Bezeichnung wie „Nach Kategorie shoppen“. Die meisten Themes behandeln ihn dann als Schalter statt als Link.

Warum wird mein Untermenü im Shop nicht angezeigt?

Meist ist im Header-Bereich des Themes ein anderes Menü hinterlegt als das, welches Sie bearbeitet haben. Zudem kann der Eintrag unzureichend eingerückt sein oder das Theme unterstützt die Menüebene nicht.

Funktionieren Untermenüs auf Mobilgeräten?

Ja. Auf Smartphones zeigen die meisten Themes das Menü hinter einem Hamburger-Symbol und öffnen die Untereinträge darin. Testen Sie das Verhalten auf einem Smartphone und bieten Sie auf jeder Ebene einen „Alle anzeigen“-Link an.

Quellen

• Shopify Help Center: Drop-down menus — Offizielle Anleitung zur Erstellung verschachtelter Menüs und mobiler Tests.
• Shopify Help Center: Editing menus — Regeln zu Ziehpunkten, Änderungslimits und dem Löschen von Hauptelementen.
• Shopify Partners Blog: Building Nested Navigations with Shopify Link List — Übersicht über Linklisten und verschachtelte Navigationsstrukturen.
• Shopify Community: Nesting menu not showing — Händlerlösung zur Überprüfung von Menüzuteilungen im Theme-Header.
• W3C Web Accessibility Initiative (WAI): Flyout Menus Tutorial — Barrierefreiheitsstandards für optische Kennzeichnungen und Tastaturnavigation.
• Baymard Institute: Have a “View All” Option in the Main Navigation at Each Level of the Mobile Product Catalog (Only 24% Get It Right) (2022) — Audit-Ergebnisse zur Bereitstellung von „Alle anzeigen“-Optionen auf Mobilgeräten.
• Nielsen Norman Group: Dropdowns: Design Guidelines — Usability-Erkenntnisse zu langen, scrollbaren Dropdown-Listen.
• Shopify App Store: Navi+ Tab Bar & Mega Menu — App-Eintrag für Mega-Menüs und mobile Menüs.
• YouTube (Shopify Academy): How to create drop-down menus Shopify Help Center — Offizielles Tutorial zur Menüerstellung.
• YouTube (Learn With Shopify): How to reorganize your Shopify Menu like a pro — Offizielles Video zur Menü-Restrukturierung.