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
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
Ja Der Header bewegt sich beim Scrollen mit.
Nein 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
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.
Last updated
