Dropdown-Menüs in deinem Onlineshop einrichten
Du kannst Dropdown-Menüs verwenden, um Produkte, Kollektionen oder Seiten zu gruppieren und den Kunden dadurch die Navigation in deinem Onlineshop erleichtern: Wenn du zum Beispiel viele Produkte hast, kannst du sie in Kollektionen einteilen und dann ein Dropdown-Menü im Hauptmenü verwenden, um die Kollektionen zu organisieren. Auf diese Weise können Kunden die gesuchten Produktarten leichter finden.
In Dropdown-Menüs und in Standardmenüs kannst du Menüpunkte auch hinzufügen, entfernen und bearbeiten.
Du kannst deine Onlineshop-Menüs unter Inhalt > Menüs in deinem Shopify-Adminbereich anzeigen und ändern.
Auf dieser Seite
Menüelemente zum Erstellen von Dropdown-Menüs verschachteln
Du kannst Dropdown-Menüs erstellen, indem du Menüpunkte so erstellst oder verschiebst, dass sie unterhalb eines übergeordneten Punkts "geschachtelt" sind. Der übergeordnete Punkt wird im Hauptmenü deines Onlineshops angezeigt und die geschachtelten Menüpunkte in einem Dropdown-Menü. Der übergeordnete Punkt kann bis zu zwei Ebenen geschachtelter Dropdown-Menüs enthalten.
Alle Themes zeigen verschachtelte Elemente als Dropdown-Menüs im Hauptmenü an. Einige Themes zeigen verschachtelte Elemente als Dropdown-Menüs an anderen Stellen an.
Das Erscheinungsbild und der Standort des Hauptmenüs und Dropdown-Menüs in deinem Onlineshop hängen vom Theme ab. Bei einigen Themes wird neben dem Namen eines Dropdown-Menüs im Hauptmenü ein Symbol angezeigt, damit Kunden erkennen können, dass ein Dropdown-Menü vorhanden ist.
Dropdown-Menü im Hauptmenü hinzufügen
Du kannst für jedes Menüelement des Hauptmenüs ein Dropdown-Menü hinzufügen.
Schritte:
Desktop
Gehe in deinem Shopify-Adminbereich zu Inhalt > Menüs.
Klicke auf den Namen deines Hauptmenüs.
Wähle einen der Hauptmenüpunkte als Header für das Dropdown-Menü aus oder füge einen neuen Menüpunkt als Header hinzu. Wenn der Header kein Link sein soll, gib im Feld Einen Link suchen oder einfügen des Header-Menüpunkts # ein.
Um einen Menüpunkt zum Dropdown-Menü hinzuzufügen, führe die folgenden Schritte aus:
- Klicke auf Menüpunkt hinzufügen.
- Gib im Feld Name einen Namen für deinen Menüpunkt ein.
- Gib im Feld Einen Link suchen oder einfügen ein Ziel für deinen Menüpunkt ein oder wähle eines aus.
Klicke auf Hinzufügen und dann auf
und ziehe den Menüpunkt unter den Header-Menüpunkt, um ihn zu verschachteln.Klicke auf Menü speichern.
iPhone
Tippe in der Shopify-App auf die Schaltfläche
.Tippe auf Inhalt > Menüs.
Tippe auf den Namen deines Hauptmenüs.
Wähle einen der Hauptmenüpunkte als Header für das Dropdown-Menü aus oder füge einen neuen Menüpunkt als Header hinzu. Wenn der Header kein Link sein soll, gib im Feld Einen Link suchen oder einfügen des Header-Menüpunkts
#ein.Um einen Menüpunkt zum Dropdown-Menü hinzuzufügen, führe die folgenden Schritte aus:
- Tippe auf Menüpunkt hinzufügen.
- Gib im Feld Name einen Namen für deinen Menüpunkt ein.
- Gib im Feld Einen Link suchen oder einfügen ein Ziel für deinen Menüpunkt ein oder wähle eines aus.
Tippe auf Hinzufügen und dann auf
und ziehe den Menüpunkt unter den Header-Menüpunkt, um ihn zu verschachteln.Tippe auf Speichern.
Android
Tippe in der Shopify-App auf die Schaltfläche
.Tippe auf Inhalt > Menüs.
Tippe auf den Namen deines Hauptmenüs.
Wähle einen der Hauptmenüpunkte als Header für das Dropdown-Menü aus oder füge einen neuen Menüpunkt als Header hinzu. Wenn der Header kein Link sein soll, gib im Feld Einen Link suchen oder einfügen des Header-Menüpunkts
#ein.Um einen Menüpunkt zum Dropdown-Menü hinzuzufügen, führe die folgenden Schritte aus:
- Tippe auf Menüpunkt hinzufügen.
- Gib im Feld Name einen Namen für deinen Menüpunkt ein.
- Gib im Feld Einen Link suchen oder einfügen ein Ziel für deinen Menüpunkt ein oder wähle eines aus.
Tippe auf Hinzufügen und dann auf
und ziehe den Menüpunkt unter den Header-Menüpunkt, um ihn zu verschachteln.Tippe auf ✓.
Integration des Fußzeilenmenüs
Dropdown-Menüs kannst du auch in Fußzeilenmenüs integrieren.
Schritte:
- Gehe in deinem Shopify-Adminbereich zu Inhalt > Menüs.
- Optional: Du kannst dieselben Grundsätze für die Verschachtelung wie bei Hauptmenüs anwenden: Beispielsweise kannst du Menüpunkte unter einen Header-Punkt ziehen, um eine Dropdown-Struktur zu erstellen. Klicke dazu auf und ziehe die Punkte an die gewünschte Stelle.
- Gib bei Header-Punkten, die keinen Link zu einer anderen Seite (wie „Support“ oder „Entdecken“) enthalten sollen, im Feld Link # ein.
Überlegungen zur Kompatibilität von Themes
Beachte die folgenden Überlegungen, wenn du Dropdown-Menüs zu deinem Theme hinzufügst:
- Die meisten Themes unterstützen bis zu zwei Ebenen verschachtelter Dropdown-Menüs. Um herauszufinden, ob dein Theme entsprechend kompatibel ist, sieh in der Dokumentation des Themes nach oder teste verschachtelte Elemente.
- Bei manchen Themes sind möglicherweise CSS-Anpassungen erforderlich, um die mobile Nutzbarkeit zu verbessern. Wenn du mit dem Theme-Code nicht vertraut bist, passe dein Theme nicht an. Mehr Informationen zum Anpassen deines Themes.
Best Practices für Dropdown-Menüs
Mache dich mit den folgenden Best Practices für die Erstellung einer praktischen Menüstruktur vertraut, die auf allen Geräten gut funktioniert.
Verwende für Top-Level-Menüpunkte mit #-Links beschreibende Kennzeichnungen, z. B. „Nach Kategorie kaufen“.
Stelle sicher, dass die Menüs für mobile Geräte optimiert sind. Du kannst Menüs auf einem mobilen Gerät testen, um dich zu vergewissern, dass Dropdown-Menüs wie erwartet erweitert werden.
Damit deine Menüführung übersichtlich bleibt, füge höchstens sieben Top-Level-Menüpunkte hinzu.
Verwende klare und beschreibende Linktitel, z. B. „Kollektionen“ und „Sommerkleider“.
Fehlerbehebung bei häufigen Problemen
Sieh dir die folgenden Lösungen für häufige Probleme an, die beim Einrichten von Navigationsmenüs auftreten können:
Mobile Menüweiterleitungen: Wenn ein Top-Level-Menülink beim Antippen auf eine neue Seite weiterleitet, überprüfe im Shopify-Adminbereich, ob im Feld für den Menülink # eingetragen ist.
Sichtbarkeitsprobleme: Wenn verschachtelte Punkte nicht angezeigt werden, stelle sicher, dass sie in der Oberfläche Menüs vollständig unter den Header-Punkt gezogen wurden und eingerückt sind. Vergewissere dich, dass dein Theme die eingerichtete Anzahl verschachtelter Ebenen unterstützt.
Den Theme-Code anpassen
Bei Themes, die eine umfassendere Anpassung benötigen, kannst du ggf. den Theme-Code anpassen.