Hauptnavigation

Ausgewählte Links

1. Company XYZ-Dokumentation zum Hamburger-Menü-Block
2. Company XYZ-Dokumentation zum Logo-Block
3. Company XYZ-Dokumentation zum Main menu-Block
4. Company XYZ-Dokumentation zum Mega-Menü-Block
5. Company XYZ-Dokumentation zum Search-Block
6. Company XYZ-Dokumentation zum Account icon-Block
7. Company XYZ-Dokumentation zum Cart-Block
8. Company XYZ-Dokumentation zum Button-Block
9. Company XYZ-Dokumentation zum Localization selectors-Block
10. Company XYZ-Dokumentation zum Icon with text-Block
11. Company XYZ-Dokumentation zum Rich text-Block
12. Company XYZ-Dokumentation zum Social media icons-Block
13. Company XYZ-Dokumentation zu den Einstellungen für Abschnittshintergründe
14. Company XYZ-Dokumentation zu den Einstellungen für den Abschnitts-Innenabstand
15. Company XYZ-Dokumentation zu den Trennlinien-Einstellungen
16. Company XYZ-Dokumentation zu den Sichtbarkeitseinstellungen
17. Company XYZ-Dokumentation zu den Einstellungen für Layout-Breiten
18. Shopify-Dokumentation zu Abschnitten und Blöcken
19. Shopify-Dokumentation zum Anpassen von Abschnitten
20. Shopify-Dokumentation zum Theme-Editor

Hilfreiche Videos

Learn With Shopify-Video: Best Practices für Shopify-Navigationsmenüs

Learn With Shopify-Video: Best Practices für Shopify-Navigationsmenüs

Learn With Shopify-Video: Das Shopify-Navigationsmenü in 50 Sekunden erklärt

Learn With Shopify-Video: Das Shopify-Navigationsmenü in 50 Sekunden erklärt

Shopify Academy-Video: Ihren Store anpassen

Shopify Academy-Video: Ihren Store anpassen

Bauen Sie Ihre primäre Navigation auf, indem Sie Menü-, Branding-, Such- und Utility-Blöcke in der Reihenfolge kombinieren, in der sie angezeigt werden sollen. Die Blockreihenfolge bestimmt das gesamte Layout, während einzelne Blöcke auf Desktop und Mobilgerät dennoch unterschiedlich positioniert werden können, um eine präzisere Steuerung zu ermöglichen. Einen breiteren Überblick darüber, wie Theme-Abschnitte und -Blöcke funktionieren, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Diese Einstellungen wirken sich darauf aus, wie Besucher mit der Navigation im gesamten Abschnitt interagieren.

Menüinteraktion

Wählen Sie aus, ob Untermenüs per Klick oder per Hover geöffnet werden. Klick ist in der Regel die sicherere Option, wenn Sie eine bewusstere Interaktion wünschen, während Hover auf geräte mit Zeigerbedienung schneller wirken kann.

Wenn Ihre Navigation tiefere Menüstrukturen oder werbliche Dropdown-Inhalte enthält, lässt sich das Öffnen per Klick in der Regel leichter steuern und ist weniger anfällig für unbeabsichtigte Menüänderungen.

Standardzustand des mobilen Menüs

Sie können das erste Element des mobilen Menüs standardmäßig geöffnet anzeigen. Das funktioniert gut, wenn Ihr erstes Element der obersten Ebene zu einer prioritären Kategorie oder Kollektion führt, kann aber unübersichtlich wirken, wenn dieses erste Element zu viele Links enthält.

Farbeinstellungen

Diese Einstellungen überschreiben umfassendere Theme-Farbauswahlen für Navigationstext und Symbole innerhalb dieses Abschnitts. Sie sind besonders nützlich, wenn die Navigation auf einem benutzerdefinierten Hintergrund liegt oder einen stärkeren Kontrast benötigt, als Ihre Standardgestaltung bietet.

Tipp

Prüfen Sie nach dem Ändern der Navigationsfarben sowohl den Desktop- als auch den Mobilzustand, um sicherzustellen, dass Links, Symbole und Dropdown-Auslöser gut lesbar bleiben.

Unterstützte Blocktypen

1. Kontosymbol
2. Button
3. Warenkorb
4. Hamburger-Menü
5. Icon mit Text
6. Lokalisierungsselektoren
7. Logo
8. Hauptmenü
9. Mega-Menü
10. Suche
11. Rich text
12. Social-Media-Symbole

Blocklayout und gemeinsames Blockverhalten

Die meisten Blöcke in diesem Abschnitt verwenden dieselbe Platzierungslogik. Ihre Layout-Einstellung bestimmt, ob sie in der linken, mittleren oder rechten Gruppe der Hauptzeile sitzen, und die Blockreihenfolge steuert die Reihenfolge innerhalb jeder Gruppe. Einige Blöcke können außerdem in eine separate Zeile mit voller Breite verschoben werden.

Ausrichtungseinstellungen sind in der Regel nachrangig. Sie sind vor allem dann wichtig, wenn ein Block verfügbaren Platz ausfüllt oder in einer Zeile mit voller Breite sitzt.

Desktop- und Mobil-Layout

Bei vielen Blöcken können Sie unterschiedliche Positionen für Desktop und Mobilgerät wählen. Das ist nützlich, wenn Sie einen umfangreicheren Desktop-Header wünschen, aber ein fokussierteres Mobil-Layout, das Menü-Umschalter, Logo, Suche und Warenkorb priorisiert.

Verfügbaren Platz ausfüllen

Einige Blöcke können sich dehnen, um den verbleibenden Platz in der Desktop-Zeile auszufüllen. Das funktioniert am besten bei Blöcken wie dem Logo, Menüs oder der Suche, wenn sie das Layout verankern und andere Aktionen nach außen schieben sollen.

Blocksichtbarkeit

Viele Blöcke enthalten eigene Sichtbarkeitssteuerungen. Verwenden Sie diese, wenn ein Utility je nach Gerät anders erscheinen soll, ohne den gesamten Abschnitt zu duplizieren.

Wichtige Blocktypen

Hamburger-Menü

Der Hamburger menu block ist der mobile Auslöser für die Navigation. Er ist erforderlich, damit die Hauptnavigation auf Mobilgeräten funktioniert, und sollte daher als wesentlich und nicht als optional behandelt werden.

Platzieren Sie ihn auf Mobilgeräten an einer klaren, vorhersehbaren Stelle, normalerweise links oder neben dem Logo. Verstecken Sie ihn auf Mobilgeräten nicht, es sei denn, Sie bieten Besuchern eine andere klare Möglichkeit, die Navigation zu öffnen.

Wenn Sie den Hamburger-Menü-Block auf Mobilgeräten entfernen oder ausblenden, haben Besucher möglicherweise keine nutzbare Möglichkeit mehr, die Hauptnavigation zu öffnen.

Logo

Der Logo block zeigt Ihr Markenlogo an und greift auf Ihren Shop-Namen zurück, wenn kein Logo-Bild festgelegt ist. Separate Breitensteuerungen für Desktop und Mobilgerät helfen Ihnen, die Marke sichtbar zu halten, ohne kleinere Bildschirme zu überladen.

Ein kompaktes mobiles Logo führt normalerweise zum saubersten Ergebnis. Wenn Sie das Logo zu breit werden lassen, kann es wichtigere Aktionen aus dem sichtbaren Bereich verdrängen.

Hauptmenü und Mega-Menü

Verwenden Sie den Hauptmenü für Standard-Dropdown-Navigation und den Mega menu block für ein größeres, redaktionelleres Flyout. Auf Mobilgeräten werden alle Main-menu- und Mega-menu-Blöcke zu einer einzigen Navigationsoberfläche zusammengeführt.

Beide Blocktypen können ein Banner und eine Features-Leiste enthalten, wodurch sie sich sowohl für Merchandising als auch für das Stöbern eignen. Mega menu bietet außerdem eine stärkere Steuerung für strukturierte Navigation, einschließlich optionaler Links auf Elternebene für „Alle anzeigen“ innerhalb von Untermenüs.

Banner und Werbeinhalte

Menü- und Mega-Menü-Blöcke können eigene Hintergrundmedien, Vordergrundinhalte, eine Schaltfläche und ein unterstützendes Bild enthalten. Verwenden Sie dies für saisonale Kampagnen, vorgestellte Kollektionen oder wichtige Kundenpfade, die zusätzliche Hervorhebung verdienen.

Achtung

Werbeinhalte können das Entdecken verbessern, aber zu viel davon innerhalb der Navigation kann das Stöbern langsamer und weniger klar wirken lassen.

Mobilverhalten

Da mehrere menübasierte Blöcke zu einer mobilen Oberfläche zusammengeführt werden, sollten Sie Desktop und Mobilgerät als zusammenhängende, aber unterschiedliche Erlebnisse behandeln. Halten Sie Kategoriebezeichnungen klar und prüfen Sie das kombinierte mobile Ergebnis, wenn Sie die Desktop-Navigation auf mehrere Menüblöcke aufteilen.

Suche

Der Suche fügt der Navigation die Suche über den gesamten Shop hinzu. Sie können ihn als reinen Icon-Auslöser oder als kleines Feld anzeigen, mit separatem Verhalten auf Mobilgeräten, um Platz zu sparen.

Wenn predictive results aktiviert sind, können Sie außerdem Standard- und sekundäre Ergebnis-Menüs sowie optionale Werbeinhalte festlegen. Dadurch wird die Suche nützlicher für das Entdecken, nicht nur für direkte Suchanfragen.

Hinweis

Predictive results gelten nur, wenn die Predictive Search aktiv ist, und der Block weist darauf hin, dass für Echtzeit-Ergebnisse zusätzliche Einrichtung erforderlich ist.

Utility- und Aktionsblöcke

Diese Blöcke fügen rund um Ihre zentrale Navigation gängige unterstützende Aktionen hinzu.

1. Kontosymbol für Anmeldung und Kontozugriff
2. Warenkorb für den Warenkorbzugriff, mit optionalen Farbüberschreibungen
3. Schaltfläche für eine hervorgehobene Aktion wie eine Promotion oder einen speziellen Einstiegspunkt
4. Lokalisierungs-Auswahlfelder für Länder-, Währungs- und Sprachwechsel

Für kompakte Header funktionieren kleinere oder reine Icon-Steuerelemente in der Regel am besten. Wenn diese Blöcke mit Menüs und Logos um Platz konkurrieren, verwenden Sie gerätespezifische Layouts oder die Blocksichtbarkeit, um das Erlebnis auf kleineren Bildschirmen zu vereinfachen.

Informations- und Social-Blöcke

Diese Blöcke sind hilfreich, wenn die Navigation auch als Utility- oder Nachrichtenleiste dient.

1. Icon mit Text für kurze Verkaufsargumente oder Vertrauenssignale
2. Rich text für kurze formatierte Inhalte
3. Social media icons für Social-Links aus Ihren konfigurierten Konten

Setzen Sie diese in der primären Navigation sparsam ein. Sie funktionieren am besten in einer sekundären Zeile oder einem Layout mit voller Breite, wo sie den Header unterstützen, ohne mit den zentralen Navigationspfaden zu konkurrieren.

Standard-Abschnittseinstellungen

Abschnittshintergrund-Einstellungen

Verwenden Sie die Abschnittshintergrund-Einstellungen, um einen Farbverlauf, ein Bild oder ein Video hinter der Navigation hinzuzufügen. Diese Einstellungen können einen stärker gebrandeten Header erzeugen, sie können aber auch den wahrgenommenen Abstand und die visuelle Gewichtung des oberen Seitenbereichs verändern.

Overlay-Steuerelemente helfen dabei, Text über Medienhintergründen lesbar zu halten. Wenn Sie unterschiedliche mobile Hintergrundmedien verwenden, prüfen Sie beide Breakpoints sorgfältig, da die Navigation ein stark genutzter Bereich ist. Wenn Sie diese Einstellungen im Editor anpassen, erklärt die Shopify-Dokumentation zum Anpassen von Abschnitten, wie Abschnittseinstellungen im Theme-Editor bearbeitet werden.

Padding-Einstellungen

Verwenden Sie die Padding-Einstellungen, um den Abstand ober- und unterhalb des Navigationsinhalts zu steuern. Kleine Änderungen hier können den Header kompakter oder großzügiger wirken lassen.

Da dieser Abschnitt auf der gesamten Website erscheint, ist moderates Padding in der Regel leichter konsistent zu halten. Das Standard-Padding ist leicht, was ein praktischer Ausgangspunkt ist, sofern Ihr Logo oder Ihre Blockzusammenstellung nicht mehr Platz benötigt.

Trennlinien-Einstellungen

Verwenden Sie die Trennlinien-Einstellungen, um eine obere oder untere Linie zur Navigation hinzuzufügen. Das ist nützlich, wenn Sie eine klarere Abgrenzung zwischen Header und umgebendem Inhalt wünschen, ohne eine vollständige Hintergrundgestaltung zu verwenden.

Wenn die Farbe der Trennlinie transparent bleibt, verwendet der Abschnitt die umfassendere Rahmenfarbeneinstellung. Legen Sie eine benutzerdefinierte Farbe für die Trennlinie nur fest, wenn die Standard-Rahmenfarbe nicht genügend Kontrast bietet.

Sichtbarkeitseinstellungen

Verwenden Sie die Sichtbarkeitseinstellungen, um den gesamten Abschnitt je nach Gerätetyp ein- oder auszublenden. Das ist besonders nützlich, wenn Sie getrennte Header-Layouts für Desktop und Mobilgerät wünschen.

Verwenden Sie Sichtbarkeit auf Blockebene, wenn sich nur einige wenige Elemente ändern sollen. Verwenden Sie Sichtbarkeit auf Abschnittsebene, wenn die gesamte Navigationsstruktur für einen bestimmten Gerätebereich ersetzt werden soll.

Breiten-Einstellungen

Verwenden Sie die Breiten-Einstellungen, um sowohl die Inhaltsbreite als auch die Breite des gesamten Abschnitts-Containers zu steuern. Das ist vor allem dann wichtig, wenn Ihre Navigation Hintergründe, breite Menü-Layouts oder Zeilen mit voller Breite enthält.

Die Inhaltsbreite ist die Hauptsteuerung dafür, wie weit sich Navigationselemente ausbreiten können, während die Abschnittsbreite vor allem dann wichtig ist, wenn der Abschnitt eine eigene Hintergrundgestaltung hat. Der Editor kann Breitenänderungen unterrepräsentieren, prüfen Sie daher den Live-Storefront, bevor Sie abschließen. Einen kurzen Überblick über die verfügbaren Editor-Steuerelemente finden Sie in der Shopify-Dokumentation zum Theme-Editor

Nutzungshinweise

1. Mobilen Zugriff priorisieren. Halten Sie den Hamburger-Menü-Block sichtbar und leicht erreichbar, damit Besucher die Navigation auf kleineren Bildschirmen immer öffnen können.
2. Nach Layout-Gruppen gestalten. Verwenden Sie zuerst die Platzierung der linken, mittleren und rechten Blöcke und verfeinern Sie dann mit Blockreihenfolge und Einstellungen zum Ausfüllen von Platz, statt sich nur auf die Ausrichtung zu verlassen.
3. Menüs gut scannbar halten. Wenn Sie mehrere menübasierte Blöcke verwenden, prüfen Sie das kombinierte mobile Menü, um sicherzustellen, dass Kategorien weiterhin klar und nicht zu stark unterteilt wirken.
4. Werbeinhalte gezielt einsetzen. Fügen Sie Banner, Schaltflächen und Feature-Messaging nur dann hinzu, wenn sie die Navigation unterstützen, statt von ihr abzulenken.
5. Das Live-Ergebnis prüfen. Überprüfen Sie Kontrast, Abstände und Breite im Storefront, nachdem Sie Hintergründe, benutzerdefinierte Farben oder Breitenänderungen hinzugefügt haben.
6. Beide Suchzustände prüfen. Vergleichen Sie den leeren Suchzustand und die Erfahrung mit eingegebenen Suchanfragen, damit Predictive Results, Standardinhalte und Werbeelemente denselben Kundenpfad unterstützen.
7. Getrennte Geräte-Layouts testen. Prüfen Sie Desktop und Mobilgerät nach Änderungen an Blockpositionen, Sichtbarkeit oder Ausrichtung, da sich die beiden Ansichten unterschiedlich verhalten können.
8. Auf Medienüberschreibungen achten. Wenn Sie Hintergrundbilder, Videos oder separate Medien für Desktop und Mobilgerät hinzufügen, bestätigen Sie, dass Zuschnitt, Fallback-Darstellung und Lesbarkeit weiterhin gut funktionieren.