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

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.

---

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

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.

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

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.

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

Select the text colour of the "Hero section".

---

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

Select the text alignment of the "Hero section".

---

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

Select the sizing mode of the "Hero section".

---

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

Enter the desired maximum width of the content in pixels (e.g. 1200px) or with 100%.

---

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

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".

---

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

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".

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

Select the background colour for the coloured overlay

---

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

Select the opacity of the coloured overlay

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

Scroll: The background image scrolls with the page.

Fixed: The background image stays fixed relative to the viewport.

---

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

Applies a parallax effect to the background image when it is 'fixed'. Please note that this effect is managed by an additional JavaScript.

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

Adds a breadcrumb to the "Hero section".

---

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

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.