Mega-Menü

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zum Mega-Menü-Block
3. Company XYZ-Dokumentation zur Verwendung von Videos
4. Company XYZ-Dokumentation zu Symbolen
5. Company XYZ-Dokumentation zu Banner-Farbeinstellungen
6. Shopify-Dokumentation zum Theme-Editor
7. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Verwenden Sie diesen Block, um einen obersten Navigationspunkt in ein großes Dropdown mit gruppierten Links und optionalen Werbeinhalten umzuwandeln. Er eignet sich gut, wenn Ihr Header viele Ziele anzeigen soll, ohne überladen zu wirken, und Sie können mehrere Mega menu-Blocks hinzufügen, um ein breiteres Navigationssystem aufzubauen. Einen umfassenderen Überblick über die Theme-Struktur finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken. Weitere Einrichtungsanweisungen finden Sie in der Mega menu-Referenz.

Hinweis

Auf Mobilgeräten werden Menu- und Mega menu-Blocks zu einer einzigen Navigationsoberfläche zusammengeführt. Prüfen Sie die vollständige mobile Navigation, nachdem Sie Blöcke hinzugefügt oder umbenannt haben, damit das zusammengeführte Ergebnis weiterhin klar wirkt.

Grundeinstellungen

Die Grundeinstellungen definieren die oberste Bezeichnung, das Menü, das sich öffnet, und ob zusätzliche Navigationshilfen oder Werbeinhalte angezeigt werden.

Setzen Sie den Title auf die Bezeichnung, die Kundinnen und Kunden im Header sehen sollen, und wählen Sie dann das Menu aus, das sich über diesen Eintrag öffnen soll. Sie können außerdem ein Banner, eine Features-Leiste und Schaltflächen „View all“ für Untermenüs aktivieren, wenn das Dropdown Käuferinnen und Käufer eher zu übergeordneten Kategorieseiten führen soll statt nur zu tieferen Links.

Tipp

Schaltflächen „View all“ eignen sich am besten, wenn Untermenüs wichtige Kategorien oder Kampagnen darstellen. Sie geben Kundinnen und Kunden einen klaren Weg zum übergeordneten Ziel, ohne sie zuerst zu einer engen Auswahl zu zwingen.

Ausrichtungseinstellungen

Diese Einstellungen verfeinern, wie der Inhalt im verfügbaren Platz auf dem Desktop sitzt. Sie sind besonders wichtig, wenn der Block breiter gezogen wird oder ein großzügigeres Layout verwendet.

Wenn Änderungen an der Ausrichtung nur gering erscheinen, prüfen Sie zuerst die Layout-Einstellungen. Layout-Optionen bestimmen, wie viel Platz der Block erhält, und die Ausrichtung dient in der Regel als sekundäre Anpassung innerhalb dieses Bereichs.

Layout-Einstellungen

Layout-Einstellungen steuern, wie viel horizontaler Raum der Block im Header einnimmt und wo er auf dem Desktop sitzt.

Verwenden Sie Fill available space, wenn dieser Block sich ausdehnen und helfen soll, die Header-Zeile auszugleichen. Wählen Sie das Desktop-Layout, das am besten zu Ihrer gesamten Header-Struktur passt, insbesondere wenn dieser Navigationspunkt zentrierter wirken oder mehr Breite einnehmen soll.

Prüfen Sie Layout und Ausrichtung gemeinsam. Ein vollflächiges oder gestrecktes Layout kann das visuelle Gleichgewicht des gesamten Headers verändern, nicht nur dieses Blocks.

Banner-Hintergrund

Wenn Sie das Banner aktivieren, steuert diese Gruppe die Medien, die dahinter angezeigt werden. Sie können ein Bild oder Video verwenden sowie separate mobile Medien, wenn das Desktop-Asset auf kleineren Bildschirmen nicht gut zugeschnitten oder skaliert wird.

Verwenden Sie Cover für eindrucksvolle visuelle Elemente und Contain, wenn das vollständige Bild sichtbar bleiben soll. Halten Sie Banner-Hintergründe einfach genug, damit die Navigation weiterhin leicht zu überblicken bleibt.

Hinweise zur Videoeinrichtung finden Sie unter using video.

Achtung

Aufwendige oder unruhige Hintergrundmedien können die Navigation erschweren. Wenn das Banner mit den Links konkurriert, vereinfachen Sie die Medien oder verstärken Sie das Overlay.

Banner-Vordergrund

Diese Gruppe steuert den Inhalt, der über dem Banner-Hintergrund liegt, einschließlich Text, Symbolen und der Hauptschaltfläche. Alle leer gelassenen Felder werden einfach nicht angezeigt, sodass Sie das Banner leicht minimal halten können.

Verwenden Sie die Ausrichtungssteuerungen, um Inhalte dort zu platzieren, wo sie über Ihren gewählten Medien am besten lesbar sind. Kurze Überschriften und knapper Begleittext funktionieren hier in der Regel besser als längere Werbetexte.

Sie können ein Emoji oder einen unterstützten Symbolnamen für die Felder für das Symbol und das Schaltflächensymbol hinzufügen. Hilfe zur Benennung finden Sie im icon guide.

Wählen Sie einen Schaltflächenstil und ein Layout, das das Banner unterstützt, statt es zu dominieren. Wenn Sie einen Full-block-Link-Stil verwenden, werden Links innerhalb der Zwischenüberschrift entfernt; diese Option eignet sich daher am besten, wenn das gesamte Banner als ein klares Ziel wirken soll.

Betrachten Sie das Banner als kurze Werbehilfe, nicht als zweites Navigationssystem. Wenn Sie eine starke Botschaft und eine Schaltfläche hinzufügen, halten Sie die umliegende Menüstruktur besonders klar.

Banner-Vordergrundmedien

Diese Gruppe fügt ein Bild oben auf dem Inhaltsbereich des Banners hinzu, getrennt vom Hintergrund. Sie ist nützlich für Logos, freigestellte Produktabbildungen oder kleine unterstützende Grafiken.

Passen Sie den Bildstil und die maximale Breite an, damit die Medien die Botschaft unterstützen, ohne sie zu überlagern. Vordergrundmedien in voller Breite können funktionieren, benötigen aber im Navigationskontext besondere Sorgfalt, da sie das Dropdown schnell dominieren können.

Wenn Sie den Medien einen Link hinzufügen, stellen Sie sicher, dass er nicht mit der Hauptschaltfläche oder dem Full-block-Linkverhalten des Banners konkurriert.

Banner-Farben

Diese Einstellungen überschreiben nur für diesen Block die übergeordneten Banner-Farboptionen. Verwenden Sie sie, wenn dieses Mega menu ein eigenes Kampagnen-Design benötigt oder wenn Ihre gewählten Medien stärkere Kontrastunterstützung brauchen.

Overlay-Einstellungen sind oft der beste Ausgangspunkt, da ein besseres Overlay die Lesbarkeit verbessern kann, ohne dass Sie jedes Textelement neu einfärben müssen. Weitere Hinweise finden Sie unter Banner-Farben.

Standard-Block-Einstellungen

Sichtbarkeitseinstellungen

Verwenden Sie die Sichtbarkeitssteuerungen, um diesen Block auf Desktop, Mobilgeräten oder auf beiden anzuzeigen. Das ist besonders hilfreich, wenn Sie unterschiedliche Navigationsmuster für verschiedene Bildschirmgrößen erstellen.

Da mobile Geräte Menüstile in einer Oberfläche zusammenführen, stellen Sie sicher, dass gerätespezifische Sichtbarkeitsoptionen den Kundinnen und Kunden weiterhin einen vollständigen und verständlichen Satz von Navigationspfaden bieten. Einzelheiten zur Einrichtung im Editor finden Sie in der Shopify-Dokumentation zum Theme-Editor. Weitere Details finden Sie in den Sichtbarkeitseinstellungen.

Nutzungshinweise

1. Behalten Sie vertraute Bezeichnungen bei. Verwenden Sie kurze, klare Titel auf oberster Ebene, damit Kundinnen und Kunden vorhersehen können, welche Art von Links jedes Dropdown enthält.
2. Prüfen Sie beide Ansichten. Überprüfen Sie die Ergebnisse auf Desktop und Mobilgeräten, nachdem Sie Layout, Ausrichtung, Sichtbarkeit oder Medien geändert haben, da sich jedes Verhalten unterscheiden kann.
3. Verwenden Sie das Fallback-Styling bewusst. Leere oder Standardfarben bewahren in der Regel das umgebende Design, während explizite Farben, Verläufe oder Medien den Block eigenständiger wirken lassen.
4. Sichern Sie die Lesbarkeit. Wenn Sie Bild- oder Video-Hintergründe verwenden, passen Sie Overlay, Farben und Textlänge an, damit Links und Handlungsaufforderungen leicht zu überblicken bleiben.
5. Begrenzen Sie konkurrierende Klicks. Wenn das Banner eine Schaltfläche, verlinkte Medien oder ein Full-block-Linking enthält, stellen Sie sicher, dass es dennoch eine eindeutige primäre Aktion gibt.