# Top Bar

### Übersicht

Neben der [Top Bar](https://docs.atloss.de/en/academy/technical-terms/top-bar) für den [Header](https://docs.atloss.de/en/theme-configuration/header/top-bar), 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](https://docs.atloss.de/en/academy/technical-terms/footer) dargestellt.

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/2FXOqTCYIdwCMhucLxMa/footer-top-bar.webp" 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="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/QsOl15qVRrJayEPeD511/top-bar-grundeinstellungen.webp" 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="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/dIghxW3o8JjQhsuf4Vfu/footer-top-bar-medien.webp" 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="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/rMyPtTPEZrnUWynOSVx9/footer-top-bar-farben.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Hintergrund</summary>

Lege die Hintergrundfarbe der Footer Top Bar fest. Standardmäßig wird hier die [Primärfarbe](https://docs.atloss.de/en/general/theme-colors#primaerfarbe) über eine [Variable](https://docs.atloss.de/en/academy/technical-terms/variable) verknüpft.

</details>

<details>

<summary>Text Farbe</summary>

Lege die Textfarbe innerhalb der Footer Top Bar fest.

</details>

### Typografie

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/Y5jFSDyyYQOLaIPabbYy/footer-top-bar-typografie.webp" 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](https://docs.atloss.de/en/theme-configuration/general/typography) 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>