Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Field type: Select
Available values: • don't show • show • show (only on product pages) • show (only in checkout)
Example value:
don't show
Path to the configuration: Tab "Extensions" => Block "Custom announcement (on product pages and in the checkout)"
Technical name:
twt-custom-announcement-show
Field type: Date picker
Example value: ``
Path to the configuration: Tab "Extensions" => Block "Custom announcement (on product pages and in the checkout)" => Section "Basic configuration"
Technical name:
twt-custom-announcement-start-date
Field type: Date picker
Example value: ``
Path to the configuration: Tab "Extensions" => Block "Custom announcement (on product pages and in the checkout)" => Section "Basic configuration"
Technical name:
twt-custom-announcement-end-date
Field type: Color picker
Example value:
#ffe79a
Path to the configuration: Tab "Extensions" => Block "Custom announcement (on product pages and in the checkout)" => Section "Colour configuration"
Technical name:
twt-custom-announcement-border-color
Field type: Color picker
Example value:
#fff3cd
Path to the configuration: Tab "Extensions" => Block "Custom announcement (on product pages and in the checkout)" => Section "Colour configuration"
Technical name:
twt-custom-announcement-background-color
Field type: Number field
Example value:
14
Path to the configuration: Tab "Extensions" => Block "Custom announcement (on product pages and in the checkout)" => Section "Typography"
Technical name:
twt-custom-announcement-font-size
Shows the "Custom announcement" from ThemeWare®.
To edit or translate the link please use the following snippet: twt.extension.customAnnouncement.content
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Extensions" => Block "Checkout steps"
Technical name:
twt-checkout-steps-show
Shows the "Checkout steps" from ThemeWare® in the checkout.
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Extensions" => Block "Checkout steps"
Technical name:
twt-checkout-steps-cart-show
Field type: Select
Available values: • Continuous lines • Lines between steps • Continuous bars between steps • Bars between steps
Example value:
Continuous lines
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Basic configuration"
Technical name:
twt-checkout-steps-style
Field type: Select
Available values: • Steps with numbers • Steps with icons • Small steps
Example value:
Steps with numbers
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Basic configuration"
Technical name:
twt-checkout-steps-icon-style
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 "Extensions" => Block "Checkout steps" => Section "Basic configuration"
Technical name:
twt-checkout-steps-item-text-show
Field type: Select
Available values: • no shadow • Small shadow (Bootstrap) • Regular shadow (Bootstrap) • Larger shadow (Bootstrap)
Example value:
no shadow
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Basic configuration"
Technical name:
twt-checkout-steps-item-box-shadow-type
Field type: Select
Available values: • not rounded • rounded corners • round corners • individual radius
Example value:
round corners
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Basic configuration"
Technical name:
twt-checkout-steps-item-corner-type
Field type: Number field
Example value:
10
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Basic configuration"
Technical name:
twt-checkout-steps-item-border-radius
Field type: Color picker
Example value:
#000000
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:
twt-checkout-steps-item-color
Field type: Color picker
Example value:
#000000
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:
twt-checkout-steps-item-color-active
Field type: Color picker
Example value:
#000000
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:
twt-checkout-steps-item-color-completed
Field type: Color picker
Example value:
#dddddd
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:
twt-checkout-steps-item-icon-color
Field type: Color picker
Example value:
#000000
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:
twt-checkout-steps-item-icon-color-active
Field type: Color picker
Example value:
$sw-color-success
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:
twt-checkout-steps-item-icon-color-completed
Field type: Color picker
Example value:
#dddddd
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:
twt-checkout-steps-item-border-color
Field type: Color picker
Example value:
#000000
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:
twt-checkout-steps-item-border-color-active
Field type: Color picker
Example value:
$sw-color-success
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:
twt-checkout-steps-item-border-color-completed
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:
twt-checkout-steps-item-background-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:
twt-checkout-steps-item-background-color-active
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:
twt-checkout-steps-item-background-color-completed
Field type: Color picker
Example value:
#dddddd
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:
twt-checkout-steps-item-seperator-color
Field type: Color picker
Example value:
#000000
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:
twt-checkout-steps-item-seperator-color-active
Field type: Color picker
Example value:
$sw-color-success
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:
twt-checkout-steps-item-seperator-color-completed
Field type: Number field
Example value:
14
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Typography"
Technical name:
twt-checkout-steps-item-font-size
Field type: Select
Available values: • none • uppercase • lowercase • capitalize
Example value:
none
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Typography"
Technical name:
twt-checkout-steps-item-text-transform
Field type: Select
Available values: • light • normal • bold
Example value:
normal
Path to the configuration: Tab "Extensions" => Block "Checkout steps" => Section "Typography"
Technical name:
twt-checkout-steps-item-font-weight
Shows the "Checkout steps" from ThemeWare® in shopping cart.
Select the icon style of the steps.
Select from which breakpoint the text should be displayed below the steps.
Select one (or none) drop shadow effect for the steps.
Select the corner type of the steps. rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners Uses a predefined radius for round corners.
Note: This configuration relates to the corner type "individual radius".
Note: Not every layout type uses the "Seperator color @active". Some layout types just use the "Seperator color" and "Seperator color @completed".
This section contains configuration fields for the "Slideout communities" extension.
This section contains configuration fields for the "USP Bar" extension.
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Extensions" => Block "Announcement banner (in the header)"
Technical name:
twt-announcement-banner-show
Shows the ThemeWare® "Announcement banner".
To edit or translate the text please use the following snippet: twt.extension.announcementBanner.content
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Extensions" => Block "Announcement banner (in the header)" => Section "Basic configuration"
Technical name:
twt-announcement-banner-closable
Field type: Date picker
Example value: ``
Path to the configuration: Tab "Extensions" => Block "Announcement banner (in the header)" => Section "Basic configuration"
Technical name:
twt-announcement-banner-start-date
Field type: Date picker
Example value: ``
Path to the configuration: Tab "Extensions" => Block "Announcement banner (in the header)" => Section "Basic configuration"
Technical name:
twt-announcement-banner-end-date
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Extensions" => Block "Announcement banner (in the header)" => Section "Basic configuration"
Technical name:
twt-announcement-banner-link
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Extensions" => Block "Announcement banner (in the header)" => Section "Basic configuration"
Technical name:
twt-announcement-banner-link-newtab
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Extensions" => Block "Announcement banner (in the header)" => Section "Basic configuration"
Technical name:
twt-announcement-banner-link-nofollow
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Extensions" => Block "Announcement banner (in the header)" => Section "Colour configuration"
Technical name:
twt-announcement-banner-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Extensions" => Block "Announcement banner (in the header)" => Section "Colour configuration"
Technical name:
twt-announcement-banner-background-color
Field type: Number field
Example value:
14
Path to the configuration: Tab "Extensions" => Block "Announcement banner (in the header)" => Section "Typography"
Technical name:
twt-announcement-banner-font-size
Field type: Select
Available values: • none • uppercase • lowercase • capitalize
Example value:
none
Path to the configuration: Tab "Extensions" => Block "Announcement banner (in the header)" => Section "Typography"
Technical name:
twt-announcement-banner-text-transform
Field type: Select
Available values: • light • normal • bold
Example value:
normal
Path to the configuration: Tab "Extensions" => Block "Announcement banner (in the header)" => Section "Typography"
Technical name:
twt-announcement-banner-font-weight
Determine whether the banner can be closed by the visitor.
Hinweis: This configuration only applies to the Shopware cookie permission from Shopware.
To edit or translate the link please use the following snippet: twt.extension.announcementBanner.link
Here you can configure the "Listing subcategories" theme extension.
Note: These configurations also apply to the CMS extension "Listing subcategories" of the Pro Edition. However, you can also overwrite the theme configuration in the corresponding CMS element.
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.
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Extensions" => Block "Floating widget"
Technical name:
twt-floating-widget-show
Shows the ThemeWare® "Floating/Slideout widget".
To edit or translate the content please use the following snippet: twt.extension.floatingWidget.body
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Extensions" => Block "Floating widget"
Technical name:
twt-floating-widget-mobile
Field type: Select
Available values: • left • right
Example value:
left
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-position
Field type: Select
Available values: • no effect • pull out • reduce opacity
Example value:
pull out
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-hover-type
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-backdrop
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-show-opened
Field type: Select
Available values: • no animation • Wobble (3x)
Example value:
no animation
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-animation
Field type: Select
Available values: • no • yes • yes (open in new tab)
Example value:
no
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-link
Field type: Number field
Example value:
400
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-width
Field type: Number field
Example value:
300
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-height
Field type: Number field
Example value:
200
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-title-width
Field type: Number field
Example value:
40
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-title-height
Field type: Number field
Example value:
20
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-padding
Field type: Select
Available values: • align top • align center • align bottom
Example value:
align center
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-align-items
Field type: Select
Available values: • align left • align center • align right
Example value:
align center
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-justify-content
Field type: Text field
Example value:
20
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-side-bottom-distance
Field type: Select
Available values: • % (Percent) • px (Pixel)
Example value:
% (Percent)
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"
Technical name:
twt-floating-widget-side-bottom-distance-unit
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"
Technical name:
twt-floating-widget-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"
Technical name:
twt-floating-widget-link-color
Field type: Color picker
Example value:
$twt-color-brand-primary-dark
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"
Technical name:
twt-floating-widget-link-color-hover
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"
Technical name:
twt-floating-widget-background-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"
Technical name:
twt-floating-widget-title-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"
Technical name:
twt-floating-widget-title-background-color
Field type: Media selection
Example value: ``
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Background-image"
Technical name:
twt-floating-widget-background-image
Field type: Select
Available values: • default • contain • cover
Example value:
default
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Background-image"
Technical name:
twt-floating-widget-background-image-object-fit
Field type: Number field
Example value:
16
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Typography"
Technical name:
twt-floating-widget-font-size
Field type: Number field
Example value:
18
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Typography"
Technical name:
twt-floating-widget-title-font-size
Field type: Select
Available values: • align left • align center • align right
Example value:
align center
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Typography"
Technical name:
twt-floating-widget-text-align
Field type: Select
Available values: • none • uppercase • lowercase • capitalize
Example value:
none
Path to the configuration: Tab "Extensions" => Block "Floating widget" => Section "Typography"
Technical name:
twt-floating-widget-title-text-transform
This section contains configuration fields for the "Announcement banner" extension.
To edit or translate the link please use the following snippet: twt.extension.floatingWidget.link
To edit or translate the content please use the following snippet: twt.extension.floatingWidget.body
If the text runs across the full-width of the widget, the alignment has no visual effect.
To edit or translate the content please use the following snippet: twt.extension.floatingWidget.body
none The image is not resized.
cover The image is sized to maintain its aspect ratio while filling the element's entire content box.
contain The image is sized to maintain its aspect ratio while fitting within the element's content box. The object will be clipped to fit.
Text alignment when the text wraps.
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Extensions" => Block "Slideout communities"
Technical name:
twt-slideout-communities-show
Shows the ThemeWare® "Slideout communities", which is based on the "Communities widget".
You can find the configuration of the widget in the tab "Widgets".
Field type: Select
Available values: • unicoloured • multicoloured
Example value:
unicoloured
Path to the configuration: Tab "Extensions" => Block "Slideout communities" => Section "Basic configuration"
Technical name:
twt-slideout-communities-style
Field type: Number field
Example value:
36
Path to the configuration: Tab "Extensions" => Block "Slideout communities" => Section "Basic configuration"
Technical name:
twt-slideout-communities-icon-size
Field type: Select
Available values: • default • individual colour • greyscale
Example value:
default
Path to the configuration: Tab "Extensions" => Block "Slideout communities" => Section "Colour configuration"
Technical name:
twt-slideout-communities-icon-coloration
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Extensions" => Block "Slideout communities" => Section "Colour configuration"
Technical name:
twt-slideout-communities-icon-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Extensions" => Block "Slideout communities" => Section "Colour configuration"
Technical name:
twt-slideout-communities-color
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Extensions" => Block "Slideout communities" => Section "Colour configuration"
Technical name:
twt-slideout-communities-background-color
Use the option "individual colour" in the field "Icon coloration" to use this colour value for the icons.
This colour applies with the layout type "multicolour".
This section contains configuration fields for the "Floating widget" extension.
Field type: Select
Available values: • don't show • show
Example value:
show
Path to the configuration: Tab "Extensions" => Block "USP bar"
Technical name:
twt-usp-bar-header
Shows the ThemeWare® "USP bar" in the header.
To edit or translate the content please use the following snippets: twt.extension.uspBar...
Field type: Select
Available values: • don't show • show
Example value:
show
Path to the configuration: Tab "Extensions" => Block "USP bar"
Technical name:
twt-usp-bar-footer
Field type: Select
Available values: • above header • above navigation • below header
Example value:
above header
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"
Technical name:
twt-usp-bar-header-position
Field type: Select
Available values: • above footer
Example value:
above footer
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"
Technical name:
twt-usp-bar-footer-position
Field type: Select
Available values: • Small icons • Small icons + Top bar • Small icons + Widget
Example value:
Small icons
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"
Technical name:
twt-usp-bar-header-layout
Field type: Select
Available values: • Small icons • Large icons • Large icons with subtitles
Example value:
Small icons
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"
Technical name:
twt-usp-bar-footer-layout
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"
Technical name:
twt-usp-bar-large-icons-subtitle
Field type: Select
Available values: • don't show • Communities or social media
Example value:
Communities or social media
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"
Technical name:
twt-usp-bar-widget-content
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 "USP bar" => Section "Basic configuration"
Technical name:
twt-usp-bar-header-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 "USP bar" => Section "Basic configuration"
Technical name:
twt-usp-bar-width
Field type: Number field
Example value:
40
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"
Technical name:
twt-usp-bar-height-small-icons
Field type: Number field
Example value:
110
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"
Technical name:
twt-usp-bar-height-large-icons
Field type: Select
Available values: • align left • align right • align center • space-between • space-around
Example value:
space-between
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"
Technical name:
twt-usp-bar-small-icons-justify-content
Field type: Select
Available values: • align left • align right • align center • space-between • space-around
Example value:
space-around
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Basic configuration"
Technical name:
twt-usp-bar-large-icons-justify-content
Field type: Color picker
Example value:
#263842
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Colour configuration"
Technical name:
twt-usp-bar-header-color
Field type: Color picker
Example value:
#263842
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Colour configuration"
Technical name:
twt-usp-bar-header-icon-color
Field type: Color picker
Example value:
#eef2f5
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Colour configuration"
Technical name:
twt-usp-bar-header-border-color
Field type: Color picker
Example value:
#eef2f5
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Colour configuration"
Technical name:
twt-usp-bar-header-background-color
Field type: Color picker
Example value:
#555555
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Colour configuration"
Technical name:
twt-usp-bar-footer-color
Field type: Color picker
Example value:
#555555
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Colour configuration"
Technical name:
twt-usp-bar-footer-icon-color
Field type: Color picker
Example value:
#e5ebf0
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Colour configuration"
Technical name:
twt-usp-bar-footer-border-color
Field type: Color picker
Example value:
#eef2f5
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Colour configuration"
Technical name:
twt-usp-bar-footer-background-color
Field type: Select
Available values: • Text • Headlines
Example value:
Text
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Typography"
Technical name:
twt-usp-bar-font-family
Field type: Number field
Example value:
14
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Typography"
Technical name:
twt-usp-bar-font-size
Field type: Select
Available values: • light • normal • bold
Example value:
normal
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Typography"
Technical name:
twt-usp-bar-font-weight
Field type: Select
Available values: • light • normal • bold
Example value:
bold
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Typography"
Technical name:
twt-usp-bar-font-weight-large
Field type: Select
Available values: • none • uppercase • lowercase • capitalize
Example value:
none
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Typography"
Technical name:
twt-usp-bar-text-transform
Field type: Number field
Example value:
15
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Typography"
Technical name:
twt-usp-bar-icon-size-small
Field type: Number field
Example value:
36
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "Typography"
Technical name:
twt-usp-bar-icon-size-large
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:
Phone (portrait) (<576px)
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "USPs"
Technical name:
twt-usp-bar-breakpoint-item-1
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:
Phone (landscape) (≥576px)
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "USPs"
Technical name:
twt-usp-bar-breakpoint-item-2
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 "Extensions" => Block "USP bar" => Section "USPs"
Technical name:
twt-usp-bar-breakpoint-item-3
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 (landscape) (≥992px)
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "USPs"
Technical name:
twt-usp-bar-breakpoint-item-4
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:
don't show
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "USPs"
Technical name:
twt-usp-bar-breakpoint-item-5
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:
Container-max-width (Full-width-boxed)
Path to the configuration: Tab "Extensions" => Block "USP bar" => Section "USPs"
Technical name:
twt-usp-bar-breakpoint-item-6
Shows the ThemeWare® "USP bar" in the footer.
To edit or translate the content please use the following snippets: twt.extension.uspBar...
Please note that in the "Custom header" and in the "Shopping Experiences Header" only the position "above the header" is supported.
Small icons Small icon on the left side of the label.
Small icons + Top bar The default "Top bar" is moved to the "USP bar". (If you have problems with plugins that modify the "Top bar", please use a different layout)
Small icons + Widget A ThemeWare® widget can be placed in the right-hand area with the "Content (widget)" configuration.
Small icons Small icon on the left side of the label.
Large icons Large icon above the label.
Show subtitles below the title. Only applies to layout types with large icons.
You can find the configuration of the widgets in the tab "Widgets".
Select the sizing mode of the "Usp bar".
Select the sizing mode of the "Usp bar".
Note: This configuration relates to the layout type "Small icons".
Note: This configuration relates to the layout type "Large icons".
Note: This configuration relates to the layout type "Small icons".
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.
Note: This configuration relates to the layout type "Large icons".
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.
Note: This configuration relates to the layout type "Small icons".
Note: This configuration relates to the layout type "Large icons".
Note: This configuration relates to the layout type "Small icons".
Note: This configuration relates to the layout type "Large icons".
To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp1.title and twt.extension.uspBar.usp1.icon
To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp2.title and twt.extension.uspBar.usp2.icon
To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp3.title and twt.extension.uspBar.usp3.icon
To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp4.title and twt.extension.uspBar.usp4.icon
To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp5.title and twt.extension.uspBar.usp5.icon
To edit or translate the label and icon please use the following snippets: twt.extension.uspBar.usp6.title and twt.extension.uspBar.usp6.icon
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)"
Technical name:
twt-listing-subcategories-show
This configuration enables the element "Listing subcategories" on all listing pages.
You can disable the element with a custom field in categories.
Tip: In the "ThemeWare® Pro Edition" you can use the CMS element "Listing subcategories" in specific categories instead.
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 "Listing subcategories (on listing pages)"
Technical name:
twt-listing-subcategories-show-cms-shop-pages
Field type: Select
Available values: • Image only • Text only • Text below the image
Example value:
Text below the image
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Basic configuration"
Technical name:
twt-listing-subcategories-layout
Field type: Select
Available values: • align left • align right • align center • space-between • space-around
Example value:
align left
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Basic configuration"
Technical name:
twt-listing-subcategories-justify-content
Field type: Select
Available values: • Cover • Contain
Example value:
Contain
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Images"
Technical name:
twt-listing-subcategories-display-mode
Field type: Text field
Example value:
100%
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Images"
Technical name:
twt-listing-subcategories-image-width
Field type: Text field
Example value:
140px
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Images"
Technical name:
twt-listing-subcategories-image-height
Field type: Text field
Example value:
140px
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Images"
Technical name:
twt-listing-subcategories-image-min-height
Field type: Text field
Example value:
140px
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Images"
Technical name:
twt-listing-subcategories-image-max-height
Field type: Color picker
Example value:
$sw-text-color
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Colour configuration"
Technical name:
twt-listing-subcategories-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Colour configuration"
Technical name:
twt-listing-subcategories-color-hover
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Colour configuration"
Technical name:
twt-listing-subcategories-background-color
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Colour configuration"
Technical name:
twt-listing-subcategories-background-color-hover
Field type: Color picker
Example value:
$sw-border-color
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Colour configuration"
Technical name:
twt-listing-subcategories-border-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Colour configuration"
Technical name:
twt-listing-subcategories-border-color-hover
Field type: Color picker
Example value:
#eef2f5
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Colour configuration"
Technical name:
twt-listing-subcategories-image-background-color
Field type: Select
Available values: • Text • Headlines
Example value:
Text
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Typography"
Technical name:
twt-listing-subcategories-font-family
Field type: Number field
Example value:
16
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Typography"
Technical name:
twt-listing-subcategories-font-size
Field type: Select
Available values: • light • normal • bold
Example value:
normal
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Typography"
Technical name:
twt-listing-subcategories-font-weight
Field type: Select
Available values: • none • uppercase • lowercase • capitalize
Example value:
none
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Typography"
Technical name:
twt-listing-subcategories-text-transform
Field type: Select
Available values: • 1 • 2
Example value:
1
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Grid"
Technical name:
twt-listing-subcategories-column-count-xs
Field type: Select
Available values: • 1 • 2 • 3
Example value:
2
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Grid"
Technical name:
twt-listing-subcategories-column-count-sm
Field type: Select
Available values: • 2 • 3 • 4
Example value:
2
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Grid"
Technical name:
twt-listing-subcategories-column-count-md
Field type: Select
Available values: • 2 • 3 • 4 • 5 • 6
Example value:
3
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Grid"
Technical name:
twt-listing-subcategories-column-count-lg
Field type: Select
Available values: • 2 • 3 • 4 • 5 • 6
Example value:
4
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Grid"
Technical name:
twt-listing-subcategories-column-count-xl
Field type: Select
Available values: • 2 • 3 • 4 • 5 • 6
Example value:
4
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Grid"
Technical name:
twt-listing-subcategories-column-count-xxl
Field type: Select
Available values: • Eager • Lazy
Example value:
Eager
Path to the configuration: Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Section "Pagespeed"
Technical name:
twt-listing-subcategories-lazy-loading
Beta: This feature may change in an upcoming update, but feel free to test it and send us your feedback.
show: This option displays the element "Listing subcategories" 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 "Listing subcategories" element via a custom field on certain category pages.
Tip: In the "ThemeWare® Pro Edition" you can use the CMS element "Listing subcategories" in specific categories instead.
Select the desired layout type.
Tip: Use the same aspect ratio for all cateogry images to get the best result.
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.
Select the desired display mode.
cover The image is sized to maintain its aspect ratio while filling the element's entire content box.
contain The image is sized to maintain its aspect ratio while fitting within the element's content box.
Enter your desired width (e.g. 100%).
Enter your desired height (e.g. 140px).
Note: This configuration refers to the display mode "Contain".
Enter the desired minimum height (e.g. 140px or none).
Note: This configuration refers to the display mode "Cover".
Enter the desired maximum height (e.g. 140px or none).
Note: This configuration refers to the display mode "Cover".
Number of columns in the smartphone viewport (
Number of columns in the smartphone viewport (≥576px).
default: 2
Number of columns in the tablet viewport (≥768px).
default: 2
Number of columns in the tablet viewport (≥992px).
default: 3
Number of columns in the desktop viewport (≥1200px).
default: 4
Number of columns in the desktop viewport (≥1440px).
default: 4
Select the desired loading attribute.
eager Instructs the browser to prioritise the loading of the image. This should be used for images "above the fold".
lazy Instructs the browser not to load the image until the user scrolls to it. This should be used for images "below the fold".
This tab contains configuration fields for various ThemeWare® extensions.
ThemeWare® extensions are often "global", meaning they are independent of page types or specific layout sections into which the ThemeWare® configuration is usually divided. This is why the configuration for "global" ThemeWare® extensions is located in this separate tab. This would be, for example, the "Announcement Banner" or the "USP Bar".
But there are also extensions that are bound to certain page types or layout sections. These would be, for example, the "Share links" for product pages in the "Product pages" tab.
You can find more information about the ThemeWare® extensions in the following article:
This section contains configuration fields for the "Custom announcement" extension.
