> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/zusatzfunktionen/erweiterungen/usp-bar.md).

# USP-Bar

Die **USP-Bar** zeigt zentrale Verkaufsargumente (USPs) als kompakte Leiste – wahlweise im Header und/oder im Footer.

<figure><img src="/files/LfW8G9H7XGNVq4v31hr6" alt=""><figcaption><p>ThemeWare® "USP-Bar"</p></figcaption></figure>

{% hint style="info" %}
**Hinweis**: Die USP-Bar wird im Header und/oder im Footer angezeigt, je nachdem welche der beiden Konfigurationen ("USP-Bar im Header anzeigen" / "USP-Bar im Footer anzeigen") aktiviert ist. Die Inhalte der einzelnen USPs pflegst du über Textbausteine.
{% endhint %}

***

## Konfiguration

### **Theme-Konfiguration**

1. Wechsel in den Tab "**Erweiterungen**"
2. Öffne den Bereich "**USP-Bar**"
3. Aktiviere "**USP-Bar im Header anzeigen**" und/oder "**USP-Bar im Footer anzeigen**"
4. Speicher deine Änderungen nach der Bearbeitung

### **Inhalt**

* Pro USP (1–6) pflegst du Icon, Titel, Untertitel und Tooltip jeweils über einen eigenen Textbaustein – exemplarisch für USP 1:
  * `twt.extension.uspBar.usp1.icon`
  * `twt.extension.uspBar.usp1.title`
  * `twt.extension.uspBar.usp1.subtitle`
  * `twt.extension.uspBar.usp1.tooltip`

{% hint style="info" %}
**Hinweis**: Wie du Textbausteine bearbeitest erfährst du in folgender Anleitung: [Texte bearbeiten und übersetzen](https://wiki.themeware.design/wissensdatenbank/anleitungen/texte-bearbeiten-und-uebersetzen)
{% endhint %}

{% hint style="success" %}
**Tipp**: Wirkt sich eine Änderung nicht auf die Storefront aus, leere einfach einmal den Shopware Cache: [Shopware Cache leeren / aufwärmen](https://wiki.themeware.design/wissensdatenbank/anleitungen/sonstiges/shopware-cache-leeren)
{% endhint %}

***

## Optionen

* **Position (Header)**
  * Platziert die Leiste "über dem Header", "über der Navigation" oder "unter dem Header". (Der Full-width Sticky-Header und der Erlebniswelt-Header unterstützen nur "über dem Header".)
* **Position (Footer)**
  * Platziert die Leiste "über dem Footer".
* **Darstellungsart (Header)**
  * "kleine Icons", "kleine Icons + Top-Bar" (verschiebt die Top-Bar in die USP-Bar) oder "kleine Icons + Widget" (platziert rechts ein Widget, siehe "Inhalt (Widget)").
* **Darstellungsart (Footer)**
  * "kleine Icons", "große Icons, Text unterhalb" oder "große Icons, Text daneben".
* **Untertitel anzeigen (große Icons)**
  * Blendet den Untertitel unter dem Titel ein – nur bei Darstellungsarten mit großen Icons.
* **Inhalt (Widget)**
  * Wählt das Widget für die Darstellungsart "kleine Icons + Widget": "nicht anzeigen" oder "Communities bzw. Social Media" (Konfiguration im Tab "Widgets").
* **Größenmodus (Header)** / **Größenmodus (Footer)**
  * Breite der Leiste: "Container-Max-Width (Full-width Boxed)" oder "100% (Full-width)".
* **Vorteil 1–6 anzeigen ab ...** (Abschnitt "USPs")
  * Steuert je USP, ab welchem Breakpoint er erscheint (z.B. "Phone (Hochformat) (<576px)", "Tablet (Hochformat) (≥768px)", "Desktop (≥1200px)") oder "nicht anzeigen".

***

## Zusammenfassung

#### Theme-Konfiguration

* Tab "Erweiterungen" => Bereich "USP-Bar" => USP-Bar im Header anzeigen / USP-Bar im Footer anzeigen
* Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Basiskonfiguration" => Position (Header/Footer) / Darstellungsart (Header/Footer) / Untertitel anzeigen (große Icons) / Inhalt (Widget) / Größenmodus (Header/Footer)
* Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "USPs" => Vorteil 1–6 anzeigen ab ...

#### Textbausteine

* **Icons**
  * `twt.extension.uspBar.usp1.icon`
  * `twt.extension.uspBar.usp2.icon`
  * `twt.extension.uspBar.usp3.icon`
  * `twt.extension.uspBar.usp4.icon`
  * `twt.extension.uspBar.usp5.icon`
  * `twt.extension.uspBar.usp6.icon`
* **Titel**
  * `twt.extension.uspBar.usp1.title`
  * `twt.extension.uspBar.usp2.title`
  * `twt.extension.uspBar.usp3.title`
  * `twt.extension.uspBar.usp4.title`
  * `twt.extension.uspBar.usp5.title`
  * `twt.extension.uspBar.usp6.title`
* **Untertitel**
  * `twt.extension.uspBar.usp1.subtitle`
  * `twt.extension.uspBar.usp2.subtitle`
  * `twt.extension.uspBar.usp3.subtitle`
  * `twt.extension.uspBar.usp4.subtitle`
  * `twt.extension.uspBar.usp5.subtitle`
  * `twt.extension.uspBar.usp6.subtitle`
* **Tooltips**
  * `twt.extension.uspBar.usp1.tooltip`
  * `twt.extension.uspBar.usp2.tooltip`
  * `twt.extension.uspBar.usp3.tooltip`
  * `twt.extension.uspBar.usp4.tooltip`
  * `twt.extension.uspBar.usp5.tooltip`
  * `twt.extension.uspBar.usp6.tooltip`
* **Aria-Label**
  * `twt.extension.uspBar.ariaLabel.header`
  * `twt.extension.uspBar.ariaLabel.footer`