Configuration

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

rounded corners
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

round corners
Uses a predefined radius for round corners.

Typography

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

This "line height" is ignored with the header type "Header 2.1" and the line height of the "Top bar" is used instead.

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

Shows the ThemeWare® "Logged-in badge" when the customer is logged in.

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