Top Bar
Zuletzt aktualisiert
Zuletzt aktualisiert
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.
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.
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.
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.
Links Deine Social Media Icons werden am linken Rand der Top Bar eingeblendet.
Ausblenden Die Social Media Icons werden komplett deaktiviert.
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.
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
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
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
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
In diesem Feld kannst du ein passendes Icon zu deinem zuvor konfigurierten ersten Label bestimmen.
In diesem Feld kannst du ein passendes Icon zu deinem zuvor konfigurierten zweiten Label bestimmen.
In diesem Feld kannst du ein passendes Icon zu deinem zuvor konfigurierten dritten Label bestimmen.
In diesem Feld kannst du ein passendes Icon zu deinem zuvor konfigurierten vierten Label bestimmen.
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.
Ja Ein Icon wird vor deinem Sprach Schalter angezeigt.
Nein Kein Icon wird vor deinem Sprach Schalter angezeigt.
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.
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.
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".
Mit dieser Einstellung kannst du die Schriftgröße aller vier Labels innerhalb der Top Bar anpassen.
Diese Einstellung definiert die Textfarbe aller Text Elemente und Icons innerhalb der Top Bar.
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.