LogoLogo
SearchService PortalKnowledge BaseOthersDeutschRequest support
  • Welcome
  • Elements of the storefront
    • Header
    • Footer
    • Category pages
    • Product pages
  • Additional features
    • CMS extensions
      • CMS blocks
        • Hero slider
          • Hero slider (2x)
          • Hero slider (3x)
          • Hero slider (4x)
        • Teaser
        • Banner
        • Columns
          • One column
          • Two columns
          • Two columns (swapped on phones)
          • Two columns, 3-9
          • Two columns, 4-8
          • Two columns, 5-7
          • Two columns, 7-5
          • Two columns, 8-4
          • Two columns, 9-3
          • Three columns
          • Three columns, 2-2-8
          • Three columns, 2-8-2
          • Three columns, 3-3-6
          • Three columns, 3-6-3
          • Three columns, 6-3-3
          • Three columns, 8-2-2
          • Four columns
          • Five columns
          • Six columns
          • Six columns (Custom)
        • Grids
          • Grid 'Modern'
          • Grid 'Modern' (swapped)
          • Grid 'One'
          • Grid 'One' (swapped)
          • Grid 'Two'
          • Grid 'Two' (swapped)
          • Grid 'Three'
          • Grid 'Three' (swapped)
          • Grid 'Four'
          • Grid 'Four' (swapped)
          • Grid 'Five'
          • Grid 'Five' (swapped)
          • Grid 'Six'
          • Grid 'Six' (swapped)
        • Text & images
          • Image & text layered
        • Listing page
        • Product page
          • Product name (without manufacturer logo)
          • Image gallery and buy box (with product name)
          • Image gallery and buy box (with product name & manufacturer logo)
          • Product description & reviews (Accordion)
        • Sidebar
          • Subcategory navigation (Sidebar)
        • Sale
          • Hero countdown
          • Countdown banner
          • Countdown banner (compact)
          • Discount banner
        • Other
          • Breadcrumb navigation
          • Testimonial (Customer review)
          • Testimonials (Four columns)
          • Custom code (HTML/CSS/JS)
      • CMS elements
        • Hero slider
          • Call-to-Action slide (Hero slider)
          • Text slide (Hero slider)
          • Image slide (Hero slider)
        • Teaser
          • Text teaser
          • Text teaser (decorated)
          • Button teaser
          • Call-to-Action
          • Hover box
          • Image teaser
          • Hero teaser
          • Advanced teaser
          • Classic teaser
          • Modern teaser
          • Round teaser
        • Banner
          • Image banner
          • Parallax banner
          • Hero banner
          • Advanced banner
        • Text & images
          • Image & text layered
        • Listing page
          • Listing subcategories
          • Listing subcategories (Modern)
        • Product page
          • Image gallery (Grid)
          • Product description & reviews (Accordion)
        • Sidebar
          • Subcategory navigation
        • Sale
          • Hero countdown (Heading)
          • Countdown banner
          • Countdown banner (compact)
          • Discount banner
        • Other
          • Breadcrumb navigation
          • Testimonial (Customer review)
          • Custom code (HTML/CSS/JS)
    • Custom fields
      • Categories
        • Body class
        • Columns per row
        • Hero section
        • Highlight category
        • Listing subcategories
        • Shopping Experiences Header
      • Products
        • General
          • Benefits
          • Comment
          • Custom field 1
          • Custom field 2
          • Custom field 3
          • Custom tab – Text
          • Custom tab – Title
          • Hover image
          • Short description
        • Datasheets
          • Datasheets (Text)
          • Datasheet 1
          • Datasheet 1 – Title
          • Datasheet 2
          • Datasheet 2 – Title
          • Datasheet 3
          • Datasheet 3 – Title
        • Downloads
          • Download 1
          • Download 1 – Title
          • Download 1 – Description
          • Download 2
          • Download 2 – Title
          • Download 2 – Description
          • Download 3
          • Download 3 – Title
          • Download 3 – Description
        • Further links
          • Further link 1
          • Further link 1 – Title
          • Further link 1 – Open link in a new tab
          • Further link 2
          • Further link 2 – Title
          • Further link 2 – Open link in a new tab
          • Further link 3
          • Further link 3 – Title
          • Further link 3 – Open link in a new tab
        • Videos
          • Product videos (Text)
          • Video 1
          • Video 1 – Title
          • Video 2
          • Video 2 – Title
          • Video 3
          • Video 3 – Title
          • YouTube video(s)
          • Vimeo video(s)
    • Extensions
      • Announcement banner
      • Benefits on product pages
      • Checkout steps
      • Custom announcement
      • Floating widget
      • Hero section
      • Highlight category
      • Labels on product pages
        • Delivery time label
        • Free shipping label
        • Not available label
        • Pre-order label
        • Sold label
        • Stock label
      • Listing subcategories
      • Manufacturer in listings
      • Payment methods on product pages
      • Product badges
        • Discount badge
        • Free shipping badge
        • New badge
        • Sold badge
        • Stock badge
        • Topseller badge
      • Product datasheets
      • Product downloads
      • Product number in listings
      • Product short description
      • Product specifications
      • Product videos
      • Quickview
      • Sharing links
      • Shopping Experiences Header
      • Slideout communities
      • Social media links (icons)
      • Social proofing
        • Sales infotext
      • Tabs on product pages
        • Custom tab
        • Datasheets tab
        • Manufacturer tab
        • Properties tab
        • Videos tab
      • USP bar
    • Media
      • Flag icons
      • Payment method logos
      • Shipping method logos
      • Shopping Experiences
      • Social icons
    • Widgets
      • About us
      • Awards, seals or certificates
      • Benefits
      • Communities or social media
      • Custom text
      • Footer navigation
      • Location or retail store
      • Newsletter
      • Payment and shipping methods
      • Payment logos
      • Service hotline
      • Shipping logos
  • More knowledge
    • Google Fonts
    • JavaScript plugins
    • Payment methods
    • Shipping methods
    • Snippets
  • Configuration
    • Layout
      • Main colours
        • Configuration
      • Status messages
        • Configuration
      • Typography
        • Configuration
      • E-Commerce
        • Configuration
      • Media
        • Configuration
      • Layout
        • Configuration
      • Buttons
        • Configuration
      • Forms
        • Configuration
      • Modals
        • Configuration
      • Product rating
        • Configuration
      • Tables
        • Configuration
    • Header
      • Layout
        • Configuration
      • Logo
        • Configuration
      • Top bar
        • Configuration
      • Search
        • Configuration
      • Action buttons
        • Configuration
      • Top navigation
        • Configuration
      • Top navigation flyout
        • Configuration
      • Sticky top navigation (Basic headers "Header 1" and "Header 2")
        • Configuration
      • Minimal header (in the Checkout)
        • Configuration
      • Mobile header
        • Configuration
      • Shopping Experiences Header
        • Configuration
    • Footer
      • Layout
        • Configuration
      • Upper section
        • Configuration
      • Main section
        • Configuration
      • Lower section
        • Configuration
      • Assigning and arranging content
        • Configuration
      • Minimal footer (in the Checkout)
        • Configuration
      • Logos footer
        • Configuration
      • Copyright footer
        • Configuration
    • Content
      • Breadcrumb
        • Configuration
      • Cookie permission
        • Configuration
      • Offcanvas navigation
        • Configuration
      • Pagination
        • Configuration
      • Product badges
        • Configuration
      • Scroll up button
        • Configuration
      • Sliders
        • Configuration
    • Shopping Experiences
      • All types (Shop pages, Landing pages, Listing pages, Product pages)
        • Configuration
      • Image slider (Category "Images")
        • Configuration
      • Image gallery (Category "Images")
        • Configuration
      • Two columns, boxed image & text (Category "Text & images")
        • Configuration
      • Product slider (Category "Commerce")
        • Configuration
      • Product filter (Category "Sidebar")
        • Configuration
      • Category navigation (Category "Sidebar")
        • Configuration
    • Listing pages
      • Layout (Layout type "Standard")
        • Configuration
      • Layout (Layout type "Big image")
        • Configuration
      • Layout (Layout type "Minimal content")
        • Configuration
      • Product badges (in the product box)
        • Configuration
      • Product box
        • Configuration
      • Product box (Layout type "Standard")
        • Configuration
      • Product box (Layout type "Big image")
        • Configuration
      • Product box (Layout type "Minimal content")
        • Configuration
    • Product pages
      • Layout
        • Configuration
      • Image gallery
        • Configuration
      • Buybox
        • Configuration
      • Delivery information labels (in the buybox)
        • Configuration
      • Product badges (in the image gallery or buybox)
        • Configuration
      • Product specifications (in the buybox)
        • Configuration
      • Product videos (in tabs)
        • Configuration
      • Social proofing (in the buybox)
        • Configuration
      • Sharing links (in the buybox)
        • Configuration
      • Benefits (in the buybox)
        • Configuration
      • Payment logos (in the buybox)
        • Configuration
      • Tabs
        • Configuration
      • Tab "Description"
        • Configuration
      • Tab "Properties"
        • Configuration
      • Tab "Product videos"
        • Configuration
      • Tab "Datasheets"
        • Configuration
      • Tab "Custom content"
        • Configuration
      • Tab "Manufacturer"
        • Configuration
      • Cross Selling
        • Configuration
    • Pages
      • General
        • Configuration
      • Login
        • Configuration
      • My account
        • Configuration
      • Checkout
        • Configuration
    • Sidebar
      • Layout
        • Configuration
      • Sidebar widgets
        • Configuration
      • Sidebar widgets (Headlines)
        • Configuration
      • Sidebar widgets: Assigning and arranging content
        • Configuration
    • Widgets
      • Footer navigation
        • Configuration
      • Awards, seals or certificates
        • Configuration
      • Benefits
        • Configuration
      • Communities or social media
        • Configuration
      • Service hotline
        • Configuration
      • Location or retail store
        • Configuration
      • Newsletter
        • Configuration
      • Payment logos
        • Configuration
      • Shipping logos
        • Configuration
    • Extensions
      • Announcement banner (in the header)
        • Configuration
      • Checkout steps
        • Configuration
      • Custom announcement (on product pages and in the checkout)
        • Configuration
      • Floating widget
        • Configuration
      • Hero section (on listing pages)
        • Configuration
      • Listing subcategories (on listing pages)
        • Configuration
      • Slideout communities
        • Configuration
      • USP bar
        • Configuration
    • Others
      • Advanced settings
        • Configuration
      • Expert settings
        • Configuration
      • Compatibility (HC-Architecture®)
        • Configuration
      • Beta
        • Configuration
      • Deprecated
        • Configuration
  • Miscellaneous
    • About ThemeWare®
    • ThemeWare® Demoshops
    • ThemeWare® Knowledge base
    • ThemeWare® Video Tutorial
    • ThemeWare® Utilities
    • 🇩🇪Deutsch
Powered by GitBook
LogoLogo

ThemeWare®

  • About ThemeWare®
  • ThemeWare® Demoshops
  • ThemeWare® Service Portal
  • ThemeWare® Utilities

Informations

  • Legal notice
  • Newsletter
  • Privacy
  • Support

© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH

On this page
  • Show USP bar in header
  • Show USP bar in footer
  • Basic configuration
  • Position (Header)
  • Position (Footer)
  • Layout type (Header)
  • Layout type (Footer)
  • Content (Widget)
  • Width (Header)
  • Width (Footer)
  • Height (Small icons)
  • Height (Large icons)
  • Benefit alignment (Small icons)
  • Benefit alignment (Large icons)
  • Colour configuration
  • Text colour (Header)
  • Icon colour (Header)
  • Border colour (Header)
  • Background colour (Header)
  • Text colour (Footer)
  • Icon colour (Footer)
  • Border colour (Footer)
  • Background colour (Footer)
  • Typography
  • Font family
  • Font size
  • Font weight
  • Text formatting
  • Icon size (Small icons)
  • Icon size (Large icons)
  • USPs
  • Show benefit #1 from...
  • Show benefit #2 from...
  • Show benefit #3 from...
  • Show benefit #4 from...
  • Show benefit #5 from...
  • Show benefit #6 from...

Was this helpful?

  1. Configuration
  2. Extensions
  3. USP bar

Configuration


Show USP bar in header

Field type: Select

Available values: • don't show • show

Example value: show

Path to the configuration: Tab "Extensions" => Block "USP bar"

Technical name: twt-usp-bar-header

Shows the ThemeWare® "USP bar" in the header.

To edit or translate the content please use the following snippets: twt.extension.uspBar...


Show USP bar in footer

Field type: Select

Available values: • don't show • show

Example value: show

Path to the configuration: Tab "Extensions" => Block "USP bar"

Technical name: twt-usp-bar-footer

Shows the ThemeWare® "USP bar" in the footer.

To edit or translate the content please use the following snippets: twt.extension.uspBar...

Basic configuration


Position (Header)

Field type: Select

Available values: • above header • above navigation • below header

Example value: above header

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"

Technical name: twt-usp-bar-header-position

Please note that in the "Custom header" and in the "Shopping Experiences Header" only the position "above the header" is supported.


Position (Footer)

Field type: Select

Available values: • above footer

Example value: above footer

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"

Technical name: twt-usp-bar-footer-position


Layout type (Header)

Field type: Select

Available values: • Small icons • Small icons + Top bar • Small icons + Widget

Example value: Small icons

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"

Technical name: twt-usp-bar-header-layout

Small icons Small icon on the left side of the label.

Small icons + Top bar The default "Top bar" is moved to the "USP bar". (If you have problems with plugins that modify the "Top bar", please use a different layout)

Small icons + Widget A ThemeWare® widget can be placed in the right-hand area with the "Content (widget)" configuration.


Layout type (Footer)

Field type: Select

Available values: • Small icons • Large icons • Large icons with subtitles

Example value: Small icons

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"

Technical name: twt-usp-bar-footer-layout

Small icons Small icon on the left side of the label.

Large icons Large icon above the label.


Content (Widget)

Field type: Select

Available values: • don't show • Communities or social media

Example value: Communities or social media

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"

Technical name: twt-usp-bar-widget-content

You can find the configuration of the widgets in the tab "Widgets".


Width (Header)

Field type: Select

Available values: • Container-Max-Width (Full-width-boxed) • 100% (Full-width)

Example value: Container-Max-Width (Full-width-boxed)

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"

Technical name: twt-usp-bar-header-width

Select the sizing mode of the "Usp bar".


Width (Footer)

Field type: Select

Available values: • Container-Max-Width (Full-width-boxed) • 100% (Full-width)

Example value: Container-Max-Width (Full-width-boxed)

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"

Technical name: twt-usp-bar-width

Select the sizing mode of the "Usp bar".


Height (Small icons)

Field type: Number field

Example value: 40

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"

Technical name: twt-usp-bar-height-small-icons

Note: This configuration relates to the layout type "Small icons".


Height (Large icons)

Field type: Number field

Example value: 110

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"

Technical name: twt-usp-bar-height-large-icons

Note: This configuration relates to the layout type "Large icons".


Benefit alignment (Small icons)

Field type: Select

Available values: • align left • align right • align center • space-between • space-around

Example value: space-between

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"

Technical name: twt-usp-bar-small-icons-justify-content

Note: This configuration relates to the layout type "Small icons".

left Items are positioned at the beginning of the container.

right Items are positioned at the end of the container.

center Items are positioned at the center of the container.

space-between Items are positioned with space between them.

space-around Items are positioned with space before, between, and after them.


Benefit alignment (Large icons)

Field type: Select

Available values: • align left • align right • align center • space-between • space-around

Example value: space-around

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"

Technical name: twt-usp-bar-large-icons-justify-content

Note: This configuration relates to the layout type "Large icons".

left Items are positioned at the beginning of the container.

right Items are positioned at the end of the container.

center Items are positioned at the center of the container.

space-between Items are positioned with space between them.

space-around Items are positioned with space before, between, and after them.

Colour configuration


Text colour (Header)

Field type: Color picker

Example value: #263842

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Colour configuration"

Technical name: twt-usp-bar-header-color


Icon colour (Header)

Field type: Color picker

Example value: #263842

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Colour configuration"

Technical name: twt-usp-bar-header-icon-color


Border colour (Header)

Field type: Color picker

Example value: #eef2f5

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Colour configuration"

Technical name: twt-usp-bar-header-border-color


Background colour (Header)

Field type: Color picker

Example value: #eef2f5

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Colour configuration"

Technical name: twt-usp-bar-header-background-color


Text colour (Footer)

Field type: Color picker

Example value: #555555

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Colour configuration"

Technical name: twt-usp-bar-footer-color


Icon colour (Footer)

Field type: Color picker

Example value: #555555

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Colour configuration"

Technical name: twt-usp-bar-footer-icon-color


Border colour (Footer)

Field type: Color picker

Example value: #e5ebf0

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Colour configuration"

Technical name: twt-usp-bar-footer-border-color


Background colour (Footer)

Field type: Color picker

Example value: #eef2f5

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Colour configuration"

Technical name: twt-usp-bar-footer-background-color

Typography


Font family

Field type: Select

Available values: • Text • Headlines

Example value: Text

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Typography"

Technical name: twt-usp-bar-font-family


Font size

Field type: Number field

Example value: 14

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Typography"

Technical name: twt-usp-bar-font-size


Font weight

Field type: Select

Available values: • light • normal • bold

Example value: normal

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Typography"

Technical name: twt-usp-bar-font-weight


Text formatting

Field type: Select

Available values: • none • uppercase • lowercase • capitalize

Example value: none

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Typography"

Technical name: twt-usp-bar-text-transform


Icon size (Small icons)

Field type: Number field

Example value: 15

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Typography"

Technical name: twt-usp-bar-icon-size-small

Note: This configuration relates to the layout type "Small icons".


Icon size (Large icons)

Field type: Number field

Example value: 48

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Typography"

Technical name: twt-usp-bar-icon-size-large

Note: This configuration relates to the layout type "Large icons".

USPs


Show benefit #1 from...

Field type: Select

Available values: • don't show • Phone (portrait) (<576px) • Phone (landscape) (≥576px) • Tablet (portrait) (≥768px) • Tablet (landscape) (≥992px) • Desktop (≥1200px) • Container-max-width (Full-width-boxed)

Example value: Phone (portrait) (<576px)

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "USPs"

Technical name: twt-usp-bar-breakpoint-item-1

To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp1.title and twt.extension.uspBar.usp1.icon


Show benefit #2 from...

Field type: Select

Available values: • don't show • Phone (portrait) (<576px) • Phone (landscape) (≥576px) • Tablet (portrait) (≥768px) • Tablet (landscape) (≥992px) • Desktop (≥1200px) • Container-max-width (Full-width-boxed)

Example value: Phone (landscape) (≥576px)

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "USPs"

Technical name: twt-usp-bar-breakpoint-item-2

To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp2.title and twt.extension.uspBar.usp2.icon


Show benefit #3 from...

Field type: Select

Available values: • don't show • Phone (portrait) (<576px) • Phone (landscape) (≥576px) • Tablet (portrait) (≥768px) • Tablet (landscape) (≥992px) • Desktop (≥1200px) • Container-max-width (Full-width-boxed)

Example value: Tablet (portrait) (≥768px)

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "USPs"

Technical name: twt-usp-bar-breakpoint-item-3

To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp3.title and twt.extension.uspBar.usp3.icon


Show benefit #4 from...

Field type: Select

Available values: • don't show • Phone (portrait) (<576px) • Phone (landscape) (≥576px) • Tablet (portrait) (≥768px) • Tablet (landscape) (≥992px) • Desktop (≥1200px) • Container-max-width (Full-width-boxed)

Example value: Tablet (landscape) (≥992px)

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "USPs"

Technical name: twt-usp-bar-breakpoint-item-4

To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp4.title and twt.extension.uspBar.usp4.icon


Show benefit #5 from...

Field type: Select

Available values: • don't show • Phone (portrait) (<576px) • Phone (landscape) (≥576px) • Tablet (portrait) (≥768px) • Tablet (landscape) (≥992px) • Desktop (≥1200px) • Container-max-width (Full-width-boxed)

Example value: don't show

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "USPs"

Technical name: twt-usp-bar-breakpoint-item-5

To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp5.title and twt.extension.uspBar.usp5.icon


Show benefit #6 from...

Field type: Select

Available values: • don't show • Phone (portrait) (<576px) • Phone (landscape) (≥576px) • Tablet (portrait) (≥768px) • Tablet (landscape) (≥992px) • Desktop (≥1200px) • Container-max-width (Full-width-boxed)

Example value: Container-max-width (Full-width-boxed)

Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "USPs"

Technical name: twt-usp-bar-breakpoint-item-6

To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp6.title and twt.extension.uspBar.usp6.icon

PreviousUSP barNextOthers

Last updated 9 months ago

Was this helpful?