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.

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: 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.

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.

Benötigen Sie ein Mega Menu oder ein individuelles Dropdown-Design? Beschreiben Sie es Fudge.

Try Fudge for Free

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.

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.