Hauptmenü

Ausgewählte Links

1. Company XYZ-Dokumentation zum Main menu-Block
2. Shopify-Dokumentation zu Abschnitten und Blöcken
3. Company XYZ-Dokumentation zu den Banner-Farbeinstellungen
4. Company XYZ-Dokumentation zu den Sichtbarkeitseinstellungen
5. Company XYZ-Dokumentation zur Verwendung von Videos
6. Company XYZ-Dokumentation zu Symbolen

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Verwenden Sie diesen Block, um ein standardmäßiges Navigationsmenü mit automatischen Dropdowns anzuzeigen, wenn Ihr ausgewähltes Menü verschachtelte Links enthält. Sie können außerdem ein optionales Banner und eine Features-Bar hinzufügen, wodurch dieser Block nützlich ist, um Navigation mit leichter Promotion oder Markenbotschaften zu kombinieren. Siehe Company XYZ-Dokumentation zum Block Hauptmenü.

Für einen umfassenderen Überblick über die Theme-Struktur siehe Shopify-Dokumentation zu Abschnitten und Blöcken

Auf Mobilgeräten werden alle Menu- und Mega menu-Blöcke zu einer einzigen Navigationsoberfläche zusammengeführt. Prüfen Sie sie gemeinsam, damit das mobile Menü klar und leicht zu bedienen bleibt.

Grundeinstellungen

Wählen Sie zuerst das Menü aus, das dieser Block anzeigen soll. Entscheiden Sie dann, ob das optionale Banner oder die Features-Bar nützlichen Kontext hinzufügt, etwa eine Promotion, eine saisonale Ankündigung oder einige kurze Service-Highlights.

Verwenden Sie diese Extras sorgfältig. Die Navigation sollte weiterhin in erster Linie wie Navigation wirken. Fügen Sie also nicht so viele unterstützende Inhalte hinzu, dass das Auffinden von Links schwieriger wird.

Ausrichtungseinstellungen

Diese Einstellungen verfeinern, wo das Menü innerhalb des Blocks auf dem Desktop sitzt. Sie sind in der Regel am wichtigsten, wenn der Block zusätzlichen Platz füllt oder ein breiteres Desktop-Layout verwendet.

Wenn Ausrichtungsänderungen nur subtil wirken, prüfen Sie zuerst Ihre Layout-Auswahl. Das Layout hat in der Regel die größte Wirkung, während die Ausrichtung eher wie eine abschließende Anpassung wirkt.

Layout-Einstellungen

Verwenden Sie diese Einstellungen, um zu steuern, wie viel horizontalen Platz das Menü auf dem Desktop verwendet und wie es über die Zeile positioniert ist. Links-, Zentrierungs- und Rechts-Layouts eignen sich für traditionellere Header-Setups, während ein Full-width-Layout die Navigation in breiteren Headern ausgewogener wirken lassen kann.

Verfügbaren Platz ausfüllen ist nützlich, wenn sich der Block in den verbleibenden Raum ausdehnen soll, statt kompakt zu bleiben. Da dies nur auf dem Desktop gilt, sehen Sie sich das Ergebnis immer auf größeren Bildschirmgrößen in der Vorschau an.

Tipp

Wenn der Header unausgewogen wirkt, versuchen Sie, zuerst das Layout anzupassen, bevor Sie die Ausrichtung ändern. Ein breiteres Layout löst Abstandsprobleme oft sauberer.

Banner-Hintergrund

Diese Einstellungen steuern die Medien hinter dem optionalen Banner. Sie können ein Bild- oder Video-Hintergrundmedium verwenden und separate mobile Medien festlegen, wenn das Desktop-Asset auf kleineren Bildschirmen nicht gut beschnitten wird.

Wählen Sie Hintergrundmedien, die die Botschaft unterstützen, ohne sie zu überlagern. Einfache Bilder und kurze, wenig ablenkende Videos funktionieren in Navigationsbereichen in der Regel am besten.

Achtung

Unruhige oder kontrastreiche Hintergrundmedien können menu-bezogene Inhalte schwerer erfassbar machen. Wenn die Lesbarkeit nachlässt, vereinfachen Sie das Medium oder verstärken Sie das Overlay und den Textkontrast.

Hinweise zur Videoeinrichtung finden Sie unter best practices for video files.

Banner-Vordergrund

Diese Einstellungen steuern die Inhalte, die über dem Banner-Hintergrund liegen. Leere Felder bleiben ausgeblendet, sodass Sie das Banner minimal halten oder eine vollständigere Werbebotschaft aufbauen können.

Verwenden Sie das Symbol, die Bildunterschrift, die Überschrift und die Unterüberschrift, um eine klare Inhalts-Hierarchie zu schaffen. Die Symbolfelder akzeptieren Emojis oder benannte Symbole, was bei sparsamem und konsistentem Einsatz hilfreich für die Hervorhebung sein kann. Tipps zur Symbolformatierung finden Sie in der icon guidance des Themes.

Mit den Schaltflächeneinstellungen können Sie eine direkte Aktion hinzufügen und deren Stil, Symbolposition und mobile Breite steuern. Wenn Sie einen Full-block-Link-Stil aktivieren, werden Links innerhalb des Unterüberschrift-Texts entfernt. Diese Option eignet sich daher am besten, wenn das gesamte Banner Besucher zu einem Ziel führen soll.

Wählen Sie für das Banner ein primäres Interaktionsmuster. Wenn das gesamte Banner anklickbar ist, vermeiden Sie zusätzliche konkurrierende Links oder allzu komplexe Botschaften.

Banner-Vordergrundmedien

Fügen Sie ein Vordergrundbild hinzu, wenn das Banner ein Logo, ein Badge, eine Produktdarstellung oder eine andere Grafik benötigt, die über dem Hintergrund liegen soll. Das funktioniert besonders gut, wenn der Hintergrund eher atmosphärisch ist und das Vordergrundbild den eigentlichen Fokus trägt.

Verwenden Sie die Einstellung für die Bildbreite, um die Grafik proportional zum Text zu halten. Eine Bilddarstellung in voller Breite kann für auffällige Grafiken funktionieren, aber kleinere Breiten sind in der Regel besser für Logos und unterstützende Visuals.

Wenn Sie die Vordergrundmedien anklickbar machen, halten Sie das Ziel konsistent mit dem restlichen Banner, um eine verwirrende Mischung aus Link-Zielen zu vermeiden.

Bannerfarben

Diese Einstellungen überschreiben die allgemeinen Banner-Farboptionen nur für diesen Block. Verwenden Sie sie, wenn dieses Banner einen anderen Kontrast, stärkere Markenwirkung oder mehr Kontrolle darüber benötigt, wie der Text auf Medien liegt. Siehe Company XYZ-Dokumentation zu Banner-Farbeinstellungen

Overlay-Steuerelemente sind besonders nützlich für die Lesbarkeit. Erhöhen Sie das Overlay nur so weit wie nötig, um den Text zu unterstützen, da starke Overlays das Banner flach oder dicht wirken lassen können.

Standard-Block-Einstellungen

Sichtbarkeitseinstellungen

Verwenden Sie Sichtbarkeits-Steuerelemente, um diesen Block je nach Gerätegröße ein- oder auszublenden. Das ist hilfreich, wenn Sie auf Desktop und Mobilgeräten eine andere Navigationsanordnung wünschen. Siehe Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen

Da die mobile Navigation menübasierte Blöcke zu einer Oberfläche zusammenführt, prüfen Sie nach Änderungen an der Sichtbarkeit immer das vollständige mobile Ergebnis.

Editor-Einstellungen

Verwenden Sie den Editor-Titel, um den Block in der Editor-Seitenleiste umzubenennen. Das ist praktisch, wenn Sie mehr als einen menübezogenen Block haben und beim Bearbeiten klarere Bezeichnungen wünschen.

Nutzungshinweise

1. Halten Sie Links auf oberster Ebene fokussiert. Verwenden Sie kurze Menübezeichnungen und fügen Sie nur Dropdown-Ebenen hinzu, die Besucher wirklich schneller zum Inhalt führen.
2. Prüfen Sie Mobilgeräte als Ganzes. Da menübasierte Blöcke auf Mobilgeräten zusammengeführt werden, beurteilen Sie das endgültige mobile Navigationserlebnis und nicht nur diesen Block.
3. Setzen Sie das Banner sparsam ein. Fügen Sie Werbeinhalte nur hinzu, wenn sie die Entdeckung von Inhalten unterstützen, ohne mit der Hauptnavigation zu konkurrieren.
4. Priorisieren Sie die Lesbarkeit. Wenn Sie Bild- oder Video-Hintergründe verwenden, passen Sie Farben und Overlays so lange an, bis Text und Aktionen leicht zu erfassen bleiben.
5. Passen Sie das Layout an den Header-Raum an. Verwenden Sie breitere oder platzbasierte Layouts, wenn das Menü einen breiten Header ausgleichen soll, und kompaktere Layouts, wenn andere Header-Elemente Priorität haben müssen.
6. Prüfen Sie beide Haltepunkte. Desktop- und Mobile-Steuerelemente können Layout, Ausrichtung und Sichtbarkeit von Medien unterschiedlich beeinflussen. Sehen Sie sich daher vor der Veröffentlichung beide Größen in der Vorschau an.
7. Verwenden Sie Medienüberschreibungen bewusst. Halten Sie die Auswahl für Desktop- und Mobil-Hintergründe an den gewünschten Inhalt und das gewünschte Beschneidungsverhalten angepasst, und erwarten Sie, dass separate Medien stärker unabhängig vom restlichen Header wirken.