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