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.
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: +49 000 0000
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.
