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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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.
Select the text colour of the "Hero section".
Select the text alignment of the "Hero section".
Select the sizing mode of the "Hero section".
Enter the desired maximum width of the content in pixels (e.g. 1200px) or with 100%.
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".
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".
Select the background colour for the coloured overlay
Select the opacity of the coloured overlay
Scroll: The background image scrolls with the page.
Fixed: The background image stays fixed relative to the viewport.
Applies a parallax effect to the background image when it is 'fixed'. Please note that this effect is managed by an additional JavaScript.
Adds a breadcrumb to the "Hero section".
Select the desired position of the breadcrumb.
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.