# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.themeware.design/manual/extensions/usp-bar/configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.