# Top Bar

### Übersicht

Die [Top Bar](/en/academy/technical-terms/top-bar.md) befindet sich immer ganz oben in deinem Shop und lässt sich durch individuelle Einstellungsmöglichkeiten exakt auf deine Wünsche anpassen.

### Grundeinstellungen

<figure><img src="/files/qcDD2RV1X4vE44VVHOJE" alt=""><figcaption></figcaption></figure>

<details>

<summary>Anzeigen ab</summary>

**Immer**\
Die Top Bar wird auf jedem Endgerät anzeigt.&#x20;

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

**Ausblenden** \
Die Top Bar wird nicht angezeigt.

</details>

<details>

<summary>Höhe (in px)</summary>

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.

</details>

<details>

<summary>Volle Breite</summary>

**Ja**\
Nutzt die volle Breite der Top Bar. So wird der Inhalt der Top Bar immer auf die volle Bildschirmbreite gestreckt.&#x20;

**Nein**\
Die Breite des Top Bar Inhalts wird automatisch auf die von dir konfigurierte [Containerbreite](/en/theme-configuration/general/layout.md#maximale-containerbreite-in-px) begrenzt.

</details>

<details>

<summary>Social Media Icons</summary>

**Links**\
Deine [Social Media Icons](/en/theme-configuration/general/social.md) werden am linken Rand der Top Bar eingeblendet.&#x20;

**Ausblenden**\
Die [Social Media Icons](/en/theme-configuration/general/social.md) werden komplett deaktiviert.

</details>

<details>

<summary>Ausrichtung</summary>

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

</details>

### Labels

<figure><img src="/files/OOk1eQBMK3dPyd8cbH5o" alt=""><figcaption></figcaption></figure>

<details>

<summary>Erstes Label anzeigen</summary>

**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](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen.\
\
Name: `theme.header.top-bar.labelOne`\
Standardwert: 1 Monat Widerrufsrecht

</details>

<details>

<summary>Zweites Label anzeigen</summary>

**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](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen.\
\
Name: `theme.header.top-bar.labelTwo`\
Standardwert: Schneller Versand

</details>

<details>

<summary>Drittes Label anzeigen</summary>

**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](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen.\
\
Name: `theme.header.top-bar.labelThree`\
Standardwert: Made in Germany

</details>

<details>

<summary>Viertes Label anzeigen</summary>

**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](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen.\
\
Name: `theme.header.top-bar.labelFour`\
Standardwert: Support: +49 000 0000

</details>

### Icons

<figure><img src="/files/mR02F363Ya0T5gihj4Qx" alt=""><figcaption></figcaption></figure>

<details>

<summary>Icon für erstes Label</summary>

In diesem Feld kannst du ein passendes [Icon](/en/academy/technical-terms/icon.md) zu deinem zuvor konfigurierten ersten Label bestimmen.

</details>

<details>

<summary>Icon für zweites Label</summary>

In diesem Feld kannst du ein passendes [Icon](/en/academy/technical-terms/icon.md) zu deinem zuvor konfigurierten zweiten Label bestimmen.

</details>

<details>

<summary>Icon für drittes Label</summary>

In diesem Feld kannst du ein passendes [Icon](/en/academy/technical-terms/icon.md) zu deinem zuvor konfigurierten dritten Label bestimmen.

</details>

<details>

<summary>Icon für viertes Label</summary>

In diesem Feld kannst du ein passendes [Icon](/en/academy/technical-terms/icon.md) zu deinem zuvor konfigurierten vierten Label bestimmen.

</details>

### Widgets

<figure><img src="/files/g001JLtxBSp6jhAqDfu1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**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](https://docs.shopware.com/de/shopware-6-de/einstellungen/Verkaufskanaele) definierst, werden anschließend in einem Sprach Schalter in der [Top Bar](/en/academy/technical-terms/top-bar.md) und im [Offcanvas Menü](/en/academy/technical-terms/offcanvas.md) 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](/en/theme-configuration/offcanvas/navigation.md) vorgenommen werden.
{% endhint %}

<details>

<summary>Sprach-Schalter-Icon anzeigen</summary>

**Ja**\
Ein Icon wird vor deinem Sprach Schalter angezeigt.

**Nein**\
Kein Icon wird vor deinem Sprach Schalter angezeigt.

</details>

<details>

<summary>Sprach-Schalter-Layout</summary>

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.

</details>

<details>

<summary>Sprach-Schalter-Dropdown-Layout</summary>

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.

</details>

<details>

<summary>Service Menü</summary>

**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](https://docs.shopware.com/de/shopware-6-de/tutorials-und-faq/einrichtung-des-footers#kategoriestruktur-anlegen) an. Anschließend verknüpfst du diese in den [Verkaufskanal Einstellungen](https://docs.shopware.com/de/shopware-6-de/tutorials-und-faq/einrichtung-des-footers#navigationspunkte-dem-verkaufskanal-zuweisen) im Punkt "Einstiegspunkt für die Footer-Service-Navigation".

</details>

### Typografie

<figure><img src="/files/mhAbSIqXhjF1FEMcdgBZ" alt=""><figcaption></figcaption></figure>

<details>

<summary>Schriftgröße (in px)</summary>

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

</details>

### Farben

<figure><img src="/files/QphtsJacg9hK3rj8L1ux" alt=""><figcaption></figcaption></figure>

<details>

<summary>Hintergrund</summary>

Hiermit kannst du die Hintergrundfarbe der Top Bar bestimmen.

</details>

<details>

<summary>Text Farbe</summary>

Diese Einstellung definiert die Textfarbe aller Text Elemente und [Icons](/en/academy/technical-terms/icon.md) innerhalb der Top Bar.&#x20;

</details>

<details>

<summary>Rahmenfarbe</summary>

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.

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.atloss.de/en/theme-configuration/header/top-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.