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 das Hauptmenü).
Schritt 3. Wenn das übergeordnete Element (das Dropdown-Label auf oberster Ebene) noch nicht existiert, klicken Sie auf Menüpunkt hinzufügen, vergeben Sie 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 Elemente, die im Dropdown erscheinen sollen, auf die gleiche Weise hinzu – klicken Sie für jedes Element auf Menüpunkt hinzufügen und legen Sie Namen und Links fest.
Schritt 5. Verschachteln Sie nun die untergeordneten Elemente unter dem übergeordneten Element. Fahren Sie mit der Maus über ein untergeordnetes Element, um den Drag-Griff auf der linken Seite anzuzeigen. Ziehen Sie das Element nach rechts und leicht unter das übergeordnete Element. Sie sehen, dass es eingerückt wird, wenn es verschachtelt ist.
Schritt 6. Wiederholen Sie dies für jedes Element, das Sie im Dropdown haben möchten.
Schritt 7. Klicken Sie auf Menü speichern.
Wenn Kunden in Ihrem Shop über das übergeordnete Element fahren oder darauf klicken, erscheinen die verschachtelten Elemente als Dropdown-Liste.
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.
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 dem Smartphone verwandeln sich Dropdown-Menüs in der Regel in ein ausklappbares Akkordeon im mobilen Menü-Drawer. Durch Tippen auf das übergeordnete Element wird das Dropdown direkt in der Liste ausgeklappt, anstatt ein Hover-Overlay anzuzeigen.
Die genaue mobile Umsetzung hängt von Ihrem Theme ab. Es lohnt sich, die mobile Navigation nach dem Einrichten Ihrer Dropdowns zu testen, um sicherzustellen, dass sie auf kleinen Bildschirmen gut aussieht.
