Configuration
Add CMS page ID as body class
Field type: Select
Available values: • no • yes (32 characters) • yes (7 characters)
Example value:
no
Path to the configuration: Tab "Others" => Block "Advanced settings"
Technical name:
twt-body-class-cms-page-id
Adds a CSS class with the ID of the current CMS page to the body. The 'unique' ID consists of 32 characters.
Alternatively, the ID can be shortened to 7 characters. The shorter ID is easier to handle in CSS but also somewhat less 'unique'.
Additional CSS classes
Load CSS spacing classes (optional)
Field type: Select
Available values: • no • yes (Bootstrap 4) • yes (Bootstrap 5)
Example value:
yes (Bootstrap 5)
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-custom-cms-spacing-classes
Adds CSS spacing classes for manual use in Shopping Experiences.
Examples: twt-mt-n2 = margin-top: -20px
twt-p-4 = padding: 40px
Bootstrap 4: ml = margin-left
Bootstrap 5: ms = margin-left
Load extended CSS spacing classes (optional)
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-custom-cms-spacing-classes-more
Adds viewport dependent CSS spacing classes for manual use in Shopping Experiences.
Examples: twt-mt-md-n2 = margin-top: -20px (≥768px)
twt-p-lg-4 = padding: 40px (≥992px)
Load CSS box shadow classes (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-custom-cms-image-decoration-classes
Adds CSS image decoration classes for manual use in Shopping Experiences.
Apply to a CMS block to modify its images.
Example: twt-cms-image-border-solid
Load CSS box shadow classes (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-custom-cms-box-shadow-classes
Adds CSS box shadow classes for manual use in Shopping Experiences.
Apply to a CMS block to modify it.
Example: twt-cms-box-shadow-level-1
Load CSS image hover classes (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-custom-cms-image-hover-classes
Adds CSS image hover classes for manual use in Shopping Experiences.
Apply to a CMS block to modify its images.
Example: twt-cms-image-hover-opacity
Load CSS classes for animations (optional)
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-cms-animations-more
Adds CSS classes for animations and manual use in Shopping Experiences.
Load CSS column spacing classes (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-custom-cms-column-padding-classes
Adds CSS column spacing classes (padding-left/-right, margin-bottom) for manual use in Shopping Experiences.
Apply to a CMS block to modify its columns.
Example: twt-cms-col-padding-5 twt-cms-col-margin-10
Load CSS headline classes (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-custom-cms-headline-classes
Adds CSS headline classes for manual use in Shopping Experiences.
Apply to a CMS block to modify its headlines.
Example: twt-cms-headline-bath
Load CSS "max-width" classes (optional)
Field type: Select
Available values: • no • yes
Example value:
no
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes"
Technical name:
twt-custom-css-max-width-classes
Adds CSS "max-width" classes for manual use in Shopping Experiences.
Apply to a CMS block to modify its headlines.
Example: twt-mw-900
Additional CSS classes for CMS blocks
Load CSS code for "Columns" CMS blocks (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes for CMS blocks"
Technical name:
twt-cms-block-cloumns-classes
Adds CSS code for ThemeWare® "Columns" CMS blocks to your Shopping Experiences.
You can disable this configuration if you doesn't use ThemeWare® "Columns" CMS blocks.
Load CSS code for "Grids" CMS blocks (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes for CMS blocks"
Technical name:
twt-cms-block-grid-classes
Adds CSS code for ThemeWare® "Grids" CMS blocks to your Shopping Experiences.
You can disable this configuration if you don't use the "Grid" CMS blocks.
Additional CSS code for CMS elements
Load CSS of the "Hero slider" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-hero-slider-css
Adds CSS code of the ThemeWare® "Hero slider" to your Shopping Experiences.
You can disable this configuration if you don't use the "Hero slider".
Load CSS of the "Text teaser" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-text-teaser-css
Adds CSS code of the ThemeWare® "Text teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Text teaser".
Load CSS of the "Text teaser (decorated)" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-text-teaser-decorated-css
Adds CSS code of the ThemeWare® "Text teaser (decorated)" to your Shopping Experiences.
You can disable this configuration if you don't use the "Text teaser (decorated)".
Load CSS of the "Button teaser" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-button-teaser-css
Adds CSS code of the ThemeWare® "Button teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Button teaser".
Load CSS of the "Call-to-Action" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-call-to-action-css
Adds CSS code of the ThemeWare® "Call-to-Action" to your Shopping Experiences.
You can disable this configuration if you don't use the "Call-to-Action".
Load CSS of the "Hover box" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-hover-box-css
Adds CSS code of the ThemeWare® "Hover box" to your Shopping Experiences.
You can disable this configuration if you don't use the "Hover box".
Load CSS of the "Image teaser" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-image-teaser-css
Adds CSS code of the ThemeWare® "Image teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Image teaser".
Load CSS of the "Classic teaser" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-classic-teaser-css
Adds CSS code of the ThemeWare® "Classic teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Classic teaser".
Load CSS of the "Modern teaser" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-modern-teaser-css
Adds CSS code of the ThemeWare® "Modern teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Modern teaser".
Load CSS of the "Round teaser" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-round-teaser-css
Adds CSS code of the ThemeWare® "Round teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Round teaser".
Load CSS of the "Image banner" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-image-banner-css
Adds CSS code of the ThemeWare® "Image banner" to your Shopping Experiences.
You can disable this configuration if you don't use the "Image banner".
Load CSS of the "Parallax banner" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-parallax-banner-css
Adds CSS code of the ThemeWare® "Parallax banner" to your Shopping Experiences.
You can disable this configuration if you don't use the "Parallax banner".
Load CSS of the "Hero banner" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-hero-banner-css
Adds CSS code of the ThemeWare® "Hero banner" to your Shopping Experiences.
You can disable this configuration if you don't use the "Hero banner".
Load CSS of the "Image & text layered" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-image-text-layered-css
Adds CSS code of the ThemeWare® "Image & text layered" element to your Shopping Experiences.
You can disable this configuration if you doesn't use the "Image & text layered" element.
Load CSS of the "Listing subcategories" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-listing-subcategories-css
Adds CSS code of the ThemeWare® "Listing subcategories" to your Shopping Experiences.
You can disable this configuration if you don't use the "Listing subcategories".
Load CSS of the "Countdown banner" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-countdown-banner-css
Adds CSS code of the ThemeWare® "Countdown banner" to your Shopping Experiences.
You can disable this configuration if you don't use the "Countdown banner".
Load CSS of the "Discount banner" (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-discount-banner-css
Adds CSS code of the ThemeWare® "Discount banner" to your Shopping Experiences.
You can disable this configuration if you don't use the "Discount banner".
Load CSS of the "Testimonial" elements (optional)
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "Additional CSS code for CMS elements"
Technical name:
twt-cms-testimonials-css
Adds CSS code of the ThemeWare® "Testimonial" elements to your Shopping Experiences.
You can disable this configuration if you are not using these elements.
jQuery
Load jQuery
Field type: Select
Available values: • no • yes
Example value:
yes
Path to the configuration: Tab "Others" => Block "Advanced settings" => Section "jQuery"
Technical name:
twt-jquery-load
Note: Required for the "Sticky top navigation" or the "Shopping Experiences Header".
Last updated
