All pages
Powered by GitBook
1 of 1

Loading...

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


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


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


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


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


Field type: Select

Available values: • don't show • show

Example value: don't show

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

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


Field type: Select

Available values: • light • normal • bold

Example value: bold

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

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


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


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


Field type: Number field

Example value: 36

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

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


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


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


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


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


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


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

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)

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

Position (Footer)

Layout type (Header)

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)

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

Large icons Large icon above the label.

Show subtitle (Large icons)

Show subtitles below the title. Only applies to layout types with large icons.

Content (Widget)

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

Sizing mode (Header)

Select the sizing mode of the "Usp bar".

Sizing mode (Footer)

Select the sizing mode of the "Usp bar".

Height (Small icons)

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

Height (Large icons)

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

Benefit alignment (Small icons)

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)

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)

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 (Small icons)

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

Font weight (Large icons)

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

Text formatting

Icon size (Small icons)

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

Icon size (Large icons)

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

USPs

Show benefit #1 from...

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

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

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

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

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

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