Hilfe
Einloggen

Dropdown-Menüs in deinem Onlineshop einrichten

Du kannst Dropdown-Menüs verwenden, um Produkte, Kollektionen oder Seiten zu gruppieren und deiner Kundschaft die Navigation in deinem Onlineshop zu erleichtern. Wenn du beispielsweise viele Produkte hast, kannst du sie zu Kollektionen hinzufügen und dann ein Dropdown-Menü aus dem Hauptmenü verwenden, um die Kollektionen zu organisieren. Dies kann deiner Kundschaft helfen, die Art von Produkten zu finden, nach denen sie suchen.

Du kannst auch Menüpunkte in Dropdown-Menüs oder in deinen Standardmenüs hinzufügen, entfernen oder bearbeiten.

Du kannst die Menüs deines Onlineshops in deinem Shopify-Adminbereich unter Inhalt > Menüs anzeigen und ändern.

Auf dieser Seite

Menüpunkte verschachteln, um Dropdown-Menüs zu erstellen

Du kannst Dropdown-Menüs erstellen, indem du Menüpunkte erstellst oder verschiebst, sodass sie unter einem Element der obersten Ebene verschachtelt sind. Das Element der obersten Ebene wird im Hauptmenü deines Onlineshops angezeigt und die verschachtelten Menüpunkte werden in einem Dropdown-Menü angezeigt. Das Element der obersten Ebene kann bis zu zwei Ebenen verschachtelter Dropdown-Menüs haben.

Alle Themes zeigen verschachtelte Elemente als Dropdown-Menüs im Hauptmenü an. Einige Themes zeigen verschachtelte Elemente auch an anderen Stellen als Dropdown-Menüs an.

Das Hauptmenü und die Dropdown-Menüs werden je nach Theme an unterschiedlichen Stellen in deinem Onlineshop angezeigt. Einige Themes zeigen neben dem Namen eines Dropdown-Menüs im Hauptmenü ein Symbol an, damit die Kundschaft erkennt, dass es sich um ein Dropdown-Menü handelt.

Ein Dropdown-Menü über das Hauptmenü hinzufügen

Du kannst über jeden beliebigen Menüpunkt im Hauptmenü ein Dropdown-Menü hinzufügen.

Schritte:

Desktop

  1. Gehe in deinem Shopify-Adminbereich zu Inhalt > Menüs.

  2. Klicke auf den Namen deines Hauptmenüs.

  3. Wähle einen der Hauptmenüpunkte als Header für dein Dropdown-Menü aus oder füge einen neuen Menüpunkt hinzu. Wenn der Header auf nichts verlinken soll, gib # in das Feld Link suchen oder einfügen für den Header-Menüpunkt ein.

  4. Führe die folgenden Schritte aus, um einen Menüpunkt hinzuzufügen, der in das Dropdown-Menü aufgenommen werden soll:

    1. Klicke auf Menüpunkt hinzufügen.
    2. Gib im Feld Name einen Namen für deinen Menüpunkt ein.
    3. Gib im Feld Link suchen oder einfügen ein Ziel für deinen Menüpunkt ein oder wähle eines aus.

  5. Klicke auf Hinzufügen und klicke dann auf Ziehen und ziehe den Menüpunkt, um ihn unter dem Header-Menüpunkt zu verschachteln.

  6. Klicke auf Menü speichern.

Mobil

  1. Tippe in der Shopify-App auf das Symbol Menü.

  2. Tippe im Menü „Inhalte“ auf das Symbol arrow down und anschließend auf „Menüs“.

  3. Tippe auf den Namen deines Hauptmenüs.

  4. Wähle einen der Hauptmenüpunkte als Header für dein Dropdown-Menü aus oder füge einen neuen Menüpunkt als Header hinzu. Wenn der Header auf nichts verlinken soll, gib # in das Feld Link suchen oder einfügen für den Header-Menüpunkt ein.

  5. Führe die folgenden Schritte aus, um einen Menüpunkt hinzuzufügen, der in das Dropdown-Menü aufgenommen werden soll:

    1. Tippe auf Menüpunkt hinzufügen.
    2. Gib im Feld Name einen Namen für deinen Menüpunkt ein.
    3. Gib im Feld Link suchen oder einfügen ein Ziel für deinen Menüpunkt ein oder wähle eines aus.

  6. Tippe auf Hinzufügen und tippe dann auf Drag und ziehe den Menüpunkt, um ihn unter dem Header-Menüpunkt zu verschachteln.

  7. Tippe auf Speichern oder ✓.

Dropdown-Menüs können auch in Fußzeilenmenüs implementiert werden.

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu Inhalt > Menüs.
  2. Optional: Befolge die gleichen Verschachtelungsprinzipien wie bei Hauptmenüs. Du erstellst eine Dropdown-Struktur, indem du auf Drag klickst und die Menüpunkte unter einen Header-Artikel an die gewünschte Position ziehst.
  3. Gib # in das Feld Link für Header-Artikel ein, die nicht auf eine Seite verlinken sollen (z. B. „Support“- oder „Entdecken“-Header).

Überlegungen zur Theme-Kompatibilität

Beachte die folgenden Überlegungen, wenn du deinem Theme Dropdown-Menüs hinzufügst:

  • Die meisten Themes unterstützen bis zu zwei Ebenen verschachtelter Dropdown-Menüs. Überprüfe die Dokumentation deines Themes oder teste verschachtelte Artikel, um die Kompatibilität zu bestätigen.
  • Einige Themes erfordern möglicherweise CSS-Anpassungen, um die Benutzerfreundlichkeit auf Mobilgeräten zu verbessern. Passe dein Theme nicht an, wenn du nicht mit Theme-Code vertraut bist. Mehr Informationen zur Anpassung deines Themes.

Feststellen, ob dein Theme verschachtelte Dropdown-Menüs unterstützt

Um festzustellen, ob dein aktuelles Theme die maximale Anzahl an Ebenen für verschachtelte Dropdown-Menüs unterstützt, die du implementieren möchtest, kannst du die folgenden Ressourcen nutzen:

  1. Dokumentation deines Themes prüfen: Überprüfe die Dokumentation deines Themes auf spezifische Informationen zu den Menüeigenschaften und unterstützten Verschachtelungsebenen.
  2. Verschachtelte Artikel testen: Erstelle eine Test-Menüstruktur mit der gewünschten Anzahl an Verschachtelungsebenen und überprüfe, ob sie sowohl auf Desktop- als auch auf Mobilgeräten korrekt angezeigt wird.

Die meisten Themes unterstützen bis zu zwei Ebenen verschachtelter Dropdown-Menüs. Wenn bei dir Probleme mit Dropdown-Menüs auftreten, überprüfe, ob dein Theme die Anzahl der Verschachtelungsebenen unterstützt, die du zu implementieren versuchst, da einige Themes möglicherweise zusätzliche Anpassungen benötigen, um mehrere Verschachtelungsebenen zu unterstützen.

Best Practices für Dropdown-Menüs

Beachte die folgenden Best Practices, um eine nützliche Menüstruktur zu erstellen, die auf allen Geräten gut funktioniert:

  • Verwende für Menüpunkte der obersten Ebene mit #-Links aussagekräftige Bezeichnungen, wie z. B. „Nach Kategorie einkaufen“.
  • Stelle sicher, dass Menüs auf Mobilgeräten optimiert sind. Du kannst Menüs auf Mobilgeräten testen, um zu bestätigen, dass Dropdown-Menüs wie erwartet erweitert werden.
  • Füge sieben oder weniger Menüpunkte der obersten Ebene hinzu, um eine Überfrachtung zu vermeiden.
  • Verwende klare und aussagekräftige Linktitel. Zum Beispiel „Kollektionen“ und „Sommerkleider“.
  • Jedes Menü kann bis zu 10.000 Artikel enthalten und dein Shop kann insgesamt bis zu 1.000 Menüs haben. Jeder Menüpunkt mit Unterpunkten in einem Dropdown-Menü zählt als separates Menü für dieses Limit.

Zugänglichkeit von Dropdown-Menüs

Die meisten Themes implementieren Header von Dropdown-Menüs als Schaltflächen und nicht als klickbare Links. Dies ist ein beabsichtigtes Design für die Zugänglichkeit, das Kund:innen, die unterstützende Technologien verwenden, hilft, die Navigationsstruktur zu verstehen.

Wenn ein Menüpunkt der obersten Ebene ein Dropdown-Untermenü steuert, fungiert er als Schaltfläche zum Erweitern des Menüs und nicht als Link zu einer neuen Seite. Dieser Ansatz stellt sicher, dass Kund:innen, die Bildschirmleseprogramme oder andere unterstützende Geräte verwenden, ordnungsgemäß durch das Menüsystem deines Shops navigieren können.

Wenn du möchtest, dass Kund:innen auf eine Hauptkategorieseite (wie „Alle Produkte“ oder „Alle Kollektionen“) zugreifen können, füge diese als ersten Artikel im Dropdown-Menü selbst hinzu, anstatt den Header klickbar zu machen.

Fehlerbehebung bei häufigen Problemen

Lies dir die folgenden Lösungen für häufige Probleme durch, die beim Einrichten von Navigationsmenüs auftreten können:

  • Weiterleitungen im mobilen Menü: Wenn ein Menülink der obersten Ebene beim Antippen auf eine neue Seite umleitet, überprüfe das Menü in deinem Shopify-Adminbereich, um zu bestätigen, dass das Menülink-Feld # ist.

  • Sichtbarkeitsprobleme: Wenn verschachtelte Artikel nicht angezeigt werden, stelle sicher, dass sie vollständig unter den Header-Artikel gezogen und in der Benutzeroberfläche von „Menüs“ eingerückt sind. Bestätige, dass dein Theme die Anzahl der von dir eingerichteten Verschachtelungsebenen unterstützt.

  • Theme-Kompatibilität: Wenn bei dir Probleme mit Dropdown-Menüs auftreten, überprüfe, ob dein Theme die Anzahl der Verschachtelungsebenen unterstützt, die du implementieren möchtest. Einige Themes benötigen möglicherweise zusätzliche Anpassungen, um mehrere Verschachtelungsebenen zu unterstützen.

  • Erstellung verschachtelter Menüs blockiert: Wenn bei dir der Fehler „Menu cannot contain nested menus. Opt in the nested navigation feature to use this“ auftritt, muss in deinem Shop möglicherweise die Funktion für die verschachtelte Navigation aktiviert werden. Dies betrifft in der Regel Shops, die vor 2018 erstellt wurden. Kontaktiere den Shopify Support, wenn dieser Fehler bei dir auftritt.

  • Falsches Menü wird angezeigt: Wenn du mehrere Navigationslinks hast, die auf dieselbe Seite verweisen (z. B. auf deine Startseite), zeigt dein Theme möglicherweise das falsche Untermenü an. Stelle sicher, dass jeder Navigationsabschnitt auf eine eindeutige Seite verlinkt, um Verwechslungen zu vermeiden.

  • Menüpunkte verschwinden: Wenn Menülinks verschwinden, ohne gelöscht worden zu sein, überprüfe, ob du die Produkte, Kollektionen oder Seiten gelöscht hast, auf die die Menüpunkte verlinkt waren. Durch das Löschen der verlinkten Ressource wird auch der Menüpunkt entfernt.

Anpassen des Theme-Codes für Dropdown-Menüs

Für Themes, die eine tiefgreifendere Anpassung erfordern, kannst du eine Anpassung deines Theme-Codes in Betracht ziehen.