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

# Configuring the USP bar

The USP bar is a bar with your most important selling points, for example "Free shipping" or "30 day money back guarantee". It can be displayed in the header and in the footer.

## Step 1: Activate the USP bar

1. Open the administration of your shop
2. Switch via the main navigation to the "**theme administration**" ("Content" => "Themes")
   * **Note**: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
3. Now click on your ThemeWare® theme to start editing
4. Switch to the tab "**Extensions**"
5. Open the block "**USP bar**"
6. Activate "**Show USP bar in header**" and/or "**Show USP bar in footer**"

## Step 2: Configure the display

The section "**Basic configuration**" offers among others:

* "**Position (Header)**" and "**Position (Footer)**": where the bar is output
* "**Layout type (Header)**" and "**Layout type (Footer)**": for example with small or large icons
* "**Show subtitle (Large icons)**"
* "**Height (Small icons)**" and "**Height (Large icons)**"
* "**Benefit alignment (Small icons)**" and "**Benefit alignment (Large icons)**"
* "**Content (Widget)**": an additional widget in the USP bar

You configure the colours in the section "**Colour configuration**", fonts and icon sizes in the section "**Typography**".

## Step 3: Control the benefits per viewport

In the section "**USPs**" you define for every benefit from which viewport it is displayed ("**Show benefit #1 from...**" and following). This way you only show the most important points on small screens.

## Step 4: Edit texts and icons

You maintain the content of the USP bar with snippets:

| Snippet                              | Content                         |
| ------------------------------------ | ------------------------------- |
| `twt.extension.uspBar.usp1.title`    | The text of the first benefit   |
| `twt.extension.uspBar.usp1.icon`     | The icon of the first benefit   |
| `twt.extension.uspBar.usp1.subtitle` | The subtitle (with large icons) |
| `twt.extension.uspBar.usp1.tooltip`  | An optional tooltip             |

For the other benefits use `usp2`, `usp3` and so on accordingly.

{% hint style="info" %}
**Note**: If you do not want to output a benefit at all, set the field "**Show benefit #X from...**" in the section "**USPs**" to "**don't show**". An empty snippet does not hide the benefit.
{% endhint %}

#### Shopware 6 icons

You will find an overview of all Shopware 6 icons via the following link. In the theme configuration and in snippets of ThemeWare® you can use the icons from the pack "default".

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

***

## Further information

* Introduction: [Editing texts in the theme](/knowledge-base/introduction/editing-texts-in-the-theme.md)