Header

Übersicht

Der Header beschreibt den inneren Teil zwischen Top Bar und Navigation und lässt sich durch unterschiedliche Einstellungen einfach und schnell umgestalten.

Grundeinstellungen

Style für Tablet und Desktop

Gibt dir die Möglichkeit den Header auf Tablets und Desktops in unterschiedlichen Theme Styles darzustellen.

Variante 1

1. Logo linksbündig

2. Navigation optional mittig

3. Icons rechtsbündig

Variante 2

1. Suche linksbündig

2. Logo mittig

3. Icons rechtsbündig

Variante 3

1. Logo linksbündig

2. Suche mittig

3. Icons rechtsbündig

Style für Smartphones

Gibt dir die Möglichkeit den Header auf Smartphones in unterschiedlichen Theme Styles darzustellen.

Variante 1

1. Logo linksbündig

2. Icons rechtsbündig

Variante 2

1. Menü linksbündig

2. Logo linksbündig

3. Icons rechtsbündig

Variante 3

1. Menü & Merkzettel linksbündig

2. Logo mittig

3. Account & Warenkorb rechtsbündig

4. Suche unterhalb

Volle Breite

Ja Nutzt die volle Breite des Headers. So wird der Inhalt des Headers immer auf die volle Bildschirmbreite gestreckt.

Nein Die Breite des Header Inhalts wird automatisch auf die von dir konfigurierte Containerbreite begrenzt.

Sticky Header

Immer Der Header bewegt sich beim Scrollen immer mit.

Scroll Up Der Header bewegt sich nur beim Scroll nach oben mit.

Nie Der Header bleibt statisch an seinem Platz.

Layout der Suche

Overlay Beim sog. "Overlay" ist die Suche für den Nutzer nicht direkt ersichtlich. Dies sorgt für einen aufgeräumten, minimalistischen Header. Stattdessen wird ein Lupen Icon angezeigt. Klickt der Besucher darauf, öffnet sich das Overlay, welches die eigentliche Suchleiste enthält.

Standard Mit dieser Option wird die Suchleiste direkt im Header angezeigt.

Account Menü

Dropdown Das Account Menü wird eingebunden, sobald sich ein Besucher einloggt. Mit Klick auf die Account Initialen öffnet sich das Menü als Dropdown. Dies gibt dem Nutzer zusätzliche Informationen über den aktuell angemeldeten Benutzer. Bspw. werden Name, Firma, E-Mail Adresse und der Link zum Konto im Menü angezeigt. Gerade im B2B Sektor ist dies häufig verbreitet, wenn sich mehrere Nutzer ein Konto teilen.

Ausblenden Es wird kein Account Menü im Shop eingebunden. Mit Klick auf die Initialen landet der Besucher direkt in seinem Konto.

Beschreibung der Aktions-Buttons

Unterhalb Ist diese Option ausgewählt wird die Beschreibung der einzelnen Aktions-Buttons unterhalb der Icons ausgegeben. Gerade bei älteren Zielgruppen kann dies die Benutzerfreundlichkeit deines Shops verbessern.

Keine Keine Beschreibung wird angezeigt.

Höhe für Tablet und Desktop (in px)

Mit diesem Feld kannst du die Höhe des Headers für Tablet und Desktop festlegen. Je höher der Wert, desto größer der Header.

---

Die minimale Höhe des Headers richtet sich immer nach der Größe des Inhalts innerhalb des Headers aus. Hast du bspw. von Haus aus ein hohes Logo, ist die minimale Höhe des Header immer so groß, dass auch dein Logo im Header Platz findet und nicht gequetscht wird.

Höhe für Smartphones (in px)

Mit diesem Feld kannst du die Höhe des Headers für Smartphones festlegen. Je höher der Wert, desto größer auch der Header auf mobilen Endgeräten.

---

Die minimale Höhe des Headers richtet sich immer nach der Größe des Inhalts innerhalb des Headers aus. Hast du bspw. von Haus aus ein hohes Logo, ist die minimale Höhe des Header immer so groß, dass auch dein Logo im Header Platz findet und nicht gequetscht wird.

Größe des Logos für Tablet und Desktop (in px)

Hiermit lässt sich die Größe deines Logos für Tablet und Desktop definieren. Je größer der Wert, desto größer auch dein Logo.

Größe des Logos für Smartphones (in px)

Hiermit lässt sich die Größe deines Logos für Smartphones definieren. Je größer der Wert, desto größer auch dein Logo auf mobilen Endgeräten.

Typografie

Schriftgröße für die Beschreibung der Aktions-Buttons (in px)

Lege die Schriftgröße für die Beschreibung der Aktions-Buttons fest.

Schriftstärke für die Beschreibung der Aktions-Buttons

Definiert die Schriftstärke für die Beschreibung der Aktions-Buttons. 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

Farben

Hintergrund

Hiermit kannst du die Hintergrundfarbe des Headers bestimmen.

Rahmenfarbe

Mit dieser Einstellung kannst du die untere Rahmenfarbe des Headers festlegen. So kannst du bspw. mit einer weißen Hintergrundfarbe und der $sw-border-color als Rahmenfarbe eine dezente Abgrenzung von Header und Navigation schaffen.

Solltest du keine Rahmenfarbe verwenden wollen, kannst du hierfür diesselbe Farbe wie für den Hintergrund wählen und es entsteht keine sichtbare Trennlinie mehr.

Icon Farbe

Diese Option bietet dir die Möglichkeit die Farbe der Icons im Header festzulegen.

Beschreibung der Aktions-Buttons

Hiermit kannst du die Farbe für die Beschreibung der Aktions-Buttons definieren.

Sucheleiste Hintergrund

Sofern du in der vorherigen Konfiguration "Layout der Suche" den Wert "Standard" wählst, hast du hier die Möglichkeit die Hintergrundfarbe der Suchleiste anzupassen.

Badge Hintergrund

Hiermit kannst du die Hintergrundfarbe der Badges im Header bestimmen.

---

Sowohl mit dem Merkzettel, als auch mit dem Warenkorb, hat der Kunde die Möglichkeit Produkte zu merken bzw. in den Warenkorb zu legen. Sobald dies erfolgt ist, erscheint ein kleines sog. "Badge" am rechten oberen Rand des Icons. Dieses Badge beinhaltet die Anzahl der Artikel auf dem Merkzettel bzw. im Warenkorb und lässt sich mit dieser Einstellung konfigurieren.

Badge Schriftfarbe

Hiermit kannst du die Schriftfarbe der Badges im Header bestimmen.

---

Sowohl mit dem Merkzettel, als auch mit dem Warenkorb, hat der Kunde die Möglichkeit Produkte zu merken bzw. in den Warenkorb zu legen. Sobald dies erfolgt ist, erscheint ein kleines sog. "Badge" am rechten oberen Rand des Icons. Dieses Badge beinhaltet die Anzahl der Artikel auf dem Merkzettel bzw. im Warenkorb und lässt sich mit dieser Einstellung konfigurieren.