Top Bar

Übersicht

Die Top Bar befindet sich immer ganz oben in deinem Shop und lässt sich durch individuelle Einstellungsmöglichkeiten exakt auf deine Wünsche anpassen.

Grundeinstellungen

Anzeigen ab

Immer Die Top Bar wird auf jedem Endgerät anzeigt.

Tablet Die Top Bar wird lediglich für Tablets und Desktops eingeblendet.

Ausblenden Die Top Bar wird nicht angezeigt.

Höhe (in px)

Mit dieser Einstellung kannst du die Top Bar höher oder schmaler einstellen. Beachte jedoch, dass du sie nicht zu schmal konfigurierst. Im Zweifel sind die einzelnen Text Elemente innerhalb der Top Bar nicht mehr lesbar.

Volle Breite

Ja Nutzt die volle Breite der Top Bar. So wird der Inhalt der Top Bar immer auf die volle Bildschirmbreite gestreckt.

Nein Die Breite des Top Bar Inhalts wird automatisch auf die von dir konfigurierte Containerbreite begrenzt.

Social Media Icons

Links Deine Social Media Icons werden am linken Rand der Top Bar eingeblendet.

Ausblenden Die Social Media Icons werden komplett deaktiviert.

Ausrichtung

Gleichmäßige Verteilung Die einzelnen Elemente innerhalb der Top Bar werden gleichmäßig verteilt, sodass ein einheitlicher Abstand zwischen den Elementen entsteht.

Rechtsbündig Die Elemente innerhalb der Top Bar werden rechtsbündig ausgerichtet.

Labels

Erstes Label anzeigen

Ja Das erste Label innerhalb der Top Bar wird angezeigt.

Nein Das erste Label innerhalb der Top Bar wird nicht angezeigt.

---

Den Inhalt kannst du in den Textbausteinen jederzeit auf deine Bedürfnisse anpassen und übersetzen. Name: theme.header.top-bar.labelOne Standardwert: 1 Monat Widerrufsrecht

Zweites Label anzeigen

Ja Das zweite Label innerhalb der Top Bar wird angezeigt.

Nein Das zweite Label innerhalb der Top Bar wird nicht angezeigt.

---

Den Inhalt kannst du in den Textbausteinen jederzeit auf deine Bedürfnisse anpassen und übersetzen. Name: theme.header.top-bar.labelTwo Standardwert: Schneller Versand

Drittes Label anzeigen

Ja Das dritte Label innerhalb der Top Bar wird angezeigt.

Nein Das dritte Label innerhalb der Top Bar wird nicht angezeigt.

---

Den Inhalt kannst du in den Textbausteinen jederzeit auf deine Bedürfnisse anpassen und übersetzen. Name: theme.header.top-bar.labelThree Standardwert: Made in Germany

Viertes Label anzeigen

Ja Das vierte Label innerhalb der Top Bar wird angezeigt.

Nein Das vierte Label innerhalb der Top Bar wird nicht angezeigt.

---

Den Inhalt kannst du in den Textbausteinen jederzeit auf deine Bedürfnisse anpassen und übersetzen. Name: theme.header.top-bar.labelFour Standardwert: Support: [phone]

Icons

Icon für erstes Label

In diesem Feld kannst du ein passendes Icon zu deinem zuvor konfigurierten ersten Label bestimmen.

Icon für zweites Label

In diesem Feld kannst du ein passendes Icon zu deinem zuvor konfigurierten zweiten Label bestimmen.

Icon für drittes Label

In diesem Feld kannst du ein passendes Icon zu deinem zuvor konfigurierten dritten Label bestimmen.

Icon für viertes Label

In diesem Feld kannst du ein passendes Icon zu deinem zuvor konfigurierten vierten Label bestimmen.

Widgets

Hinweise zum Sprach Schalter

Solltest du einen mehrsprachigen Shop betreiben wollen, so bietet dir Shopware von Haus aus bereits ein Sprach Schalter Feature. Die jeweiligen Sprachen, die du in deinem Verkaufskanal definierst, werden anschließend in einem Sprach Schalter in der Top Bar und im Offcanvas Menü ausgegeben. Durch diesen kann der Kunde im Shop mit wenigen Klicks die Sprache ändern. Ähnliche Einstellungen können ebenfalls in der Theme Konfiguration für das Offcanvas vorgenommen werden.

Sprach-Schalter-Icon anzeigen

Ja Ein Icon wird vor deinem Sprach Schalter angezeigt.

Nein Kein Icon wird vor deinem Sprach Schalter angezeigt.

Sprach-Schalter-Layout

Stelle den Sprach-Schalter in unterschiedlichen Layouts dar:

---

Text Zeigt nur den Text der ausgewählten Sprache an.

Flagge Zeigt nur die Flagge der ausgewählten Sprache an.

Flagge und Text Zeigt sowohl die Flagge als auch den Text der ausgewählten Sprache an.

Sprach-Schalter-Dropdown-Layout

Stelle das Sprach-Schalter-Dropdown in unterschiedlichen Layouts dar.

---

Text Zeigt nur den Text der ausgewählten Sprache an.

Flagge Zeigt nur die Flagge der ausgewählten Sprache an.

Flagge und Text Zeigt sowohl die Flagge als auch den Text der ausgewählten Sprache an.

Service Menü

Dropdown Das Service Menü wird am rechten Rand der Top Bar als Dropdown dargestellt.

Liste Das Service Menü wird am linken Rand der Top Bar in einzelnen Listenpunkten hintereinander dargestellt.

Ausblenden Das Service Menü wird deaktiviert.

---

Damit du ein Service Menü in deiner Top Bar darstellen kannst, musst du die einzelnen Elemente innerhalb des Menüs zunächst konfigurieren. Hierzu legst du im ersten Schritt eine Kategoriestruktur an. Anschließend verknüpfst du diese in den Verkaufskanal Einstellungen im Punkt "Einstiegspunkt für die Footer-Service-Navigation".

Typografie

Schriftgröße (in px)

Mit dieser Einstellung kannst du die Schriftgröße aller vier Labels innerhalb der Top Bar anpassen.

Farben

Hintergrund

Hiermit kannst du die Hintergrundfarbe der Top Bar bestimmen.

Text Farbe

Diese Einstellung definiert die Textfarbe aller Text Elemente und Icons innerhalb der Top Bar.

Rahmenfarbe

Mit dieser Einstellung kannst du die untere Rahmenfarbe der Top Bar festlegen. So kannst du bspw. mit einer weißen Hintergrundfarbe und der $sw-border-color als Rahmenfarbe eine dezente Abgrenzung von Top Bar und Header schaffen.

Solltest du keine Rahmenfarbe verwenden wollen, kannst du hierfür dieselbe Farbe wie für den Hintergrund wählen und es entsteht keine sichtbare Trennlinie mehr.