📗
Coolbax - Docs
  • Einführung
  • Handbücher
    • Administration
      • ADCELL Affiliate Tracking + Retargeting
      • Google Shopping + Instagram (+ mehr) Professionell
        • Einbindung des Feed
      • Google Taxonomie / Shopping
      • Produktübersicht + Filtereditor Professionell
      • Statistik Professionell
    • Marktplätze
      • Bestellverwaltung + GPRS
        • Produktsicherheitsrichtlinien
      • Amazon Bestellimport
        • Zugangsdaten Amazon
      • Amazon Lagerabgleich
      • Amazon Prime
      • eBay Bestellimport
        • Zugangsdaten eBay
      • eBay Produktexport
        • eBay Account einrichten
      • Etsy Bestellimport
        • Zugangsdaten Etsy
      • Galaxus Bestellimport
      • Galaxus Produktexport
      • Hood Bestellimport
      • Kaufland Bestellimport
      • OTTO Bestellimport
        • Zugangsdaten OTTO
    • Storefront
      • Amazon Dropdown Menü
      • Bildvorschau per Mousehover
      • Breadcrumb Erweiterung
      • Cross Selling / Zubehör
      • Hersteller Professionell
      • Lexikon / Glossar
      • Produktbilder in den Kategorien als Slider
      • SEO Banner Professionell
      • Sticky Menü Professionell
  • Theme
    • Die ersten Schritte
    • Theme Einstellungen
      • Allgemeine
      • Typografie & Farben
      • Logos
      • Layout
      • Hintergrund Bilder
      • Header
      • Footer
      • Produkt Kategorie
      • Produkt Detail
      • Checkout
      • Erweiterungen
      • Weiteres
    • Kategorie Einstellungen
    • Produkt Einstellungen
    • Erlebniswelten
    • System Einstellungen
Powered by GitBook
On this page
  • Top Bar USP-Leiste
  • Auswahl der Icons
  • Darstellung mit Service-Leiste
  • Top Bar Service-Leiste
  • Darstellung der Position
  • Header
  • Layout
  • Shop Navigation
  • Suche
  • Aktion Buttons
  • Warenkorb Button
  • Main Navigation
  • Navigation Layout
  • Position
  • Home-Link
  • Pfeile anzeigen
  • Rahmen und Schatten
  • Innenabstand und Höhe
  • Typografie
  • Farben
  • Flyout Navigation
  • Aktiv und Flyout-Bar
  • Breite
  • Hauptnavigations-Ebenen
  • Spalten und Teaser Breite
  • Kategorie Darstellung
  • Typografie und Farben
  • Sticky Menü
  • Breadcrumb
  • Breadcrumb Erweiterung
  • Header im Checkout
  1. Theme
  2. Theme Einstellungen

Header

Die nachfolgenden Einstellungen haben Auswirkungen rund um den Header Bereich.

Last updated 1 month ago

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

  • 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: , 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 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.

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

  • Ob eine Top Bar Service-Leiste dargestellt 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 Header anzeigen bedeutet, dass die Service-Leiste zwischen der Top-Bar und dem Warenkorb Symbol im Header dargestellt wird.

Header

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.


  • 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


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

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

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

Account Button Kundenname & Layout

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.

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.

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: 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:

  • 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 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

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.

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

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

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.

Wie Sie die Auswahl der Währung sowie der Sprache für das Frontend aktivieren, finden Sie unter:

An welcher e angezeigt werden soll

In Top Bar anzeigen bedeutet, dass die Service-Leiste in die Top Bar am rechten Rand integriert wird. Die eventuell eingestellten USP der rutschen an den linken Rand.

Eine Ausnahme besteht bei der Wahl des . Hier wird die Service-Leiste auf der linken Seite im Header ausgegeben.

In diesem Abschnitt legen Sie die grundlegende Darstellung des Headers samt Layout, Shop Navigation (Merkzettel , Konto, Warenkorb), Suche und Buttons fest.

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 .

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 ausgegeben werden. Die Summe des Warenkorbs wird permanent ausgegeben.

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 im Header benutzen, wird diese an der linken Seite ausgeben, andernfalls bleibt dieser Bereich leer.

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: .

Sie haben die Möglichkeit, die Shop Navigation mit einem Hintergrund einzufärben. Dieser schließt die Suche, den Merkzettel , Account, Service Button und Warenkorb ein.

Hier legen Sie die Positionen der beiden Buttons unabhängig voneinander fest. Sie können im Header oder in der angezeigt werden

Einstellung gilt nur, wenn Sie Einstellung: ausgewählt haben

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: konfiguriert.

Wie Sie den Merkzettel einblenden finden Sie unter:

Schriftart: Wählen Sie zwischen ihrer eigestellten Schriftart Text oder Überschrift. Die Schriftarten definieren Sie unter:

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: fest.

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 abweichen.

Bitte beachten Sie, dass in dem Fall die Einstellung: nicht immer berücksichtigt wird

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 , Account und Warenkorb angezeigt.

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:

Hintergrundbilder
Position die Top Bar Service-Leist
USP-Leiste
Header-Layout: Template 5 (Zentriertes Logo)
Top Bar
Bezeichnung für den Warenkorb
Service-Leiste
Top Bar
Account Button = im Header anzeigen
Header > Header > Warenkorb Button
Spalten
Icons
Service-Leiste
Theme Einstellungen > Logos
Typografie & Farben > Typografie
System Einstellungen > Währung und Spracheauswahl
(wenn aktiv)
(wenn aktiv)
System Einstellungen > Merkzettel
(wenn aktiv)
Layout > Layout > Layout Breite
Option: In Top Bar anzeigen
Option: In Header anzeigen
Ein Beispiel der Einstellung: Template 1 (Coolbax mit Button Shop Navigation) mit Bezeichnung des Warenkorbs
Ein Beispiel der Einstellung: Template 2 (Coolbax mit Icon Shop Navigation)
Ein Beispiel der Einstellung: Template 3 (Shopware Standard)
Ein Beispiel der Einstellung: Template 4 (Zentriertes Logo)
Ein Beispiel der Einstellung: Template 4 (Zentriertes Logo) mit Service-Leiste
Beispiel für aktiven Rahmen im Header
Hintergrundfarbe für Shop Navigation
Service Button in der Top Bar, Account Button im Header
Service und Account Button in der Top Bar
Shopware Standard
Account Button Kundenname anzeigen = aktive
Merkzettel mit Badge
Ohne Bezeichnung
Mit Bezeichnung
Beispiel für hervorgehobenen Warenkorb mit Badge
Ein Beispiel der Einstellung: Layout 1 (Coolbax Linie)
Ein Beispiel der Einstellung: Layout 2 (Coolbax Button)
Ein Beispiel der Einstellung: Layout 3 (Shopware Standard)
Beispiel für Position: links
Beispiel für Position: Mitte
Beispiel für Position: rechts
Beispiel für Main Navigation mit Pfeile
Beispiel für alle Einstellungsmöglichkeiten aus dem Bereich: Main Navigation > Rahmen und Schatten
Beispiel für die Auswirkungen des Innenabstandes
Beispiel für alle Einstellungsmöglichkeiten aus dem Bereich: Main Navigation > Farben
Beispiel für Flyout Navigation
Beispiel für die Flyout-Bar
Beispiel für Breiteneinstellung: 50%
Beispiel für: Breite: 75% / Spalten: 2 / Teaser Breite: 50%
Beispiel für: Zeilen mit fester Höhe (Shopware Standard)
Beispiel für: Zeilen mit flexibler Höhe
Einstellungen für die Typografie in der Flyout Navigation
Anwendung der Einstellungen in der Flyout Navigation
Farbeinstellungen in der Flyout Navigation
Ein Beispiel der Einstellung: Navigationsleiste
Ein Beispiel der Einstellung: Suchleiste
Ein Beispiel der Einstellung: Suchleiste und Navigationsleiste per Button
Ein Beispiel der Einstellung: Suchleiste und Navigationsleiste per Automatik
Beispiel für Breadcrumb in einer Unterkategorie
Beispiel für Position: links
Beispiel für Position: Mitte
Beispiel für Position: rechts
Beispiel für alle Farbeinstellungen aus dem Bereich: Breadcrumb
Beispiel für Breadcrumb Erweiterung
Beispiel für einen Checkout Header
Beispiel für USP-Leist ohne (Oben) und mit Service-Leiste (Unten)
Theme Einstellungen > Icon auswählen
Kategorie Einstellungen > Zusatzfelder > Flyout Navigation Spalten