# Top Bar

### Übersicht

Neben der [Top Bar](/academy/fachbegriffe/top-bar.md) für den [Header](/theme-konfiguration/header/top-bar.md), bietet dir das Theme in diesem Abschnitt ebenfalls die Möglichkeit eine Top Bar für den Footer zu konfigurieren. Diese wird standardmäßig direkt über dem eigentlichen [Footer](/academy/fachbegriffe/footer.md) dargestellt.

<figure><img src="/files/hKcf4kywsugjngpWqQr4" alt=""><figcaption><p>Footer Top Bar unseres Kunden <a href="https://www.profeline-katzenshop.de/">https://www.profeline-katzenshop.de/</a></p></figcaption></figure>

Du hast hierbei die Möglichkeit ein Newsletter Formular präsent in deinem Shop zu integrieren. Außerdem können zusätzliche Besonderheiten und Alleinstellungsmerkmale mittels [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) und [Medien](#medien) angefügt werden.

### Grundeinstellungen

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

<details>

<summary>Newsletter</summary>

**Text links, Formular rechts**\
Blendet ein Newsletter Formular ein. Hierbei wird eine Überschrift mit kurzem Text, sowie ein dazugehöriges Formular in deiner Footer Top Bar integriert. Überschrift und Text lassen sich hierbei über die [Textbausteine](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) wie folgt anpassen:

Überschrift: `theme.footer.top-bar.newsletterHeadline`\
Text: `theme.footer.top-bar.newsletterParagraph`

**Ausblenden**\
Es wird kein Newsletter Formular in der Footer Top Bar eingebunden.

</details>

<details>

<summary>Bezeichnungen</summary>

**Rechts neben dem Bild**\
Mit dieser Option werden fünf Bezeichnungen in der Footer Top Bar eingebunden. Dazu können im [nachfolgenden Abschnitt](#medien) noch fünf passende Bilder zu den Bezeichnungen verknüpft werden. Die Bezeichnungen lassen sich dabei wie gewohnt über die nachfolgenden [Textbausteine](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) auf deine Bedürfnisse anpassen:

Erste Bezeichnung: `theme.footer.top-bar.labelOne`\
Zweite Bezeichnung: `theme.footer.top-bar.labelTwo`\
Dritte Bezeichnung: `theme.footer.top-bar.labelThree`\
Vierte Bezeichnung: `theme.footer.top-bar.labelFour`\
Fünfte Bezeichnung: `theme.footer.top-bar.labelFive`

**Ausblenden**\
Es werden keine Bezeichnungen in der Footer Top Bar integriert.

</details>

<details>

<summary>Bezeichnungen ohne Bild anzeigen</summary>

**Ja**\
Bezeichnungen werden auch ohne hinterlegtem Bild angezeigt. Mit dieser Einstellung bist du nicht gezwungen ein Bild für jede Bezeichnung zu hinterlegen, um sie in der Footer Top Bar zu darzustellen.

**Nein**\
Die Bezeichnungen werden nur mit hinterlegtem Bild angezeigt.

</details>

<details>

<summary>Größe der Bilder (in px)</summary>

Mit dieser Einstellung kannst du die Größe der nachfolgenden Bilder anpassen.

</details>

### Medien

{% hint style="info" %}
Damit die verknüpften Medien aus der nachfolgenden Konfiguration in der Footer Top Bar angezeigt werden, dürfen die [Bezeichnungen](#bezeichnungen) nicht ausgeblendet werden.
{% endhint %}

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

<details>

<summary>Erstes Bild</summary>

Verknüpfe das erste Bild zur ersten Bezeichnung.

</details>

<details>

<summary>Zweites Bild</summary>

Verknüpfe das zweite Bild zur zweiten Bezeichnung.

</details>

<details>

<summary>Drittes Bild</summary>

Verknüpfe das dritte Bild zur dritten Bezeichnung.

</details>

<details>

<summary>Viertes Bild</summary>

Verknüpfe das vierte Bild zur vierten Bezeichnung.

</details>

<details>

<summary>Fünftes Bild</summary>

Verknüpfe das fünfte Bild zur fünften Bezeichnung.

</details>

### Farben

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

<details>

<summary>Hintergrund</summary>

Lege die Hintergrundfarbe der Footer Top Bar fest. Standardmäßig wird hier die [Primärfarbe](/theme-konfiguration/allgemein/theme-farben.md#primaerfarbe) über eine [Variable](/academy/fachbegriffe/variable.md) verknüpft.

</details>

<details>

<summary>Text Farbe</summary>

Lege die Textfarbe innerhalb der Footer Top Bar fest.

</details>

### Typografie

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

<details>

<summary>Schriftstärke der Bezeichnungen</summary>

Definiert die Schriftstärke aller [Bezeichnungen](#bezeichnungen) in der Footer Top Bar. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie.md) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Bezeichnungen in Großbuchstaben</summary>

**Ja**\
Gibt dir die Möglichkeit alle [Bezeichnungen](#bezeichnungen) innerhalb der Footer Top Bar groß zu schreiben.

**Nein**\
Zeigt die [Bezeichnungen](#bezeichnungen) so an, wie sie in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) hinterlegt wurden.

</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/theme-konfiguration/footer/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.