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 / 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

Last updated on

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