The USP bar shows key selling points (USPs) as a compact bar – optionally in the header and/or the footer.
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.
Go to the "Extensions" tab
Expand the "USP bar" block
Enable "Show USP bar in header" and/or "Show USP bar in footer"
Save your changes after editing
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
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)
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 ...
Icons
twt.extension.uspBar.usp1.icon
twt.extension.uspBar.usp2.icon
twt.extension.uspBar.usp1.subtitle
twt.extension.uspBar.usp1.tooltip
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".
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
Note: For information on how to edit snippets, see the following instructions: Texts: Editing and translation
Tip: If a change does not affect the storefront, just clear the Shopware cache: Clearing / warming up the Shopware cache