Das Wichtigste in Kürze
- Gehe zu Onlineshop > Navigation > Menü bearbeiten > ziehe einen Menüpunkt nach rechts unter einen übergeordneten Punkt, um ihn zu verschachteln.
- Der übergeordnete Punkt wird zum Dropdown-Label; untergeordnete Punkte erscheinen, wenn der Kunde mit der Maus darüber fährt oder klickt.
- Die meisten Shopify-Themes unterstützen 1-2 Verschachtelungsebenen.
- Für mehrspaltige Dropdowns mit Bildern und hervorgehobenen Inhalten benötigst du ein Mega-Menü.
Ein Dropdown-Menü gruppiert verwandte Navigationspunkte unter einem übergeordneten Label. So bleibt die Hauptnavigation übersichtlich, während gleichzeitig viele Seiten erreichbar sind. Hier erfährst du, wie man eines erstellt.
Warum Sie uns vertrauen können
Wir haben bereits hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer Bewertung von 4.9 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 Parent-Element ist der praktische Sweet Spot. Bei unter 3 sorgt das Dropdown für Reibung ohne Mehrwert (pack die Elemente einfach direkt in die Top-Navigation). Bei über 8 wird die Liste unübersichtlich und Käufer übersehen Elemente 'below the fold'. Wenn du 10+ hast, nutze stattdessen ein Mega-Menü – mehrspaltige Layouts stellen größere Menüs visuell besser dar.
Drei typische Ursachen: (1) Die Elemente sind nicht wirklich verschachtelt (sie sehen eingerückt aus, sind es aber nicht – zieh den Handle weiter nach rechts, bis du eine deutliche Einrückung siehst), (2) das Parent-Element hat aufgrund eines Theme-Bugs keine sichtbaren Unterelemente, oder (3) das Theme verwendet Tap-only auf Touch-fähigen Desktops. Untersuche das gerenderte HTML – das Child-<ul> sollte unter dem Parent-<li> erscheinen.
Nicht über den nativen Navigations-Editor – die Shopify-Navigation unterstützt nur reine Text-Labels und URLs. Die sauberste Lösung: Beschreibe Fudge was du willst ("zeige ein Lucide-Icon neben jedem Dropdown-Element, gemappt nach Handle"), und es bearbeitet das Header-Liquid, um ein SVG pro Element zu rendern. Alternativen: eine Mega-Menü-App oder ein Premium-Theme mit Metafield-Support für die Navigation.
Das Verlinken des Parent-Elements ist generell besser für SEO und Usability. Ein "Damen"-Element, das zu /collections/women führt, gibt dem Klick auf das Label ein sinnvolles Ziel, hilft Google, die Seitenhierarchie zu verstehen, und dient Käufern, die die breite Kategorie statt einer Sub-Collection wollen. Reine Label-Elemente (Label-only) funktionieren gut, wenn es kein kanonisches Ziel gibt.
Ja, ein wenig. Dropdowns sind ein Signal für die interne Verlinkung – Seiten, die in der Hauptnavigation verlinkt sind, werden von Google gecrawlt und stärker gewichtet. Wenn du wichtige Collections in Dropdowns aufnimmst, werden sie auf jeder Seite sichtbar, was internes Link-Equity aufbaut. Übertreibe es aber nicht: 30+ Links in der Nav können das Signal verwässern.
