Header
Die nachfolgenden Einstellungen haben Auswirkungen rund um den Header Bereich.
Top Bar USP-Leiste
Zeigen Sie, über Ihrem Header, Ihre z.B. max. 4 wichtigsten Alleinstellungsmerkmale (USP) prominent an. Die Anzeige erfolgt über dem Header. Hier wird eine Leiste mit den USP sowie ausgewählten Icons angezeigt. Die angezeigten USP teilen sich gleichmäßig in dem Bereich auf.
In den Einstellungen für dieses Features legen Sie fest:
Ob die Top Bar USP-Leiste auch auf den Viewport: Tablet dargestellt werden soll
Die Höhe der Leiste
Die Inhalte und Icons
Die Darstellung mittels: Hintergrundfarbe, Schriftfarbe und Schriftgröße sowie, ob ein Schatten unterhalb der Top Bar Leiste dargestellt werden soll
Auswahl der Icons
Für jedes USP können Sie in eigenes Icon wählen. Gehen Sie auf: Theme Einstellungen > Icon auswählen, suchen sich dort ein passendes Icon aus und kopieren Sie den Namen des Icons. Diesen fügen Sie anschließend in das Feld: Icon 1-4 ein.
Darstellung mit Service-Leiste
In der Top Bar kann die Service-Leiste zusätzlich untergebracht sein. Das hat Auswirkungen auf die Anzeige der USP. Sollte die Service-Leiste ebenfalls in der Top Bar angezeigt werden, werden nur 3 statt 4 USP ausgegeben. Die USP werden in diesem Fall linksbündig in der Top Bar angezeigt.
Top Bar Service-Leiste
Die Service-Leiste enthält die Auswahl der Währung sowie der Sprache. Abhängig von den Einstellungen: Header > Aktion Buttons kann auch der Kunden Account und das Service Menü in Service-Leiste erscheinen.
Wie Sie die Auswahl der Währung sowie der Sprache für das Frontend aktivieren, finden Sie unter: System Einstellungen > Währung und Spracheauswahl
Darstellung der Position
Für die Positionierung stehen Ihnen zwei Optionen zur Verfügung.
In Top Bar anzeigen bedeutet, dass die Service-Leiste in die Top Bar am rechten Rand integriert wird. Die eventuell eingestellten USP der USP-Leiste rutschen an den linken Rand.
In Header anzeigen bedeutet, dass die Service-Leiste zwischen der Top-Bar und dem Warenkorb Symbol im Header dargestellt wird.
Eine Ausnahme besteht bei der Wahl des Header-Layout: Template 5 (Zentriertes Logo). Hier wird die Service-Leiste auf der linken Seite im Header ausgegeben.
Header
In diesem Abschnitt legen Sie die grundlegende Darstellung des Headers samt Layout, Shop Navigation (Merkzettel (wenn aktiv), Konto, Warenkorb), Suche und Buttons fest.
Layout
Header-Layout
Für die Auswahl des Layouts stehen Ihnen 5 unterschiedliche Varianten zur Verfügung. Diese lassen sich mit einigen wenigen Einstellungen weiter individualisieren.
Bei den nachfolgenden Beispielen werden der Account und Service Button teilweise dargestellt. Diese können (müssen aber nicht) in den Header integriert werden. Alternativ befinden Sie sich in der Top Bar.
Template 1 (Coolbax mit Button Shop Navigation): Beginnend mit dem Logo auf der linken Seite, richtet sich die Shop Navigation an der rechten Seite aus. Die Mitte des Headers nimmt das Suchfeld ein. Der Account Button in der Shop Navigation erhalt Links neben dem Symbol seine Bezeichnung. Zusätzlich kann die Bezeichnung für den Warenkorb ausgegeben werden. Die Summe des Warenkorbs wird permanent ausgegeben.
Template 2 (Coolbax mit Icon Shop Navigation): Bei diesem Template wird das Logo auf der linken Seite dargestellt. auf der rechten Seite befindet sich die Shop Navigation mit der Suche. Der Zwischenraum zwischen Logo und Shop Navigation bleibt frei. Die Buttons der Shop Navigation werden mit Unterschrift dargestellt. Das Suchfenster wird mit Klick auf die Lupe eingeblendet.
Template 3 (Shopware Standard): Dieses Template ist das Standard Template, welches Sie von Shopware kennen. Auf der linken Seite befindet sich das Logo, in der Mitte zentriert sich das Suchfeld und auf der rechten Seite befindet sich die Shop Navigation.
Template 4 (Zentriertes Logo): Bei diesem Layout rückt das Suchfeld an linker Stelle und das Logo zentriert sich in der Mitte des Headers. Auf der rechten Seite befindet sich die Shop Navigation
Template 5 (Zentriertes Logo): Bei dieser Variante befindet sich das Logo in der Mitte des Headers. Auf der rechten Seite findet die Shop Navigation ihren Platz. Sollten Sie eine Service-Leiste im Header benutzen, wird diese an der linken Seite ausgeben, andernfalls bleibt dieser Bereich leer.
Rahmenfarbe
Hier können Sie die Farbe der Rahmen bestimmen, welche im das permanente Suchfenster und zum Teil um die Buttons in der Shop Navigation gelegt werden. Die Einstellung greift bei folgenden Layouts:
| Template | Suche | Button |
|---|---|---|
Template 1 | Ja | Ja |
Template 2 | Nein | Nein |
Template 3 | Ja | Nein |
Template 4 | Ja | Nein |
Template 5 | Ja | Nein |
Hintergrundfarbe
Hier wird der gesamte Hintergrundbereich mit einer Farbe iherer Wahl versehen. Alternative können Sie in diesem Bereich auch ein Hintergrundbild ausgeben. Gehen Sie hierzu in den Tap: Hintergrundbilder.
Schriftfarbe
Hier definieren Sie eine Schriftfarbe, welcher für Texte und Icons im gesamten Header genutzt wird.
Die Einstellung greift nur bei den Layouts: Template 3, Template 4 und Template 5
Shop Navigation
Sie haben die Möglichkeit, die Shop Navigation mit einem Hintergrund einzufärben. Dieser schließt die Suche, den Merkzettel (wenn aktiv), Account, Service Button und Warenkorb ein.
Die Einstellung greift nur bei den Layouts: Template 1 und Template 2
Suche
Hier können Sie die Farbe für das Suchfeld und den Button bestimmen. Für beide Elemente können Sie unabhängig voneinander die Hintergrundfarbe und Schriftfarbe bestimmen
Die Farbauswahl für das Suchfeld greift nicht bei Template 2
Aktion Buttons
Service Button und Account Button
Hier legen Sie die Positionen der beiden Buttons unabhängig voneinander fest. Sie können im Header oder in der Top Bar angezeigt werden
Account Button Kundenname & Layout
Einstellung gilt nur, wenn Sie Einstellung: Account Button = im Header anzeigen ausgewählt haben
Mit der Einstellung: Account Button Kundenname anzeigen haben Sie die Möglichkeit die Bezeichnung des Account Button zu ändern, indem Sie den Vornamen des Kunden anstatt der Shopware Standardausgabe ausgeben.
Ist die Einstellung Account Button Kundenname anzeigen aktiv, können Sie noch ein Text vor dem Namen setzen. Hierzu nutzen Sie die Einstellung: Account Button Kundenname Layout
Kundename: Hier wird der Standardtext von Shopware (Mein Konto) durch den Vornamen des Kunden ersetzt
Textbaustein + Kundenname: Hier wird der Standardtext von Shopware (Mein Konto) durch den Vornamen des Kunden ersetzt. Vor dem Vornamen kann ein Text z.B. eine Anrede angezeigt werden
Um den Textbaustein zu ändern, gehen Sie in: Einstellungen > Shop > Textbausteine und suchen dort nach: cbaxTheme.header.accountSalutation
Farbeinstellungen für Badge
Hier stellen Sie die Farben für die Badge ein. Badge bedeutet soviel wie "Abzeichen" und signalisiere z. B. wenn etwas zu einem Button in der Shop Navigation abgespeichert wurde. Die Anzahl der Artikel wird als Zahl auf dem Badge dargestellt.
Im Bereich der Shop Navigation wird ein Badge z. B. für den Merkzettel angezeigt, wenn in diesem sich ein Artikel befindet. Auch der Warenkorb bekommt ein Badge, wenn dieser Artikel beinhaltet. Dieses Badge wird in der nachfolgenden Einstellung unter: Header > Header > Warenkorb Button konfiguriert.
Wie Sie den Merkzettel einblenden finden Sie unter: System Einstellungen > Merkzettel
Farbeinstellungen für Button
Die einzelnen Symbole in der Shop Navigation können Sie mit einer Hintergrundfarbe sowie einer eigenen Schriftfarbe belegen. Somit haben Sie die Möglichkeit, diese optisch als Buttons darstellen zu lassen.
Die Einstellung greift nur bei den Layouts: Template 1 und Template 2
Warenkorb Button
Der Warenkorb ist eins der wichtigsten Elemente im Header, daher können Sie ihn noch einmal speziell konfigurieren und hervorheben.
Bezeichnung
Für das Layout: Template 1 haben Sie die Möglichkeit, zwischen Warenkorb Symbol und Summe des Warenkorbs, das Word "Warenkorb" ausgeben zu lassen
Farbeinstellungen
Speziell für den Warenkorb können Sie das Badge sowie dem Warenkorb Button eigenständige Farben, bezüglich der Schrift und Hintergrund, geben. Das Badge erscheint, wenn etwas in den Warenkorb gelegt wird.
Die Einstellung greift nur bei den Layouts: Template 1 und Template 2
Main Navigation
Die Main Navigation schließt sich sogleich an den Header an und ist ein zentrales Element im Shop. Mit ihr kann sich der Kunde durch den Shop navigieren.
Navigation Layout
Drei unterschiedliche Darstellungsmöglichkeiten stehen Ihnen bei der Anzeige der Main Navigation zur Verfügung.
Layout 1 (Coolbax Linie): Bei dieser Anzeige bekommt die aktive Seite eine Hintergrundfarbe. Der Mousehover Effekt (einer inaktiven Kategorie) zeigt eine Linie über dem Kategorienamen. Linie und Hintergrundfarbe können getrennt voneinander konfiguriert werden.
Layout 2 (Coolbax Button): Wie bei Layout 1 wird auch bei Layout zwei die aktive Kategorie mit einer Hintergrundfarbe hinterlegt. Der Mousehover Effekt (einer inaktiven Kategorie) zeigt in diesem Layout ebenfalls eine Hintergrundfarbe. Beide können getrennt voneinander gewählt werden.
Layout 3 (Shopware Standard): In der Standardanzeige von Shopware wird die aktive Kategorie von einem Unterstrich gekennzeichnet. Es gibt bei dieser Variante keinen Mousehover Effekt und die Navigationsleiste fällt deutlich schmaler aus, als bei den anderen beiden Varianten
Position
Mit den drei Positionsangaben können Sie die Navigationspunkte auf der Navigationsleiste verschieben: links, Mitte, rechts.
Home-Link
Sie haben die Möglichkeit das Home Buttons (Häuschen vor der Navigation) abzuschalten. Das Home Buttons ermöglicht es ihren Kunden auf die Startseite zu gelangen. Alternativ können Ihre Kunden das Logo des Shops nutzen, um auf die Startseite zu gelangen.
Auch mit Deaktivierung des Home Buttons bleibt die Verlinkung über das Logo zur Startseite bestehen.
Rahmen und Schatten
Sie haben die Möglichkeit über und unter der Main Navigation einen Rahmen ausgeben zu lassen. Beide können Sie mit einer Farbe belegen. Die Breite des Rahmes ist in beiden Fällen vordefiniert und kann nicht geändert werden.
Um einen Rahmen angezeigt zu bekommen, muss er erst aktiv geschaltet werden. Danach können Sie die Farbe bestimmen.
1) Rahmen Oben anzeigen & Rahmenfarbe Oben: Dieser Rahmen wird über der Main Navigation angezeigt. Er hat eine vordefinierte Breite von 1px. Der Rahmen muss aktiv geschalte werden. Danach können Sie eine Farbe wählen.
2) Rahmen Unten anzeigen & Rahmenfarbe Unten: Dieser Rahmen wird unter der Main Navigation angezeigt. Er hat eine vordefinierte Breite von 4px. Der Rahmen muss aktiv geschalte werden. Danach können Sie eine Farbe wählen.
3) Schatten unten: Der Schatten wird unter der Main Navigation, nach dem Rahmen unten wenn aktiv) ausgegeben. Er muss aktiviert sein, um im Frontend angezeigt zu werden.
Innenabstand und Höhe
Der Innenabstand definiert den Abstand um die einzelnen Navigationspunkte (oben, unten, rechts und links)
Mit der Höhe definieren Sie die Breite des gesamten Main Navigation Containers. Die Navigationspunk bleiben dabei immer in der Mitte des Containers (vertikal) ausgerichtet.
Typografie
Hier haben Sie die Möglichkeit, die Navigationspunkte auf unterschiedlichste Weise hervorzuheben:
Schriftart: Wählen Sie zwischen ihrer eigestellten Schriftart Text oder Überschrift. Die Schriftarten definieren Sie unter: Typografie & Farben > Typografie
Schriftgröße: Wählen Sie die Größe der Schrift aus. Die Angaben erfolgen in Pixel.
Schriftstärke (inaktiv & aktiv): Definieren Sie die Schriftstärke (dünn, normal oder fett) für aktive und deaktivierte Navigationspunkte. Beide können separat gewählt werden.
Text Transform: Sie können diese Navigationspunkte nur in Großbuchstaben bzw. nur in Kleinbuchstaben anzeigen lassen.
Farben
Die Farbgebung der Navigation und die Navigationspunkte können Sie zusätzlich definieren. Es ist Möglich die Farben für einen Mousehover Effekt sowie für eine aktive Kategorie zu bestimmen. Definiert werden immer die Hintergrund- und Schriftfarbe.
1) Hintergrundfarbe: Die Hintergrundfarbe erstreckt sich über den gesamten Bereich der Main Navigation.
2) Schriftfarbe: Hier definieren Sie die Standardfarbe der Kategorien in der Main Navigation.
3) Hintergrundfarbe hover: Eine spezielle Hintergrundfarbe, wenn der Nutzer per Mousehover über eine Kategorie geht. Es färbt sich der Hintergrund um den Namen der Kategorie ein.
4) Schriftfarbe hover: Eine spezielle Schriftarbe, wenn der Nutzer per Mousehover über eine Kategorie geht. Es färbt sich die Schrift des Namens der Kategorie ein.
5) Hintergrundfarbe aktiv: Eine spezielle Hintergrundfarbe, wenn eine Kategorie aktiviert ist und der Nutzer sich auf dieser befindet. Es färbt sich der Hintergrund um den Namen der Kategorie ein.
6) Schriftfarbe aktiv: Eine spezielle Schriftfarbe, wenn eine Kategorie aktiviert ist und der Nutzer sich auf dieser befindet. Es färbt sich die Schrift des Namens der Kategorie ein.
Flyout Navigation
Die Flyout Navigation beinhaltet die Unterkategorien einer Hauptkategorien und erscheint bei wen die Mouse über ein Hauptmenüpunkt drüber geht.
Aktiv und Flyout-Bar
Mit der Einstellung: Aktive können Sie die gesamte Flyout Navigation an- und abschalten. Ist Sie abgeschaltet, muss der Nutzer aktive auf eine Kategorie klicken, um in die Unterkategorien zu gelangen.
Die Flyout-Bar wird über die Auflistung der Unterkategorien gesetzt und verlinkt zu der gewählten Hautkategorie. Mit dieser Einstellung können Sie den Bereich ("Zur Kategorie XYZ" ) ein- und ausblenden.
Breite
Die Breite gibt an, über welche Länge sich die Flyout Navigation erstrecken kann. Die Angaben erfolgen immer in Prozent. 50% bedeuten z. B., dass sich die Flyout Navigation über die Hälfte der Layout Breite erstreckt. Die Layout Breite legen Sie in: Layout > Layout > Layout Breite fest.
Die Flyout Navigation wird immer mittig unter der Main Navigation positioniert.
Hauptnavigations-Ebenen
Hier definieren Sie, wie viele Ebenen der Unterkategorien angezeigt werden dürfen.
Spalten und Teaser Breite
Mit Spalten (1), bestimmen Sie, wie viele Spalten für die Auflistung der Unterkategorien genutzt werden dürfen. Diese Einstellung gilt als Standardeinstellung für alle Kategorien. Sie können davon in den Kategorie Einstellungen > Zusatzfelder > Flyout Navigation Spalten abweichen.
Die Breite der Spalten wird automatisch aus den vorhanden Platz ermittelt, der zur Verfügung steht (Breite der Flyout Navigation - Teaser Breite).
Die Teaser Breite (2) bestimmt, wie viel Platz ein Bild in der Flyout Navigation einnehmen darf. Die Bilder für die Navigation stellen Sie in den Kategorie Einstellungen unter: Menü-Einstellungen > Anzeigebild ein.
Kategorie Darstellung
Bei der Einstellung: Zeilen mit fester Höhe (Shopware Standard) wird die Höhe der Kategorie mit den meisten Unterkategorien ermittelt und auf allen anderen Kategorie übertragen. Die Ansicht wirkt harmonischer, benötigt allerdings in machen Fällen mehr Platz als wie gebracht wird.
Ideale Aufteilung bei gleicher Anzahl an Unterkategorien oder Shops mit wenig Kategorien
Bei Zeilen mit flexibler Höhe wird für jede Kategorie und ihre Unterkategorien eine eigene Höhe ermittelt. Wenn möglich, wird der freie Platz mit der nächsten Kategorie und deren Unterkategorien gefüllt. Diese Option ist Platzsparender und die Ansicht wirkt kompakter.
Ideal bei Shops mit einer Vielzahl an Kategorien und Unterkategorien.
Bitte beachten Sie, dass in dem Fall die Einstellung: Spalten nicht immer berücksichtigt wird
Typografie und Farben
Unter Typografie können Sie die unterschiedlichen Kategorie Ebenen optisch mittels Schriftgröße und Schriftstärke (dünn, normal, fett) unterschiedlich definieren.
Hierbei ist das 1. Level, die erste Unterkategorie des Hautnavigationspunkts. Diese können Sie anders Konfigurieren als das zweit und alle nachfolgenden Level. Ab Level 2 bleibt die Konfiguration für alle gleich.
Die Auswahl der Farben beschränkt sich in der Flyout Navigation auf die Hintergrundfarbe (5) des gesamten Menüs sowie die Schriftfarbe (6) und die Schriftfarbe bei Mouse Hover (7). Die Trennlinien (8), welche vor jeder Kategorie (Level 1) und deren Unterkategorien auf der linken Seite gesetzt ist, kann ebenfalls angepasst werden.
Sticky Menü
Minimierter Header der beim Scrollen am oberen Bildschirmrand fixiert wird und sich erst wieder ausblendet, wenn der Header im sichtbaren Bereich erscheint.
Für die Darstellung des Sticky Menü haben Sie vier Möglichkeiten. Die Einstellung für dieses Feature lautet in dieses Fall "Sticky Menü anzeigen als":
Navigationsleiste: Bei dieser Variante wird nur die Main Navigation an den oberen Bildschirmrand geheftet.
Suchleiste: Diese Option zeigt den Header Bereich. Hierbei wird immer das Logo auf der linken Seite, die Suchleiste in der Mitte und auf der rechten Seite die Shop Navigation mit Merkzettel (wenn aktiv), Account und Warenkorb angezeigt.
Suchleiste und Navigationsleiste per Button: In diesem Beispiel werden die beiden ersten Varianten gekoppelt. Logo, Suchleiste und Shop Navigation sind mit Beginn sichtbar. Die Main Navigation kann per Button ein- und ausgeblendet werden. Der Button befindet sich vor dem Logo
Suchleiste und Navigationsleiste per Automatik: Anders als bei der Darstellung "Suchleiste und Navigationsleiste per Button" werden beide Elemente mit Beginn angezeigt. Die Main Navigation wird nur wenige Sekunden danach eingeblendet und ist danach dauerhaft sichtbar.
In den Einstellungen für dieses Feature legen Sie zusätzlich fest:
Auf welche Viewports die Funktion dargestellt werden soll
Dauer Einblendung (Angabe in Millisekunden / min.=100, max.=1000)
Definition der Hintergrund- und Schriftfarbe
Es kann ein speziell angepasstes Logo für das Sticky Menü hinterlegt werden. Sollte kein Logo hinterlegt werden, wird das Logo für die Mobile Ansicht genutzt. Das Logo hinterlegen Sie unter: Theme Einstellungen > Logos
Breadcrumb
Der Breadcrumb schließt sich unter der Main Navigation an und zeigt dem Nutzer, wo er sich im Shop befindet.
Im ersten Teil der Einstellungen für den Breadcrumb können Sie die Farben festlegen. Diese Einstellungen greifen auch, wenn die "Breadcrumb Erweiterung" nicht aktiv ist.
1) Aktive: Auch wenn die "Breadcrumb Erweiterung" nicht aktiv sein muss, muss die Einstellung "Aktiv" unter Breadcrumb aktiviert sein.
2) Ausrichtung: Wie bei der Main Navigation können Sie die Position bestimmen. Folgende Optionen stehen Ihnen zur Verfügung: links, Mitte, rechts.
3) Innenabstand: Hier können Sie den Innenabstand vergrößern, um dem Breadcrumb mehr Raum zu geben. Es kann nur ein Wert angegeben werden, welche für alle Seiten gilt. Die Angabe erfolgt in Pixel.
4) Rahmen anzeigen: Mit Aktivierung wird ein Rahmen um den gesamten Bereich des Breadcrumb gelegt.
5) Rahmenfarbe: Hier definieren Sie die Farbe des Rahmen
6) Hintergrundfarbe: Der gesamten Breadcrumb Bereich kann mit einer Hintergrundfarbe belegt werden.
7) Schriftfarbe: Bestimmen Sie die Schriftfarbe der (nicht aktiven) Kategorien des Breadcrumb.
Breadcrumb Erweiterung
Die Breadcrumb Erweiterung zeigt ihren Kunden alle weiteren Unterkategorien an, die sich auf seinen Pfad befinden. Die Unterkategorien werden in einem Layer ausgegeben.
In den Einstellungen für dieses Feature legen Sie fest:
Ob das Feature angezeigt werden soll
Wie lange es dauern soll, bis der Layer für die Unterkategorien angezeigt werden soll
Welche Hintergrundfarbe und Schriftfarbe für den Layer genutzt werden soll
Last updated
