# Configuration

## Basic configuration

***

### Layout type

**Field type**:\
Select

**Available values**:\
• default\
• Sales Promoting Navigation

**Example value**:\
`default`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Basic configuration"

**Technical name**:\
`twt-header-phone-type`

{% hint style="info" %}
The layout type "Sales Promoting Navigation" moves the navigation to the bottom of the screen for better accessibility on smartphones.

**Note:** Please use the layout type "default" if a third party plugin does not support the "Sales Promoting Navigation".
{% endhint %}

***

### Maximum width (Logo) @Phone (<576px)

**Field type**:\
Text field

**Example value**:\
`160`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Basic configuration"

**Technical name**:\
`twt-header-logo-max-width-mobile`

***

### Height (Header) @Phone (<576px)

**Field type**:\
Text field

**Example value**:\
`50`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Basic configuration"

**Technical name**:\
`twt-header-height-mobile`

{% hint style="info" %}
Only available with the active layout type "Sales Promoting Navigation".
{% endhint %}

***

### Fixed

**Field type**:\
Select

**Available values**:\
• no\
• yes

**Example value**:\
`yes`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Basic configuration"

**Technical name**:\
`twt-header-phone-fixed`

## Colour configuration

***

### Background colour

**Field type**:\
Color picker

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

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Colour configuration"

**Technical name**:\
`twt-header-phone-background-color`

## Action buttons

***

### Text colour

**Field type**:\
Color picker

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

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

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

***

### Text colour @hover

**Field type**:\
Color picker

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

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

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

***

### Icon colour

**Field type**:\
Color picker

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

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

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

***

### Icon colour @hover

**Field type**:\
Color picker

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

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

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

***

### Border colour

**Field type**:\
Color picker

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

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

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

***

### Border colour @hover

**Field type**:\
Color picker

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

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

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

***

### Background colour

**Field type**:\
Color picker

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

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

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

***

### Background colour @hover

**Field type**:\
Color picker

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

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

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

## Sales Promoting Navigation

***

### Layout type

**Field type**:\
Select

**Available values**:\
• default\
• Clean\
• Center

**Example value**:\
`default`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Sales Promoting Navigation"

**Technical name**:\
`twt-header-phone-nav-type`

***

### Height (Navigation) @Phone (<576px)

**Field type**:\
Text field

**Example value**:\
`70`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Sales Promoting Navigation"

**Technical name**:\
`twt-header-phone-nav-height`

{% hint style="info" %}
Only available with the active layout type "Sales Promoting Navigation".
{% endhint %}

***

### Logo position @Phone (<576px)

**Field type**:\
Select

**Available values**:\
• left\
• center\
• right

**Example value**:\
`center`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Sales Promoting Navigation"

**Technical name**:\
`twt-header-phone-logo-position`

***

### Background colour (Navigation)

**Field type**:\
Color picker

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

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Sales Promoting Navigation"

**Technical name**:\
`twt-header-phone-nav-background-color`

***

### Drop shadow

**Field type**:\
Text field

**Example value**:\
`0 0 20px`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Sales Promoting Navigation"

**Technical name**:\
`twt-header-phone-nav-box-shadow`

***

### Shadow colour

**Field type**:\
Color picker

**Example value**:\
`rgba(0, 0, 0, 0.1)`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Sales Promoting Navigation"

**Technical name**:\
`twt-header-phone-nav-box-shadow-color`

***

### Corner type (Action buttons)

**Field type**:\
Select

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

**Example value**:\
`round corners`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Sales Promoting Navigation"

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

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

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

***

### Show home button (Action button)

**Field type**:\
Select

**Available values**:\
• no (default)\
• yes

**Example value**:\
`no (default)`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Sales Promoting Navigation"

**Technical name**:\
`twt-header-phone-btn-home`

***

### Order: Home button (Action button)

**Field type**:\
Number field

**Example value**:\
`100`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Sales Promoting Navigation"

**Technical name**:\
`twt-header-phone-btn-home-order`

***

### Order: Navigation button (Action button)

**Field type**:\
Number field

**Example value**:\
`200`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Sales Promoting Navigation"

**Technical name**:\
`twt-header-phone-btn-navigation-order`

***

### Order: Search button (Action button)

**Field type**:\
Number field

**Example value**:\
`300`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Sales Promoting Navigation"

**Technical name**:\
`twt-header-phone-btn-search-order`

***

### Order: Cart button (Action button)

**Field type**:\
Number field

**Example value**:\
`400`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Sales Promoting Navigation"

**Technical name**:\
`twt-header-phone-btn-cart-order`

***

### Order: Wishlist button (Action button)

**Field type**:\
Number field

**Example value**:\
`500`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Sales Promoting Navigation"

**Technical name**:\
`twt-header-phone-btn-wishlist-order`

***

### Order: Account button (Action button)

**Field type**:\
Number field

**Example value**:\
`600`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Sales Promoting Navigation"

**Technical name**:\
`twt-header-phone-btn-account-order`

***

### Cart button highlighting

**Field type**:\
Select

**Available values**:\
• no\
• yes

**Example value**:\
`yes`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Sales Promoting Navigation"

**Technical name**:\
`twt-header-phone-cart-btn-highlighting`

{% hint style="info" %}
Only available with the active layout type "Sales Promoting Navigation".
{% endhint %}

## Basic headers "Header 1" and "Header 2"

***

### Show hamburger menu label @Phone (<576px)

**Field type**:\
Select

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

**Example value**:\
`show`

**Path to the configuration**:\
Tab "Header" => Block "Mobile header" => Section "Basic headers "Header 1" and "Header 2""

**Technical name**:\
`twt-header-phone-nav-main-toggle-label-show`