Navigation

Übersicht

Die Navigation ist das Hauptnavigationselement in deinem Shop. Den Inhalt bzw. die einzelnen Links pflegst du über das Kategorie Modul von Shopware. Anschließend definierst du den Einstiegspunkt der Hauptnavigation in den Grundeinstellungen deines Verkaufskanals.

Grundeinstellungen

Position

Innerhalb des Headers (Voraussetzung: Header Style "Variante 1") Mit dieser Einstellung lässt sich die Navigation innerhalb deines Headers darstellen. Vergewissere dich jedoch, dass du den Header Style "Variante 1" ausgewählt hast. Andernfalls wird die Navigation automatisch unterhalb deines Headers eingebunden. Je schmaler der Bildschirm eines Endgeräts wird, desto weniger Platz entsteht innerhalb des Headers für die Navigation. Bevor die Navigation abgeschnitten wird, springt sie bei kritischer Bildschirmbreite automatisch unter den Headers.

Unterhalb des Headers Die Navigation wird unterhalb deines Headers mittels einer neuen Zeile integriert.

Ausrichtung

Linksbündig Die einzelnen Links innerhalb deiner Navigation werden linksbündig ausgerichtet.

Zentriert Die einzelnen Links innerhalb deiner Navigation werden zentriert.

Home Link

Der sog. "Home Link" ist ein Navigations-Element, der einen Besucher per Klick automatisch auf die Startseite führt. Gerade bei Shops mit wenigen Kategorien, kann dieser häufig Sinn machen, um die Navigation mit einem weiteren sinnigen Link aufzufüllen.

Anzeigen Der Home Link wird integriert.

Ausblenden Der Home Link wird deaktiviert.

Hover Effekt Style

Hier kannst du dich zwischen unterschiedlichen Hover Effekten für deine Links innerhalb der Navigation entscheiden.

Effekt 1:

Effekt 2:

Hervorhebungen

Wähle eine oder mehrere Hauptkategorien, die du farblich hervorheben möchtest. Die Farbe kannst du in den Abschnitten weiter unten je nach Position deiner Navigation konfigurieren.

Abstände

Höhe (in px)

Definiert die Höhe der Navigationsleiste. Je größer der Wert, desto höher die Navigation. Je kleiner der Wert, desto schmaler.

Abstand zwischen den Links (in px)

Mit dieser Einstellung kannst du den Zwischenabstand deiner Links innerhalb der Navigation anpassen.

Hover Effekt Versatz (in px) - Innerhalb des Headers

Hiermit kannst du den Versatz des zuvor konfigurierten Hover Effekts für die Navigation innerhalb des Headers festlegen. Je höher der Wert, desto näher rückt der Effekt an die Schrift.

Beachte, dass die Navigation innerhalb des Headers für kleinere Bildschirme automatisch auf eine Darstellung unterhalb des Headers umbricht, sofern es an Platz innerhalb des Headers mangelt. Stelle daher sicher, dass du den Hover Effekt Versatz ebenfalls für die Navigation unterhalb des Headers konfigurierst.

Hover Effekt Versatz (in px) - Unterhalb des Headers

Hiermit kannst du den Versatz des zuvor konfigurierten Hover Effekts für die Navigation unterhalb des Headers festlegen. Je höher der Wert, desto näher rückt der Effekt an die Schrift.

Typografie

Schriftgröße (in px)

Lege die Schriftgröße der Links innerhalb der Navigation fest.

Schriftstärke

Definiere die Schriftstärke der Links innerhalb der Navigation. Je nach Schriftart stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin 200 = Extra Light 300 = Light 400 = Normal 500 = Medium 600 = Semi Bold 700 = Bold 800 = Extra Bold 900 = Black

Großbuchstaben

Ja Schreibt deine Links innerhalb der Navigation automatisch in Großbuchstaben. Somit musst du deine Kategorien nicht in Großbuchstaben verfassen.

Nein Verwendet die Normalschreibweise, wie die Kategorien angelegt wurden.

Zeichenabstand (in px)

Passe den Zeichenabstand deiner Links innerhalb der Navigation an. Je größer der Wert, desto mehr Platz entsteht zwischen den einzelnen Zeichen.

Sofern du dich für die Position deiner Navigation innerhalb des Headers entschieden hast, steht dir an dieser Stelle eine gesonderte Farbkonfiguration für deine Navigation zur Verfügung. Solltest du deine Navigation unterhalb des Headers konfiguriert haben, hat diese Farbkonfiguration keinen Einfluss mehr.

Link

Lege die Farbe deiner Links innerhalb der Navigation fest. Hierbei wird automatisch die Variable für die Link Farbe verwendet.

Aktiver Link

Lege die Farbe für den aktiven Link innerhalb deiner Navigation fest. Ein Link ist aktiv, sobald die Kategorie selbst bzw. eine Unterkategorie oder ein Produkt innerhalb der Kategorie geöffnet wurde. Hierbei wird automatisch die Variable für die Link Farbe verwendet.

Hover Effekt

Lege die Farbe für den oben konfigurierten Hover Effekt Style fest. Standardmäßig wird hierbei deine Primärfarbe über eine Variable verwendet.

Hervorhebung

Farbe für hervorgehobene Hauptkategorien.

Mit dieser Konfiguration kannst du die Farben deiner Navigation unterhalb des Headers anpassen. Diese ist ebenfalls für die Konfiguration der Position innerhalb des Headers relevant. Gerade bei schmaleren Bildschirmen bricht die Navigation automatisch um und wird unterhalb des Headers dargestellt.

Hintergrund

Definiere eine Hintergrundfarbe für die gesamte Navigationsleiste.

Rahmenfarbe

Hinterlege eine Farbe für den Rahmen unterhalb der Navigationsleiste. Der Rahmen dient hierbei als visuelle Abtrennung des Headers zum Seiteninhalt, sobald man auf einer Seite scrollt. Standardmäßig wird an dieser Stelle deine Rahmenfarbe über eine Variable eingebunden.