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

# USP-Bar konfigurieren

Die USP-Bar ist eine Leiste mit deinen wichtigsten Verkaufsargumenten, z.B. "Kostenloser Versand" oder "30 Tage Geld-Zurück-Garantie". Sie lässt sich im Header und im Footer anzeigen.

## Schritt 1: USP-Bar aktivieren

1. Öffne die Administration deines Shops
2. Wechsel über die Hauptnavigation in die "**Theme-Verwaltung**" ("Inhalte" => "Themes")
   * **Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
3. Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen
4. Wechsel in den Tab "**Erweiterungen**"
5. Öffne den Bereich "**USP-Bar**"
6. Aktiviere "**USP-Bar im Header anzeigen**" und/oder "**USP-Bar im Footer anzeigen**"

## Schritt 2: Darstellung konfigurieren

Im Abschnitt "**Basiskonfiguration**" stehen dir unter anderem zur Verfügung:

* "**Position (Header)**" und "**Position (Footer)**": wo die Leiste ausgegeben wird
* "**Darstellungsart (Header)**" und "**Darstellungsart (Footer)**": z.B. mit kleinen oder großen Icons
* "**Untertitel anzeigen (große Icons)**"
* "**Höhe (kleine Icons)**" und "**Höhe (große Icons)**"
* "**Vorteile ausrichten (kleine Icons)**" und "**Vorteile ausrichten (große Icons)**"
* "**Inhalt (Widget)**": ein zusätzliches Widget in der USP-Bar

Farben konfigurierst du im Abschnitt "**Farbkonfiguration**", Schriften und Icongrößen im Abschnitt "**Typografie**".

## Schritt 3: Vorteile je Viewport steuern

Im Abschnitt "**USPs**" legst du pro Vorteil fest, ab welchem Viewport er angezeigt wird ("**Vorteil 1 anzeigen ab ...**" und folgende). So zeigst du auf kleinen Bildschirmen nur die wichtigsten Argumente.

## Schritt 4: Texte und Icons bearbeiten

Die Inhalte der USP-Bar pflegst du über Textbausteine:

| Textbaustein                         | Inhalt                            |
| ------------------------------------ | --------------------------------- |
| `twt.extension.uspBar.usp1.title`    | Der Text des ersten Vorteils      |
| `twt.extension.uspBar.usp1.icon`     | Das Icon des ersten Vorteils      |
| `twt.extension.uspBar.usp1.subtitle` | Der Untertitel (bei großen Icons) |
| `twt.extension.uspBar.usp1.tooltip`  | Ein optionaler Tooltip            |

Für die weiteren Vorteile nutzt du entsprechend `usp2`, `usp3` und so weiter.

{% hint style="info" %}
**Info**: Möchtest du einen Vorteil gar nicht ausgeben, stelle im Abschnitt "**USPs**" das Feld "**Vorteil X anzeigen ab ...**" auf "**nicht anzeigen**". Ein leerer Textbaustein blendet den Vorteil nicht aus.
{% endhint %}

#### Shopware 6 Icons

Eine Übersicht aller Icons von Shopware 6 findest du über folgenden Link. In der Theme-Konfiguration bzw. in Textbausteinen von ThemeWare® kannst du die Icons aus dem Icon-Set "default" nutzen.

{% embed url="<https://service.themeware.design/shopware-6-icons>" %}
Shopware 6 Icons
{% endembed %}

***

## Weiterführende Informationen

* Einführung: [Texte im Theme bearbeiten](/wissensdatenbank/einfuehrung/texte-im-theme-bearbeiten.md)

#### ThemeWare® Video-Tutorial

{% embed url="<https://service.themeware.design/themeware-tutorial>" %}
ThemeWare® Video-Tutorial
{% endembed %}