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. Nutzen Sie folgenden Link um ein passendes Icon zu finden:

Suchen Sie 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

In den Einstellungen für dieses Features legen Sie fest:

Ob eine Top Bar Service-Leiste dargestellt werden soll
An welcher Position die Top Bar Service-Leiste angezeigt werden soll
In welcher Schriftfarbe de einzelnen Links dargestellt werden

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.

Rahmen und Rahmenfarbe

Hier können Sie bestimmen, ob ein Rahmen um das permanente Suchfenster und die Buttons in der Shop Navigation angezeigt werden soll und welche Farbe diese nutzen sollen.

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

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, den Button und die Echtzeit-Suchergebnisse bestimmen.

Die Farbauswahl für das Suchfeld greift nicht bei Template 2

1) Hintergrundfarbe: Die Hintergrundfarbe wird für das Suchfeld und den Hintergrund der Echtzeit-Suchergebnisse genutzt.
2) Schriftfarbe: Die Schriftfarbe wird für das Suchfeld und die Suchergebnisse der Echtzeit-Suche genutzt.
3) Hintergrundfarbe & Schriftfarbe (Button): Der Suchbutton befindet sich am Ende des Suchfeldes. Für den Button können Hintergrund- und Schriftfarbe bestimmt werden.
4) Trennlinie: Hier wird die Farbe der Trennline bei den Echtzeit-Suchergebnisse festgelegt

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

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.

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.

Pfeile anzeigen

Mit der Einstellung: Pfeile anzeigen haben Sie die Möglichkeit Main Navigationspunkte zu markieren, welche Unterkategorien besitzen. Bei Main Navigationspunkte ohne Unterkategorien wird kein Pfeil eingeblendet.

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 & Rahmenstärke: Dieser Rahmen wird unter der Main Navigation angezeigt. Der Rahmen muss aktiv geschalte werden. Danach können Sie eine Farbe und die Rahmenstärke festlegen.
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.

Die Flyout Navigation beinhaltet die Unterkategorien einer Hauptkategorien und erscheint bei wen die Mouse über ein Hauptmenüpunkt drüber geht.

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.

Volle Breite

Sie können die Flyout Bar über die gesamte Bildschirmbreite anzeigen lassen (Volle Breite = aktiv) oder die Breite des Layouts nehmen (Volle Breite = deaktiviert). Die Layout Breite legen Sie in: Layout > Layout > Layout Breite fest.

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.

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-, Schrift- und Rahmenfarbe
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

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.

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

Header im Checkout

Den Checkout Header können Sie speziell konfigurieren. Hintergrundfarbe und Schriftfarbe könne definiert werden.

Beachten Sie, dass alle Links ebenfalls die Schriftfarbe vom Checkout Header erhalten

1) Hintergrundfarbe: Die Hintergrundfarbe erstreckt sich über den gesamten Bereich des Headers im Checkout.
2) Schriftfarbe: Hier definieren Sie die Schriftfarbe für alle Texte und Links im Header.

Last updated 6 months ago

Header

Top Bar USP-Leiste

Auswahl der Icons

Darstellung mit Service-Leiste

Top Bar Service-Leiste

Darstellung der Position

Header

Layout

Header-Layout

Rahmen und Rahmenfarbe

Hintergrundfarbe

Schriftfarbe

Shop Navigation

Suche

Aktion Buttons

Service Button und Account Button

Account Button Kundenname & Layout

Farbeinstellungen für Badge

Farbeinstellungen für Button

Warenkorb Button

Bezeichnung

Farbeinstellungen

Main Navigation

Navigation Layout

Position

Home-Link

Pfeile anzeigen

Rahmen und Schatten

Innenabstand und Höhe

Typografie

Farben

Flyout Navigation

Aktiv und Flyout-Bar

Volle Breite

Hauptnavigations-Ebenen

Spalten und Teaser Breite

Kategorie Darstellung

Typografie und Farben

Sticky Menü

Header im Checkout