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.
- Shopify-Menüs gehen drei Ebenen tief (übergeordnet, untergeordnet, Kindeskind); die meisten aktuellen Themes zeigen alle drei an.
- Für mehrspaltige Dropdowns mit Bildern und hervorgehobenen Inhalten brauchst du ein Mega-Menü.
Um ein Dropdown-Menü in Shopify zu erstellen, gehe zu Onlineshop > Navigation, öffne dein Hauptmenü, füge die Punkte hinzu, ziehe dann jeden untergeordneten Punkt nach rechts unter seinen übergeordneten Punkt und speichere.
Warum du uns vertrauen kannst
Wir haben Hunderte von Shopify-Storefronts aufgebaut und angepasst. Wir entwickeln auch Fudge, den KI-Operator für Shopify-Stores, mit einer Bewertung von 4.9 im Shopify App Store. Benutzerdefinierte Menüs sind eine der Änderungen, die sein Store-Editor in einem Theme vornimmt.
So erstellst du ein Dropdown-Menü in Shopify
Schritt 1. Gehe zu Onlineshop > Navigation.
Schritt 2. Klicke auf das Menü, das du bearbeiten möchtest (meistens Hauptmenü).
Schritt 3. Wenn der übergeordnete Punkt (das Dropdown-Label auf der obersten Ebene) noch nicht existiert, klicke auf Menüpunkt hinzufügen, gib ihm einen Namen (z. B. “Shop” oder “Kollektionen”) und lege den Link fest. Wenn es nur ein Label ohne Ziel sein soll, lass den Link leer.
Schritt 4. Füge die Punkte, die du im Dropdown haben möchtest, auf die gleiche Weise hinzu - klicke für jeden auf Menüpunkt hinzufügen und lege Namen und Link fest.
Schritt 5. Verschachtle nun die untergeordneten Punkte unter dem übergeordneten. Fahre mit der Maus über einen untergeordneten Punkt, um den Ziehpunkt auf der linken Seite anzuzeigen. Ziehe den Punkt nach rechts und leicht unter den übergeordneten Punkt. Du wirst sehen, dass er eingerückt wird, wenn er verschachtelt ist.
Schritt 6. Wiederhole das für jeden Punkt, den du im Dropdown haben möchtest.
Schritt 7. Klicke auf Menü speichern.
Wenn Kunden in deinem Store über den übergeordneten Punkt fahren oder darauf klicken, erscheinen die verschachtelten Punkte als Dropdown-Liste.
Wie das Dropdown auf Handys angezeigt wird, erfährst du unter Wie man das mobile Menü in Shopify ändert.
So verschachtelst du Punkte unter einem bestehenden übergeordneten Punkt
Wenn du bereits einen Punkt auf der obersten Ebene hast und bestehende Punkte darunter verschieben willst:
Fahre mit der Maus über den Punkt, den du verschachteln willst, greife den Ziehgriff und ziehe ihn nach rechts, bis er unter dem gewünschten übergeordneten Punkt eingerückt ist. Speichern.
Wie tief kann man in Shopify verschachteln?
Shopify-Menüs gehen drei Ebenen tief: übergeordnet > untergeordnet > Kindeskind.
Dawn und die meisten aktuellen Themes zeigen die dritte Ebene als verschachtelte Liste im Dropdown an; einige ältere Themes zeigen nur zwei.
Bevor du eine dreistufige Navigationsstruktur aufbaust, solltest du sie in der Vorschau deines Themes überprüfen. Wenn die Links der dritten Ebene nicht angezeigt werden, flache deine Struktur auf eine Dropdown-Ebene ab.
Dropdown vs. Mega-Menü
Ein normales Dropdown zeigt eine einzelne vertikale Liste mit Links. Das funktioniert gut bei 3–8 Punkten pro übergeordnetem Punkt.
Ein Mega-Menü zeigt ein breites Panel mit mehreren Spalten, Bildern, hervorgehobenen Produkten und individuellen Layouts. Es ist etwas völlig anderes. Einige Themes, darunter Dawn, haben eine einfache Mega-Menü-Einstellung im Header-Abschnitt, aber für Bilder und hervorgehobene Produkte brauchst du ein Premium-Theme, eine App oder benutzerdefinierten Code.
Wenn du über 10 Kollektionen hast, Bilder in deinem Navigations-Dropdown haben möchtest oder einen Promo-Bereich innerhalb der Navigation hervorheben willst, brauchst du ein Mega-Menü. Sieh dir unseren Guide an: Wie man ein Mega-Menü in Shopify erstellt.
Der Link des übergeordneten Punkts bei der Erstellung von Dropdowns
Wenn unter einem Navigationspunkt weitere Punkte verschachtelt sind, sehen die Kunden das übergeordnete Label in der Navigation. Du hast zwei Optionen für den Link des Parent-Elements:
Option 1 – Gib dem Parent ein Ziel. Zum Beispiel ein Parent-Punkt “Damen”, der auf /collections/women verlinkt. Kunden, die direkt auf “Damen” klicken, gelangen zu dieser Kollektion. Das Dropdown zeigt Unterkollektionen.
Option 2 – Lass den Parent-Link leer. Das übergeordnete Label hat kein Ziel – ein Klick öffnet nur das Dropdown. Nutze dies, wenn das Parent-Element nur als Kategorie-Label dient und es keine sinnvolle Einzelseite gibt, auf die es verweisen sollte.
Beide Ansätze sind valide. Option 1 ist in der Regel besser für SEO und Usability, da jedes Label anklickbar ist.
Verhalten von Dropdowns auf mobilen Geräten
Auf dem Handy verwandeln sich Dropdown-Menüs typischerweise in ein ausklappbares Akkordeon im mobilen Menü. Tippt man auf den übergeordneten Punkt, klappt das Dropdown direkt aus (Inline), anstatt ein Hover-Overlay zu zeigen.
Die genaue mobile Darstellung hängt von deinem Theme ab. Es lohnt sich, die mobile Navigation nach dem Einrichten deiner Dropdowns zu testen, um sicherzugehen, dass sie auf kleinen Bildschirmen gut aussieht.
FAQ
Wie viele Punkte sollte ein Shopify-Dropdown-Menü haben?
3–8 pro übergeordnetem Punkt sind ideal. Unter 3 bringt das Dropdown Reibung ohne Nutzen (packe die Punkte einfach in die Hauptnavigation). Über 8 lässt sich die Liste schlecht überfliegen und Käufer übersehen Punkte, die erst beim Scrollen sichtbar werden. Wenn du mehr als 10 hast, nutze stattdessen ein Mega-Menü – mehrspaltige Layouts bewältigen größere Mengen visuell besser.
Warum erscheint mein Shopify-Dropdown nicht beim Hovern?
Drei häufige Ursachen: (1) die Punkte sind nicht wirklich verschachtelt (sie sehen eingerückt aus, sind es aber nicht – ziehe den Ziehpunkt weiter nach rechts, bis du eine deutliche Einrückung siehst), (2) der übergeordnete Punkt hat aufgrund eines Theme-Bugs keine sichtbaren Unterpunkte, oder (3) das Theme verwendet auf Touch-fähigen Desktops nur Klicks. Untersuche den gerenderten HTML-Code – das untergeordnete <ul> sollte unter dem übergeordneten <li> erscheinen.
Kann ich Icons oder Bilder neben Shopify-Dropdown-Punkten hinzufügen?
Nicht über den nativen Navigations-Editor – die Shopify-Navigation unterstützt nur einfache Text-Labels und URLs. Die sauberste Lösung: Beschreibe Fudge, was du möchtest ("zeige ein Lucide-Icon neben jedem Dropdown-Punkt, zugeordnet nach Handle") und es bearbeitet das Header-Liquid, um pro Punkt ein SVG zu rendern. Alternativen: eine Mega-Menü-App oder ein Premium-Theme mit Metafield-Unterstützung für die Navigation.
Sollten übergeordnete Dropdown-Punkte auf eine Seite verlinken oder nur ein Label sein?
Den übergeordneten Punkt zu verlinken, ist generell besser für SEO und Usability. Ein "Damen"-Menüpunkt, der zu /collections/women führt, gibt dem Klick auf das Label ein sinnvolles Ziel, hilft Google, die Hierarchie der Seite zu verstehen, und bedient Käufer, die die breite Kategorie statt einer Unterkollektion suchen. Nur-Label-Punkte sind sinnvoll, wenn es kein passendes Hauptziel gibt.
Wirken sich Shopify-Dropdown-Menüs auf SEO aus?
Ja, ein wenig. Dropdowns sind ein Signal für interne Verlinkungen – Seiten, die in der Hauptnavigation verlinkt sind, werden von Google gecrawlt und stärker gewichtet. Wenn du wichtige Kollektionen in Dropdowns aufnimmst, sind sie auf jeder Seite präsent, was die interne Verlinkung stärkt. Aber packe nicht zu viel in die Dropdowns: Über 30 Links in der Navigation können das Signal verwässern.
