Navigation

ThemeWare® Manual

USP bar

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

ThemeWare® "USP bar"

ThemeWare® "USP bar"

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.

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

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

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
  • Tab "Extensions" => Block "USP bar" => Show USP bar in footer
  • Tab "Extensions" => Block "USP bar" => Section "Basic configuration" => Position (Header)
  • Tab "Extensions" => Block "USP bar" => Section "Basic configuration" => Position (Footer)
  • Tab "Extensions" => Block "USP bar" => Section "Basic configuration" => Layout type (Header)
  • Tab "Extensions" => Block "USP bar" => Section "Basic configuration" => Layout type (Footer)
  • Tab "Extensions" => Block "USP bar" => Section "Basic configuration" => Show subtitle (Large icons)
  • Tab "Extensions" => Block "USP bar" => Section "Basic configuration" => Content (Widget)
  • Tab "Extensions" => Block "USP bar" => Section "Basic configuration" => Sizing mode (Header)
  • Tab "Extensions" => Block "USP bar" => Section "Basic configuration" => Sizing mode (Footer)
  • Tab "Extensions" => Block "USP bar" => Section "USPs" => Show benefit #1 from...
  • Tab "Extensions" => Block "USP bar" => Section "USPs" => Show benefit #2 from...
  • Tab "Extensions" => Block "USP bar" => Section "USPs" => Show benefit #3 from...
  • Tab "Extensions" => Block "USP bar" => Section "USPs" => Show benefit #4 from...
  • Tab "Extensions" => Block "USP bar" => Section "USPs" => Show benefit #5 from...
  • Tab "Extensions" => Block "USP bar" => Section "USPs" => Show benefit #6 from...
  • All settings in detail: USP bar

Snippets

  • twt.extension.uspBar.usp1.icon (Icon USP 1)
  • twt.extension.uspBar.usp1.title (Title USP 1)
  • twt.extension.uspBar.usp1.subtitle (Subtitle USP 1)
  • twt.extension.uspBar.usp1.tooltip (Tooltip USP 1)
  • twt.extension.uspBar.usp2.icon (Icon USP 2)
  • twt.extension.uspBar.usp2.title (Title USP 2)
  • twt.extension.uspBar.usp2.subtitle (Subtitle USP 2)
  • twt.extension.uspBar.usp2.tooltip (Tooltip USP 2)
  • twt.extension.uspBar.usp3.icon (Icon USP 3)
  • twt.extension.uspBar.usp3.title (Title USP 3)
  • twt.extension.uspBar.usp3.subtitle (Subtitle USP 3)
  • twt.extension.uspBar.usp3.tooltip (Tooltip USP 3)
  • twt.extension.uspBar.usp4.icon (Icon USP 4)
  • twt.extension.uspBar.usp4.title (Title USP 4)
  • twt.extension.uspBar.usp4.subtitle (Subtitle USP 4)
  • twt.extension.uspBar.usp4.tooltip (Tooltip USP 4)
  • twt.extension.uspBar.usp5.icon (Icon USP 5)
  • twt.extension.uspBar.usp5.title (Title USP 5)
  • twt.extension.uspBar.usp5.subtitle (Subtitle USP 5)
  • twt.extension.uspBar.usp5.tooltip (Tooltip USP 5)
  • twt.extension.uspBar.usp6.icon (Icon USP 6)
  • twt.extension.uspBar.usp6.title (Title USP 6)
  • twt.extension.uspBar.usp6.subtitle (Subtitle USP 6)
  • twt.extension.uspBar.usp6.tooltip (Tooltip USP 6)
  • twt.extension.uspBar.ariaLabel.header (Aria label of the USP bar in the header)
  • twt.extension.uspBar.ariaLabel.footer (Aria label of the USP bar in the footer)
  • All snippets at a glance: Snippets

Last updated on

This page online: https://docs.themeware.design/additional-features/extensions/usp-bar · ThemeWare® Service Portal, service.themeware.design