# 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`

{% hint style="info" %}
Shows the ThemeWare® "USP bar" in the header.

To edit or translate the content please use the following snippets: **twt.extension.uspBar...**
{% endhint %}

***

### 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`

{% hint style="info" %}
Shows the ThemeWare® "USP bar" in the footer.

To edit or translate the content please use the following snippets: **twt.extension.uspBar...**
{% endhint %}

## 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`

{% hint style="info" %}
Please note that in the "Custom header" and in the "Shopping Experiences Header" only the position "above the header" is supported.
{% endhint %}

***

### 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`

{% hint style="info" %}
**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.
{% endhint %}

***

### 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`

{% hint style="info" %}
**Small icons**\
Small icon on the left side of the label.

**Large icons**\
Large icon above the label.
{% endhint %}

***

### 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`

{% hint style="info" %}
You can find the configuration of the widgets in the tab "Widgets".
{% endhint %}

***

### Sizing mode (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`

{% hint style="info" %}
Select the sizing mode of the "Usp bar".
{% endhint %}

***

### Sizing mode (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`

{% hint style="info" %}
Select the sizing mode of the "Usp bar".
{% endhint %}

***

### 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`

{% hint style="info" %}
**Note**: This configuration relates to the layout type "Small icons".
{% endhint %}

***

### 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`

{% hint style="info" %}
**Note**: This configuration relates to the layout type "Large icons".
{% endhint %}

***

### 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`

{% hint style="info" %}
**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.
{% endhint %}

***

### 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`

{% hint style="info" %}
**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.
{% endhint %}

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

**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`

{% hint style="info" %}
**Note**: This configuration relates to the layout type "Small icons".
{% endhint %}

***

### Font weight (Large icons)

**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`

{% hint style="info" %}
**Note**: This configuration relates to the layout type "Large icons".
{% endhint %}

***

### 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`

{% hint style="info" %}
**Note**: This configuration relates to the layout type "Small icons".
{% endhint %}

***

### Icon size (Large icons)

**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`

{% hint style="info" %}
**Note**: This configuration relates to the layout type "Large icons".
{% endhint %}

## 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`

{% hint style="info" %}
To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp1.title and twt.extension.uspBar.usp1.icon
{% endhint %}

***

### 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`

{% hint style="info" %}
To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp2.title and twt.extension.uspBar.usp2.icon
{% endhint %}

***

### 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`

{% hint style="info" %}
To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp3.title and twt.extension.uspBar.usp3.icon
{% endhint %}

***

### 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`

{% hint style="info" %}
To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp4.title and twt.extension.uspBar.usp4.icon
{% endhint %}

***

### 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`

{% hint style="info" %}
To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp5.title and twt.extension.uspBar.usp5.icon
{% endhint %}

***

### 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`

{% hint style="info" %}
To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp6.title and twt.extension.uspBar.usp6.icon
{% endhint %}