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
- Open the administration of your shop
- 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.
- Now click on your ThemeWare® theme to start editing
- Switch to the tab "Extensions"
- Open the block "USP bar"
- 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.
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.
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".
Shopware 6 icons
Further information
- Introduction: Editing texts in the theme