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 Menüpunkt wird zum Dropdown-Label; Untermenüpunkte erscheinen beim Hovern oder Klicken.
- Die meisten Shopify-Themes unterstützen 1 bis 2 Ebenen der Verschachtelung.
- Für mehrspaltige Dropdowns mit Bildern und hervorgehobenen Inhalten brauchst du ein Mega-Menü.
Ein Dropdown-Menü gruppiert verwandte Navigationspunkte unter einem übergeordneten Label. So bleibt deine Hauptnavigation aufgeräumt, während gleichzeitig viele Seiten leicht zugänglich sind. Hier erfährst du, wie du eins erstellst.
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 übergeordnetem Punkt sind in der Praxis ideal. Bei unter 3 bietet das Dropdown keinen echten Mehrwert (pack die Punkte einfach direkt in die Hauptnavigation). Bei über 8 wird die Liste unübersichtlich und Käufer übersehen Punkte im nicht sichtbaren Bereich. Wenn du mehr als 10 hast, nutze stattdessen ein Mega-Menü — mehrspaltige Layouts stellen größere Mengen optisch besser dar.
Dafür gibt es meist drei Gründe: (1) Die Punkte sind nicht wirklich verschachtelt (sie sehen zwar eingerückt aus, sind es aber nicht — ziehe den Punkt weiter nach rechts, bis du eine deutliche Einrückung siehst), (2) der übergeordnete Punkt hat aufgrund eines Theme-Bugs keine sichtbaren Untermenüpunkte, oder (3) das Theme erfordert bei Touch-fähigen Desktops einen Klick (tap-only). Überprüfe das gerenderte HTML — die untergeordnete <ul> sollte unter der übergeordneten <li> erscheinen.
Nicht über den normalen Navigations-Editor — die Shopify-Navigation unterstützt nur reinen Text und URLs. Die sauberste Lösung: Beschreibe Fudge was du möchtest ("Zeige ein Lucide-Icon neben jedem Dropdown-Punkt, zugeordnet über den Handle") und es bearbeitet den Header-Liquid-Code, um ein SVG pro Punkt zu rendern. Alternativen: eine Mega-Menü-App oder ein Premium-Theme, das Navigations-Metafelder unterstützt.
Das Verlinken ist in der Regel besser für SEO und Usability. Ein Hauptmenüpunkt "Damen", der auf /collections/women verlinkt, gibt dem Klick auf das Label ein sinnvolles Ziel, hilft Google beim Verstehen der Website-Struktur und bedient Shopper, die die grobe Kategorie statt einer speziellen Unter-Collection wollen. Nur-Label-Punkte sind dann sinnvoll, wenn es keine geeignete Zielseite gibt.
Ja, ein wenig. Dropdowns sind ein Signal für interne Verlinkungen — Seiten, die aus der Hauptnavigation verlinkt sind, werden von Google gecrawlt und stärker gewichtet. Wenn du wichtige Collections in Dropdowns aufnimmst, tauchen diese auf jeder Seite auf, was den internen Linkjuice stärkt. Stopf das Dropdown aber nicht zu: Über 30 Links in der Navigation können das Signal wieder verwässern.
