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
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
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
Last updated
