# Configuration

## Basic configuration

***

### Show label 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 "Header" => Block "Action buttons" => Section "Basic configuration"

**Technical name**:\
`twt-header-actions-btn-text-show`

***

### Position (Icon)

**Field type**:\
Select

**Available values**:\
• left\
• above

**Example value**:\
`left`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Basic configuration"

**Technical name**:\
`twt-header-actions-btn-icon-position`

***

### Corner type

**Field type**:\
Select

**Available values**:\
• not rounded\
• rounded corners\
• round corners

**Example value**:\
`rounded corners`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Basic configuration"

**Technical name**:\
`twt-header-actions-btn-corner-type`

{% hint style="info" %}
**rounded corners**\
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

**round corners**\
Uses a predefined radius for round corners.
{% endhint %}

## Typography

***

### Font size

**Field type**:\
Number field

**Example value**:\
`14`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Typography"

**Technical name**:\
`twt-header-actions-btn-font-size`

***

### Font weight

**Field type**:\
Select

**Available values**:\
• light\
• normal\
• bold

**Example value**:\
`normal`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Typography"

**Technical name**:\
`twt-header-actions-btn-font-weight`

***

### Line height

**Field type**:\
Number field

**Example value**:\
`35`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Typography"

**Technical name**:\
`twt-header-actions-btn-line-height`

{% hint style="info" %}
This "line height" is ignored with the header type "Header 2.1" and the line height of the "Top bar" is used instead.
{% endhint %}

***

### Icon size

**Field type**:\
Number field

**Example value**:\
`14`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Typography"

**Technical name**:\
`twt-header-actions-btn-icon-font-size`

## Colour configuration

***

### Text colour

**Field type**:\
Color picker

**Example value**:\
`#333333`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Colour configuration"

**Technical name**:\
`twt-header-actions-btn-color`

***

### Text colour @hover

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Colour configuration"

**Technical name**:\
`twt-header-actions-btn-color-hover`

***

### Icon colour

**Field type**:\
Color picker

**Example value**:\
`#333333`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Colour configuration"

**Technical name**:\
`twt-header-actions-btn-icon-color`

***

### Icon colour @hover

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Colour configuration"

**Technical name**:\
`twt-header-actions-btn-icon-color-hover`

***

### Border colour

**Field type**:\
Color picker

**Example value**:\
`#e4e7ea`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Colour configuration"

**Technical name**:\
`twt-header-actions-btn-border-color`

***

### Border colour @hover

**Field type**:\
Color picker

**Example value**:\
`#e6e6e6`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Colour configuration"

**Technical name**:\
`twt-header-actions-btn-border-color-hover`

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Colour configuration"

**Technical name**:\
`twt-header-actions-btn-background-color`

***

### Background colour @hover

**Field type**:\
Color picker

**Example value**:\
`#f6f6f6`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Colour configuration"

**Technical name**:\
`twt-header-actions-btn-background-color-hover`

## Wishlist button

***

### Background colour (Badge)

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Wishlist button"

**Technical name**:\
`twt-header-actions-wishlist-btn-badge-background-color`

## Account button

***

### Show "Logged-in" badge

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`don't show`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Account button"

**Technical name**:\
`twt-header-actions-account-menu-btn-badge-show`

{% hint style="info" %}
Shows the ThemeWare® "Logged-in badge" when the customer is logged in.
{% endhint %}

***

### Background colour (Badge)

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Account button"

**Technical name**:\
`twt-header-actions-account-menu-btn-badge-background-color`

## Cart button

***

### Show price 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 "Header" => Block "Action buttons" => Section "Cart button"

**Technical name**:\
`twt-header-actions-cart-btn-total-show`

***

### Show badge 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 "Header" => Block "Action buttons" => Section "Cart button"

**Technical name**:\
`twt-header-actions-cart-btn-badge-show`

***

### Show label 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 "Header" => Block "Action buttons" => Section "Cart button"

**Technical name**:\
`twt-header-actions-cart-btn-text-show`

***

### Show separator

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`don't show`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Cart button"

**Technical name**:\
`twt-header-actions-cart-btn-separator-show`

***

### Font weight

**Field type**:\
Select

**Available values**:\
• light\
• normal\
• bold

**Example value**:\
`normal`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Cart button"

**Technical name**:\
`twt-header-actions-cart-btn-font-weight`

***

### Text colour

**Field type**:\
Color picker

**Example value**:\
`#333333`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Cart button"

**Technical name**:\
`twt-header-actions-cart-btn-color`

***

### Text colour @hover

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Cart button"

**Technical name**:\
`twt-header-actions-cart-btn-color-hover`

***

### Icon colour

**Field type**:\
Color picker

**Example value**:\
`#333333`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Cart button"

**Technical name**:\
`twt-header-actions-cart-btn-icon-color`

***

### Icon colour @hover

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Cart button"

**Technical name**:\
`twt-header-actions-cart-btn-icon-color-hover`

***

### Border colour

**Field type**:\
Color picker

**Example value**:\
`#e4e7ea`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Cart button"

**Technical name**:\
`twt-header-actions-cart-btn-border-color`

***

### Border colour @hover

**Field type**:\
Color picker

**Example value**:\
`#e6e6e6`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Cart button"

**Technical name**:\
`twt-header-actions-cart-btn-border-color-hover`

***

### Border colour (Separator)

**Field type**:\
Color picker

**Example value**:\
`#e4e7ea`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Cart button"

**Technical name**:\
`twt-header-actions-cart-btn-separator-border-color`

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#eef2f5`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Cart button"

**Technical name**:\
`twt-header-actions-cart-btn-background-color`

***

### Background colour @hover

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Cart button"

**Technical name**:\
`twt-header-actions-cart-btn-background-color-hover`

***

### Background colour (Badge)

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Action buttons" => Section "Cart button"

**Technical name**:\
`twt-header-actions-cart-btn-badge-background-color`