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

# USP bar

The **USP bar** shows key selling points (USPs) as a compact bar – optionally in the header and/or the footer.

<figure><img src="/files/rF9NwK2SqXZtVdGgpC1R" alt=""><figcaption><p>ThemeWare® "USP bar"</p></figcaption></figure>

{% hint style="info" %}
**Note**: The USP bar is shown in the header and/or footer, depending on which of the two configurations ("Show USP bar in header" / "Show USP bar in footer") is enabled. The content of the individual USPs is maintained via snippets.
{% endhint %}

***

## Configuration

### **Theme configuration**

1. Go to the "**Extensions**" tab
2. Expand the "**USP bar**" block
3. Enable "**Show USP bar in header**" and/or "**Show USP bar in footer**"
4. Save your changes after editing

### **Content**

* For each USP (1–6) you maintain the icon, title, subtitle and tooltip via a dedicated snippet – shown here for USP 1 as an example:
  * `twt.extension.uspBar.usp1.icon`
  * `twt.extension.uspBar.usp1.title`
  * `twt.extension.uspBar.usp1.subtitle`
  * `twt.extension.uspBar.usp1.tooltip`

{% hint style="info" %}
**Note**: For information on how to edit snippets, see the following instructions: [Texts: Editing and translation](https://knowledge.themeware.design/knowledge-base/tutorials/texts-editing-and-translation)
{% endhint %}

{% hint style="success" %}
**Tip**: If a change does not affect the storefront, just clear the Shopware cache: [Clearing / warming up the Shopware cache](https://knowledge.themeware.design/knowledge-base/tutorials/miscellaneous/clearing-the-shopware-cache)
{% endhint %}

***

## Options

* **Position (Header)**
  * Places the bar "above the header", "above the navigation" or "below the header". (The full-width sticky header and the shopping experience header only support "above the header".)
* **Position (Footer)**
  * Places the bar "above the footer".
* **Layout type (Header)**
  * "Small icons", "Small icons + Top bar" (moves the top bar into the USP bar) or "Small icons + Widget" (places a widget on the right, see "Content (Widget)").
* **Layout type (Footer)**
  * "Small icons", "Large icons, text below" or "Large icons, text beside".
* **Show subtitle (Large icons)**
  * Shows the subtitle below the title – only for layout types with large icons.
* **Content (Widget)**
  * Selects the widget for the "Small icons + Widget" layout type: "don't show" or "Communities or social media" (configured in the "Widgets" tab).
* **Sizing mode (Header)** / **Sizing mode (Footer)**
  * Width of the bar: "Container-Max-Width (Full-width Boxed)" or "100% (Full-width)".
* **Show benefit #1–6 from ...** (section "USPs")
  * Controls, per USP, from which breakpoint it appears (e.g. "Phone (portrait) (<576px)", "Tablet (portrait) (≥768px)", "Desktop (≥1200px)") or "don't show".

***

## Summary

#### Theme configuration

* Tab "Extensions" => Block "USP bar" => Show USP bar in header / Show USP bar in footer
* Tab "Extensions" => Block "USP bar" => Section "Basic configuration" => Position (Header/Footer) / Layout type (Header/Footer) / Show subtitle (Large icons) / Content (Widget) / Sizing mode (Header/Footer)
* Tab "Extensions" => Block "USP bar" => Section "USPs" => Show benefit #1–6 from ...

#### Snippets

* **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`
* **Titles**
  * `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`
* **Subtitles**
  * `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`