Header

Der Kopfbereich es Shops

Header

Farben

Beispiele:

Logo

Über Logo Position (1) positionierst Du das Logo im Header entweder links, rechts oder in der Mitte. Alle weiteren Elemente des Header wie Suche, Shop-Navigation usw. ordnen sich automatisch an.

Die Logo Größe mobile (2) sowie Logo Größe (3) beschreibt die Größe des Logos in Prozent im Verhältnis zur Höhe mobile (4) bzw. Höhe (5) des Headers. Damit ist sichergestellt, dass das Logo nicht aus dem Header ausbrechen kann - außer Du verwendest Werte über 100% um diesen Effekt absichtlich zu erzielen.

Beispiel: Ist der Header in der Desktop Ansicht 100px hoch und das Logo 40% groß, ergibt sich eine Größe des Logos von 40 Pixel in der Höhe - die Breite ergibt sich proportional.

Höhen & Abstände

Die Höhe (1, 2) des Headers kann für die mobile Darstellung und die Variante für größere Geräte separat eingestellt werden. Zusätzlich können Abstand oben (3, 4) sowie Abstand unten (4,5) gesetzt werden. Dadurch können Darstellungen wie im Beispiel erzeugt werden.

Beispiel:

Abgerundete Ecken

Beispiel:

Rahmen unten

Der gesamte Header kann einen unteren Rahmen erhalten und so stärker vom Content abgetrennt werden.

Schlagschatten

Der gesamte Header kann einen unteren Schlagschatten erhalten und so stärker vom Content abgetrennt werden.

Der Schlagschatten kann unterschiedlich für drei verschiedene Header-Status eingestellt werden. Schlagschatten (1) aktiviert den Schlagschatten für den Header im normalen Zustand. Schlagschatten:hover (2) aktiviert den Schlagschatten nur, wenn die Maus über den Header bewegt wird. Und Schlagschatten:sticky (3) aktiviert den Schatten immer dann, wenn der Nutzer nach unten scrollt und der Header fixiert dargestellt wird. Diese Funktion greift nur, wenn der Header auch als Sticky-Header, wie im folgenden erläutert, dargestellt wird.

Für die Farbe (2, 5, 8) des Schlagschattens eignet sich in der Regel am besten ein teiltransparenter Farbton. In diesem Beispiel ist der Wert in rgba angegeben, welchen Du im Color-Picker über die Alpha-Transparenz auswählen kannst. Der Wert rgba(0,0,0,0.1) ist also ein reines Schwarz mit 10% Sichtbarkeit.

Die Weite (3, 6, 9) ist in Pixel anzugeben und gibt an, wie groß der Schatten in Pixeln ist.

Sticky Header

Das Theme beinhaltet die Funktion Sticky Header, welche den Header beim Herunterscrollen der Seite am oberen Bildschirmrand fixiert. Mit Hilfe der Anzeigebereiche (1) kannst Du festlegen, auf welchen Geräten der fixierte Header genutzt werden soll.

Die Bildschirmfläche (Viewport) ist eine Ressource, die sinnvoll genutzt werden sollte. Man sollte daher nicht aus einem falsch verstandenen Usability-Ansatz davon ausgehen, dass eine Sticky-Navigation automatisch zu einer besseren Usability (Nutzbarkeit) führen. Fixierte Header verbrauchen auf dem mobilen Gerät wertvolle vertikale Bildschirmflächen und bieten dem Benutzer keinen enormen Mehrwert.

Der manuelle Offset (2) Wert definiert den Abstand von Oben, ab wann der Header fixiert werden soll. Lass das Feld leer, wenn der Abstand des Headers zur Oberkante des Browsers automatisch ermittelt werden soll. Der Header wird sticky, sobald der Header durch Scrollen außerhalb des sichtbaren Bereiches gerät - daraufhin wird der Header mit einer Animation erscheinen und fixiert.

Möglichkeit 1: Wert leer lassen zur automatischen Berechnung
Möglichkeit 2: Legt man einen Offset-Wert von 0 fest, wird der Header sofort fixiert - ohne Animation.
Möglichkeit 3: Der Offset-Wert ist immer dann nützlich, wenn das Flyout-Menü oder Dropdown-Menü so viele Einträge beinhalten, dass die Einträge unterhalb des Browserrandes verschwinden. Wird nun für den Offset-Wert ein zusätzlicher Abstand z.B. 600 eingetragen, muss der Nutzer mind. 600 Pixel nach unten scrollen, bis der Header fixiert wird. Dadurch werden die Menüpunkte, die unterhalb des Browser-Falzes verschwunden sind beim Scrollen wieder erreichbar. Der Header wird erst zu einem späteren Scrollabstand fixiert.

Die Auto Hide (3) Funktion sorgt dafür, dass der komplette Header erst wieder sichtbar wird, wenn der Nutzer im Begriff ist nach oben zu Scrollen.

Die Auto Hide Funktion verbessert die Usability, da so auch bei mehrzeiligen Headern oder sehr hohen einzeiligen Headern nicht permanent der Viewport künstlich verkleinert wird.

Die Abweichende Header Höhe:sticky (4) lässt Dich eine zusätzliche (meist geringere) Header Höhe:sticky (5) festlegen. Der Header kann so im Sticky Zustand auf diese abweichende Höhe schrumpfen (oder eben wachsen). Die Einstellung soll insbesondere Layouts mit ausladendem Header die Möglichkeit geben, die Sticky-Funktion nutzerfreundlich einzusetzen ohne zu viele Bereiche mit dem Sticky-Header zu überdecken.

Suche

Je nach Einstellung der Suche (Overlay Suche, Ausklappbare Suche und Standard Suche) haben die Farbfelder eine unterschiedliche Funktion. Erfahren unter den Hilfe-Labels mehr über die jeweilige Funktion der Farbe.

Die grundlegenden Erscheinungs-Einstellungen der Suche findest Du im Tab "Allgemein".

Top Bar

Die grundlegenden Erscheinungs-Einstellungen der Top Bar findest Du im Tab "Allgemein". Dort kannst Du einstellen, ob die Top Bar als solche dargestellt werden soll, oder zu einem Offcanvas-Element umfunktioniert werden soll, siehe Beispiele unten.

Farben

Keine Besonderheiten

Grundeinstellungen

Sprachauswahl Text (3): Stellt die Art der Darstellung der Sprachauswahl dar. Sprachauswahl Flagge (4): Kann die Darstellung der Landesflagge unterbinden. Service-Navigation anzeigen (5): Zeigt die Service-Navigation in der Top Bar an. Die Service-Navigation befindet sich optional zusätzlich unteren Footer. Im Checkout-Footer wird die Service-Navigation immer angezeigt.

Beispiele:

Logo

Logo Größe (1) definiert die Höhe des Logos, welches in der optionalen Offcanvas Top Bar angezeigt wird. Wird die Top Bar als klassische Zeile über dem Header abgebildet, entfällt das Logo.

Beispiel:

Rahmen unten

Mit Hilfe der Option Volle Breite (2) kannst Du die Linie auf die volle Header-Breite strecken. Damit läuft die Linie je nach gewähltem Grundlayout bis an den Browserrand und wird nicht durch die maximale Inhaltsbreite beschränkt.

Farben

Zusätzlich zu den allgemeinen Einstellungen für die Hintergrund- und Vordergrundfarben der einzelnen Elemente kannst Du eine Badge Farbe (1) definieren. Das betrifft das Badge für eingeloggte Benutzer und das Badge für die Anzahl der Artikel auf dem Merkzettel.

Zusätzlich kannst Du den Elementen einen Rahmen (1) hinzufügen und deren Farben mit den Farbfeldern Rahmen (3) und Rahmen:hover (4) konfigurieren.

Beispiel:

Grundeinstellungen

Schriftgröße (1) & Schriftstärke (2) - Insbesondere bei der Darstellung des zweizeiligen Headers werden diese Einstellungen auf die Sprachauswahl, Währungsauswahl und Service-Navigation angewandt. Tooltips (3) & Tooltips Platzierung (4) - Ergänzend zu den Icons können Tooltips positioniert und angezeigt werden, welche die Funktion der Icons bei Mouse-Over unmissverständlich erklären. Badges minimieren (5) - Merkzettel, Account und Warenkorb verfügen über sogenannte Badges. Das sind kleine Labels, welche zB. die Anzahl der Produkte im Merkzettel anzeigen. Diese Labels können zu einem kleinen Punkt minimiert werden und erst bei MouseOver die Anzahl anzeigen. Dadurch wirkt der Bereich im Sinne eines minimal Designs sauberer und ordentlicher.

Beispiel:

Warenkorb

Der Warenkorb kann über eine eigene Farb- und Schriften-Konfiguration (1-6) hervorgehoben werden.

Je nach gewählter Hintergrundfarbe kann es sinnvoll sein, die Badge Farbe (7) der "Anzahl der Produkte im Warenkorb" anzupassen. Die Textfarbe des Badges wird dabei automatisch mit dem optimalen Kontrast in schwarz oder weiß ermittelt.

Zusätzlich kannst Du den Elementen einen Rahmen (8) hinzufügen und deren Farben mit den Farbfeldern Rahmen (9) und Rahmen:hover (10) konfigurieren.

Beispiel:

Grundeinstellungen

Aktiviere oder Deaktiviere den häufig redundanten Home-Link (1) im Menü um Platz zu sparen. Du kannst auch entscheiden, ob dieser einen Aktiv-Status (2) erhalten soll, wenn man die Startseite des Shops besucht.

Über die Ausrichtung (3) kannst Du die Menüpunkte horizontal ausrichten und verteilen. Die Trenner (4) Einstellung unterteilt die einzelnen Menü-Elemente mit einem Trennzeichen.

Wähle aus 13+ Hover Animation (5) die passende Animation für Deinen Shop aus.

Der Scroller (6) sorgt optional dafür, dass Kategorien der Main Navigation nicht umbrechen können - egal wie viele Hauptkategorien Du abbilden möchtest. Auf mobilen Geräte mit Toucheingabe kann horizontal gescrollt werden, auf Desktop-Geräten können mit Hilfe der Pfeile (1, 2) die weiteren Kategorien erreicht werden.

Beispiel:

Die Option Unternavigation Aussehen (7) bietet die Möglichkeit das Flyout-Menü durch ein einfaches Dropdown-Menü auszutauschen.

Weitere Einstellungen zur Dropdown-Navigation können im Abschnitt Header > Main Navigation > Dropdown Navigation gemacht werden.

Beispiel:

Rahmen oben

Wahlweise kann die Main-Navigation vom oberen Header-Bereich durch eine Trennlinie (Border) abgehoben werden.

Mit Hilfe der Einstellung Volle Breite (1) kannst Du die Linie auf die volle Header-Breite strecken. Damit läuft die Linie je nach gewähltem Grundlayout bis an den Browserrand und wird nicht durch die maximale Inhaltsbreite beschränkt.

Beispiel:

Menü Elemente

Über die Option Pfeile (1) kannst Du kleine Pfeile neben den Kategorien darstellen, die angezeigt werden, wenn eine Kategorie Unterkategorien besitzt, siehe Beispiel 1.

Icon bei externen Links (4) (ab Theme Version 2.4.3) zeigt das bekannte "Externer Link" Icon bei Kategorien des Typs "Link" an, wenn dieser durch den Haken "In neuem Tab öffnen" als externer Link eingestellt wurde. Damit wissen Deine Besucher ganz genau, was passiert, wenn sie auf einen solches Link klicken, siehe Beispiel 2.

Den Abstand zwischen den einzelnen Kategorien setzt Du mit Abstand links/rechts (3). Solltest Du sehr viele Kategorien verwenden, reduzieren den Abstand zwischen den Kategorien.

Beispiel 1:

Beispiel 2:

Die Flyout-Navigation ist das Megamenü in Shopware 6, welches beim Überfahren der Kategorien die Unterkategorien darstellt.

Aktiviere die Flyout Navigation unter Header > Main Navigation > Grundeinstellungen > Unternavigation Aussehen

Farben

Die Hintergrundfarbe (1) des Flyout-Menüs kann auch eine teiltransparente Farbe sein. Über den Colorpicker kann die Sichtbarkeit im Alpha-Kanal hinterlegt werden.

Textfarbe (2) und Text:hover-Farbe (3) müssen nicht unterschiedlich sein. Beim Überfahren mit der Maus rücken die einzelnen Einträge ein paar Pixel zur Seite.

Grundeinstellungen

Über Volle Breite (1) stellst Du ein, ob das Menü die volle Breite des Themes ausnutzen soll. Über Flyout Header Zeile (2) kann der Bereich "Zur Kategorie XY >" ausgeblendet werden, um ein ablenkungsfreies Design zu kreieren. Verschiedene wählbare Animationen (5) runden das Konzept ab.

Das Kategoriebild kann über Flyout-Teaser (3) global ein oder ausgeschaltet werden. Oft wünscht man sich das Kategoriebild als Kategoriebild im Header der Folgekategorie, möchte dieses aber nicht in der Flyout-Navigation darstellen.

Icon bei externen Links (4) zeigt das bekannte "Externer Link" Icon bei Kategorien des Typs "Link" an, wenn dieser durch den Haken "In neuem Tab öffnen" als externer Link eingestellt wurde. Damit wissen Deine Besucher ganz genau, was passiert, wenn sie auf einen solches Link klicken, siehe Beispiel 2.

Der Gruppierungsrahmen links (6) hilft bei vielen Unterkategorien eine Abgrenzung der Spalten hervorzuheben, siehe Beispiel 3.

Die Navigations-Ebenen (7) geben an, wie viele Ebenen des Kategoriebaums dargestellt werden sollen. Gezählt wird ab der Hauptkategorien-Ebene.

Achtung: In den Einstellungen des Sales-Channels muss die Anzahl der Hauptnavigations-Ebenen mindestens so hoch sein wie hier angegeben.

Diese Einstellung behebt die Shopware Bugs NEXT-9461 und NEXT-13203.

Spalten (8) gibt an, auf wie viele Spalten die Menüpunkte im Flyout-Menü angeordnet werden sollen.

Über die Dynamische Spaltenfüllung (9) werden die Spalten auf Grund ihres verfügbaren Platzes aufgebaut. So können in einer Spalte auch mehrere Oberkategorien Platz finden.

Kategorie 1 Unterkategorie Unterkategorie Unterkategorie Kategorie 2 Kategorie 3

Kategorie 4 Unterkategorie Unterkategorie Unterkategorie Unterkategorie Unterkategorie Unterkategorie Unterkategorie

Kategorie 5 Unterkategorie Unterkategorie Kategorie 6 Unterkategorie Unterkategorie Unterkategorie

Aktivierst Du die Option Inhalte scrollbar (10) definiert Du mit der Maximale Höhe (11) die Begrenzung des Flyouts und die Darstellug der Scrollleisten. Damit kannst Du sicherstellen, dass Deine Kunden alle Navigationspunkte auch bei umfangreicheren Navigationen komfortabel erreichen können - auch wenn der Header Sticky ist.

Elemente

Über die Einstellung im Block Elemente kannst Du die einzelnen Einträge der Flyout-Navigation formatieren.

Beispiel 1:

Die Hintergrundfarbe kann auch transparent sein. Mit der kleinen rgba-Funktion kann zusätzlich zur Farbe eine Sichtbarkeit angegeben werden.

rgba($sw-color-brand-primary, 90%)

Beispiel 2:

Beispiel 3:

ab Theme Version 2.6.0

Aktiviere die Dropdown Navigation unter Header > Main Navigation > Grundeinstellungen > Unternavigation Aussehen

Farben

Die Farben für den Hintergrund (1) sowie Vordergrund (2) der Dropdown Navigation lassen sich unabhängig von der Flyout-Navigation einstellen. Ein zusätzlicher Rahmen (3) kann die Dropdown Navigation stärker vom Hintergrund abheben - hier gibt es keine :hover-Farbe, da der Rahmen um die ganze Liste gelegt wird.

Grundeinstellungen

Eine Dropdown Navigation kann grundsätzlich durch ein MouseOver-Event (Hover-Event) oder ein Click-Event ausgelöst werden. Über die Einstellung Dropdown Auslöser (1) kannst Du selbst bestimmen, wie sich ein Dropdown auf Deinem Onlineshop öffnen lässt.

Die Navigations-Ebenen (2) geben an, wie viele Ebenen des Kategoriebaums dargestellt werden sollen. Gezählt wird ab der Hauptkategorien-Ebene.

Da sich bei einem Click-Event auf die Eltern-Kategorie (1) diese selbst nicht öffnen lässt, zeigt das Dropdown die Eltern-Kategorie im Dropdown mit dem Zusatztest "{Kategoriename} anzeigen" an, wenn es sich nicht um eine Strukturkategorie handelt.

Anders als beim Dropdown ausgelöst durch ein Click-Event besteht hier keine Notwendigkeit, die Elternkategorie erneut in das Dropdown aufzunehmen.