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.
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: +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
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.
Was this helpful?
Social Media Icons
Links Deine Social Media Icons werden am linken Rand der Top Bar eingeblendet.
Ausblenden Die Social Media Icons werden komplett deaktiviert.