Das Wichtigste auf einen Blick
- Gehen Sie zu Onlineshop > Navigation > Menü bearbeiten > ziehen Sie einen Menüpunkt nach rechts unter einen übergeordneten Punkt, um ihn zu verschachteln.
- Das übergeordnete Element wird zum Dropdown-Label; untergeordnete Elemente erscheinen, wenn der Kunde darüber fährt oder klickt.
- Die meisten Shopify-Themes unterstützen 1-2 Verschachtelungsebenen.
- Für mehrspaltige Dropdowns mit Bildern und Featured Content benötigen Sie ein Mega Menu.
Ein Dropdown-Menü gruppiert verwandte Navigationspunkte unter einem übergeordneten Label. Es hält die obere Navigation sauber und macht gleichzeitig viele Seiten zugänglich. Hier erfahren Sie, wie Sie eines erstellen.
Warum Sie uns vertrauen können
Wir haben hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer 5.0-Bewertung im Shopify App Store.
So erstellen Sie ein Dropdown-Menü in Shopify
Schritt 1. Gehen Sie zu Onlineshop > Navigation.
Schritt 2. Klicken Sie auf das Menü, das Sie bearbeiten möchten (normalerweise Hauptmenü).
Schritt 3. Falls der übergeordnete Punkt (das Label für das Dropdown-Menü) noch nicht existiert, klicken Sie auf Menüeintrag hinzufügen, geben Sie ihm einen Namen (z. B. „Shop“ oder „Kollektionen“) und legen Sie den Link fest. Wenn es nur ein Label ohne Ziel sein soll, lassen Sie das Link-Feld leer.
Schritt 4. Fügen Sie die Punkte, die im Dropdown erscheinen sollen, auf die gleiche Weise hinzu – klicken Sie für jeden auf Menüeintrag hinzufügen und legen Sie Namen und Links fest.
Schritt 5. Verschachteln Sie nun die Unterpunkte unter dem übergeordneten Punkt. Fahren Sie mit der Maus über einen Unterpunkt, um den Drag-Handle auf der linken Seite anzuzeigen. Ziehen Sie den Punkt nach rechts und ein Stück unter den übergeordneten Punkt. Sie sehen, dass er eingerückt wird, wenn er verschachtelt ist.
Schritt 6. Wiederholen Sie dies für jeden Punkt, den Sie im Dropdown haben möchten.
Schritt 7. Klicken Sie auf Menü speichern.
Wenn Kunden in Ihrem Shop über den übergeordneten Punkt fahren oder darauf klicken, erscheinen die verschachtelten Punkte als Dropdown-Liste.
Ähnliche Artikel: Mobile Menü in Shopify ändern.
Ähnliche Artikel: Verhalten des mobilen Menüs in Shopify ändern.
Ähnliche Artikel: Kollektionsseite in Shopify erstellen.
So verschachteln Sie Elemente unter einem bestehenden übergeordneten Punkt
Wenn Sie bereits ein Element auf oberster Ebene haben und vorhandene Elemente darunter verschieben möchten:
Fahren Sie über das Element, das Sie verschachteln möchten, greifen Sie den Drag-Griff und ziehen Sie es nach rechts, bis es unter dem gewünschten übergeordneten Element einrückt. Speichern.
Wie tief kann man in Shopify verschachteln?
Das Navigationssystem von Shopify unterstützt technisch gesehen zwei Verschachtelungsebenen: Übergeordnet > Untergeordnet > Enkelkind.
Die meisten Themes zeigen jedoch visuell nur eine Ebene von Dropdowns an. Ein Enkelkind-Element erscheint zwar in den Menüdaten, wird aber in der gerenderten Navigation der meisten Themes nicht angezeigt.
Bevor Sie eine Navigationsstruktur mit drei Ebenen aufbauen, testen Sie, wie Ihr Theme damit umgeht. Wenn es nicht korrekt angezeigt wird, ist die praktische Lösung, Ihre Struktur auf eine Ebene von Dropdowns zu reduzieren.
Dropdown vs. Mega Menu
Ein Standard-Dropdown zeigt eine einzelne vertikale Liste von Links. Das funktioniert gut für 3–8 Elemente pro übergeordnetem Punkt.
Ein Mega Menu zeigt ein breites Panel mit mehreren Spalten, Bildern, Featured Products und individuellen Layouts. Das ist eine ganz andere Sache – die meisten Shopify-Themes unterstützen Mega Menus nicht nativ über den Navigations-Editor.
Wenn Sie mehr als 10 Kollektionen haben, Bilder in Ihrem Navigations-Dropdown wünschen oder einen Werbebereich innerhalb der Navigation hervorheben möchten, benötigen Sie ein Mega Menu. Lesen Sie unseren Guide zum Thema Erstellung eines Mega Menus in Shopify.
Verwandt: Create a Collection Page in Shopify.
Der Link des übergeordneten Elements beim Erstellen von Dropdowns
Wenn ein Navigationselement untergeordnete Elemente hat, sehen Kunden das übergeordnete Label in der Navigation. Sie haben zwei Optionen für den Link des übergeordneten Elements:
Option 1 – Dem übergeordneten Element ein Ziel geben. Zum Beispiel ein übergeordnetes Element „Damen“, das auf /collections/women verlinkt. Kunden, die direkt auf „Damen“ klicken, gelangen zu dieser Kollektion. Das Dropdown zeigt Unterkollektionen.
Option 2 – Den übergeordneten Link leer lassen. Das übergeordnete Label hat kein Ziel – ein Klick darauf öffnet lediglich das Dropdown. Nutzen Sie dies, wenn das übergeordnete Element ein Kategorielabel ist und es keine sinnvolle einzelne Seite gibt, auf die es verweisen sollte.
Beide Ansätze sind legitim. Option 1 ist im Allgemeinen besser für SEO und Usability, da jedes Label navigierbar ist.
Dropdown-Verhalten auf dem Smartphone
Auf mobilen Geräten werden Dropdown-Menüs im mobilen Menübereich typischerweise in ein ausklappbares Akkordeon umgewandelt. Tippt man auf das übergeordnete Element, wird das Dropdown direkt darunter ausgeklappt (inline), anstatt ein Hover-Overlay anzuzeigen.
Die genaue Darstellung auf Mobilgeräten hängt von deinem Theme ab. Es lohnt sich, die mobile Navigation nach dem Einrichten deiner Dropdowns zu testen, um sicherzustellen, dass sie auf kleinen Bildschirmen gut funktioniert.
FAQ
3–8 pro Hauptmenüpunkt (Parent) sind in der Praxis ideal. Bei weniger als 3 sorgt das Dropdown für Reibung ohne echten Mehrwert (packe die Punkte lieber direkt in die Hauptnavigation). Bei mehr als 8 wird die Liste unübersichtlich und Käufer übersehen Punkte, die nicht sofort sichtbar sind. Bei 10+ Elementen solltest du stattdessen ein Mega-Menü nutzen – mehrspaltige Layouts stellen größere Navigationen optisch wesentlich besser dar.
Drei häufige Gründe: (1) Die Elemente sind nicht wirklich verschachtelt (sie sehen eingerückt aus, sind es aber nachweislich nicht – ziehe das Element im Menü Editor weiter nach rechts, bis du eine deutliche Einrückung siehst). (2) Der Hauptmenüpunkt hat aufgrund eines Theme-Bugs keine sichtbaren Untermenüpunkte. (3) Das Theme reagiert auf Computern mit Touchscreens nur auf Klicks (Tap-only). Überprüfe das gerenderte HTML – das untergeordnete <ul> sollte innerhalb des übergeordneten <li> auftauchen.
Nicht über den standardmäßigen Navigations-Editor – die Shopify Navigation unterstützt nur reinen Text und URLs. Die sauberste Lösung: Beschreibe Fudge einfach, was du möchtest ("Zeige ein Lucide-Icon neben jedem Dropdown-Element, zugeordnet über den Handle") und es passt den Header-Liquid-Code so an, dass pro Element ein SVG gerendert wird. Alternativen: Eine Mega-Menu-App oder ein Premium-Theme mit Support für Navigations-Metafields.
Den Hauptmenüpunkt zu verlinken, ist für SEO und Usability meist der weitaus bessere Weg. Wenn ein Punkt wie "Damen" zur /collections/women führt, erhält der Klick auf das Label ein klares Ziel, es hilft Google beim Verständnis der Seitenstruktur und bedient Käufer, die gezielt die Hauptkategorie statt einer bestimmten Unterkategorie suchen. Reine Text-Labels machen nur Sinn, wenn es kein echtes (kanonisches) Ziel gibt.
Ja, ein wenig. Dropdowns sind ein wichtiges Signal für die interne Verlinkung – Seiten aus der Hauptnavigation werden von Google häufiger gecrawlt und höher gewichtet. Wenn du wichtige Kollektionen in ein Dropdown packst, tauchen sie auf jeder Seite auf, was den internen Linkaufbau (Link Equity) stärkt. Überlade deine Dropdowns aber nicht: 30+ Links in der Navigation können das Signal verwässern.
