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
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.
Farben für die Navigation innerhalb des Headers
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.
Farben für die Navigation unterhalb des Headers
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.
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.
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.
Zuletzt aktualisiert
War das hilfreich?