# Configuration

***

### Show 'Hero section' (CMS listing pages)

**Field type**:\
Select

**Available values**:\
• don't show\
• show\
• show (via custom field)

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

**Path to the configuration**:\
Tab "Extensions" => Block "Hero section (on listing pages)"

**Technical name**:\
`twt-hero-section-show-cms-category-pages`

{% hint style="info" %}
**show**:\
This option displays the element "Hero section" on all listing pages.\
You can disable the element with a custom field in categories.

**show (via custom field)**:\
With this option you can display the "Hero Section" element via a custom field on certain category pages.
{% endhint %}

***

### Show 'Hero section' (CMS shop pages)

**Field type**:\
Select

**Available values**:\
• don't show\
• show\
• show (via custom field)

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

**Path to the configuration**:\
Tab "Extensions" => Block "Hero section (on listing pages)"

**Technical name**:\
`twt-hero-section-show-cms-shop-pages`

{% hint style="info" %}
**show**:\
This option displays the element "Hero section" on all shop pages.\
You can disable the element with a custom field in categories.

**show (via custom field)**:\
With this option you can display the "Hero Section" element via a custom field on certain shop pages.
{% endhint %}

## Basic configuration

***

### Pull up next element

**Field type**:\
Select

**Available values**:\
• no\
• yes\
• yes (via custom field)

**Example value**:\
`no`

**Path to the configuration**:\
Tab "Extensions" => Block "Hero section (on listing pages)" => Section "Basic configuration"

**Technical name**:\
`twt-hero-section-pull-up`

{% hint style="info" %}
**yes**:\
This option pulls the next element on all pages a little over the "Hero section".\
You can disable this with a custom field in individual categories.

**yes (via custom field)**:\
With this option, you can use a custom field in certain categories to choose whether the next element should be pulled over the "Hero section".

**Beta**: This configuration is in a testing phase, feel free to give it a try.
{% endhint %}

## Content

***

### Text colour

**Field type**:\
Select

**Available values**:\
• white text\
• light text\
• dark text\
• black text

**Example value**:\
`light text`

**Path to the configuration**:\
Tab "Extensions" => Block "Hero section (on listing pages)" => Section "Content"

**Technical name**:\
`twt-hero-section-text-coloration`

{% hint style="info" %}
Select the text colour of the "Hero section".
{% endhint %}

***

### Text alignment

**Field type**:\
Select

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

**Example value**:\
`align left`

**Path to the configuration**:\
Tab "Extensions" => Block "Hero section (on listing pages)" => Section "Content"

**Technical name**:\
`twt-hero-section-text-align`

{% hint style="info" %}
Select the text alignment of the "Hero section".
{% endhint %}

***

### Container width

**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 "Hero section (on listing pages)" => Section "Content"

**Technical name**:\
`twt-hero-section-sizing-mode`

{% hint style="info" %}
Select the sizing mode of the "Hero section".
{% endhint %}

***

### Content width

**Field type**:\
Text field

**Example value**:\
`100%`

**Path to the configuration**:\
Tab "Extensions" => Block "Hero section (on listing pages)" => Section "Content"

**Technical name**:\
`twt-hero-section-content-max-width`

{% hint style="info" %}
Enter the desired maximum width of the content in pixels (e.g. 1200px) or with 100%.
{% endhint %}

***

### Padding top (≥576px)

**Field type**:\
Number field

**Example value**:\
`170`

**Path to the configuration**:\
Tab "Extensions" => Block "Hero section (on listing pages)" => Section "Content"

**Technical name**:\
`twt-hero-section-padding-top-sm`

{% hint style="info" %}
Set the padding top for "Hero sections" on pages with "Shopping Experience Header".

**Note**: This configuration only applies to pages with a "Shopping Experience Header".
{% endhint %}

***

### Padding top (≥992px)

**Field type**:\
Number field

**Example value**:\
`210`

**Path to the configuration**:\
Tab "Extensions" => Block "Hero section (on listing pages)" => Section "Content"

**Technical name**:\
`twt-hero-section-padding-top-lg`

{% hint style="info" %}
Set the padding top for "Hero sections" on pages with "Shopping Experience Header".

**Note**: This configuration only applies to pages with a "Shopping Experience Header".
{% endhint %}

## Overlay

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#0c72a7`

**Path to the configuration**:\
Tab "Extensions" => Block "Hero section (on listing pages)" => Section "Overlay"

**Technical name**:\
`twt-hero-section-overlay-background-color`

{% hint style="info" %}
Select the background colour for the coloured overlay
{% endhint %}

***

### Opacity

**Field type**:\
Select

**Available values**:\
• 0%\
• 5%\
• 10%\
• 15%\
• 20%\
• 25%\
• 30%\
• 35%\
• 40%\
• 45%\
• 50%\
• 55%\
• 60%\
• 65%\
• 70%\
• 75%\
• 80%\
• 85%\
• 90%\
• 95%\
• 100%

**Example value**:\
`90%`

**Path to the configuration**:\
Tab "Extensions" => Block "Hero section (on listing pages)" => Section "Overlay"

**Technical name**:\
`twt-hero-section-overlay-opacity`

{% hint style="info" %}
Select the opacity of the coloured overlay
{% endhint %}

## Background-image

***

### Attachment

**Field type**:\
Select

**Available values**:\
• Background image scrolls with the page (scroll)\
• Background image stays fixed (fixed)

**Example value**:\
`Background image stays fixed (fixed)`

**Path to the configuration**:\
Tab "Extensions" => Block "Hero section (on listing pages)" => Section "Background-image"

**Technical name**:\
`twt-hero-section-background-image-attachment`

{% hint style="info" %}
**Scroll**:\
The background image scrolls with the page.

**Fixed**:\
The background image stays fixed relative to the viewport.
{% endhint %}

***

### Parallax effect

**Field type**:\
Select

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

**Example value**:\
`no`

**Path to the configuration**:\
Tab "Extensions" => Block "Hero section (on listing pages)" => Section "Background-image"

**Technical name**:\
`twt-hero-section-background-image-parallax`

{% hint style="info" %}
Applies a parallax effect to the background image when it is 'fixed'. Please note that this effect is managed by an additional JavaScript.
{% endhint %}

## Breadcrumb

***

### Show breadcrumb

**Field type**:\
Select

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

**Example value**:\
`no`

**Path to the configuration**:\
Tab "Extensions" => Block "Hero section (on listing pages)" => Section "Breadcrumb"

**Technical name**:\
`twt-hero-section-breadcrumb-show`

{% hint style="info" %}
Adds a breadcrumb to the "Hero section".
{% endhint %}

***

### Position

**Field type**:\
Select

**Available values**:\
• align top\
• align bottom (default)

**Example value**:\
`align bottom (default)`

**Path to the configuration**:\
Tab "Extensions" => Block "Hero section (on listing pages)" => Section "Breadcrumb"

**Technical name**:\
`twt-hero-section-breadcrumb-position`

{% hint style="info" %}
Select the desired position of the breadcrumb.
{% endhint %}

***

### Content alignment

**Field type**:\
Select

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

**Example value**:\
`align left`

**Path to the configuration**:\
Tab "Extensions" => Block "Hero section (on listing pages)" => Section "Breadcrumb"

**Technical name**:\
`twt-hero-section-breadcrumb-justify-content`

{% hint style="info" %}
Select the desired horizontal alignment.

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