This section contains configuration fields that go beyond the usual theme configuration. With these configurations you can exclude CSS code from unused classes, extensions or CMS blocks/elements to reduce the CSS code of the storefront.
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'.
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
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
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
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
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
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
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
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
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
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
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
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 [Pro Edition]"
Technical name:
twt-cms-hero-slider-css
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 [Pro Edition]"
Technical name:
twt-cms-text-teaser-css
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 [Pro Edition]"
Technical name:
twt-cms-text-teaser-decorated-css
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 [Pro Edition]"
Technical name:
twt-cms-button-teaser-css
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 [Pro Edition]"
Technical name:
twt-cms-call-to-action-css
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 [Pro Edition]"
Technical name:
twt-cms-hover-box-css
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 [Pro Edition]"
Technical name:
twt-cms-hover-teaser-css
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 [Pro Edition]"
Technical name:
twt-cms-image-teaser-css
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 [Pro Edition]"
Technical name:
twt-cms-hero-teaser-css
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 [Pro Edition]"
Technical name:
twt-cms-advanced-teaser-css
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 [Pro Edition]"
Technical name:
twt-cms-classic-teaser-css
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 [Pro Edition]"
Technical name:
twt-cms-modern-teaser-css
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 [Pro Edition]"
Technical name:
twt-cms-round-teaser-css
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 [Pro Edition]"
Technical name:
twt-cms-image-banner-css
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 [Pro Edition]"
Technical name:
twt-cms-parallax-banner-css
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 [Pro Edition]"
Technical name:
twt-cms-hero-banner-css
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 [Pro Edition]"
Technical name:
twt-cms-advanced-banner-css
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 [Pro Edition]"
Technical name:
twt-cms-image-text-layered-css
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 [Pro Edition]"
Technical name:
twt-cms-listing-subcategories-css
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 [Pro Edition]"
Technical name:
twt-cms-countdown-banner-css
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 [Pro Edition]"
Technical name:
twt-cms-discount-banner-css
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 [Pro Edition]"
Technical name:
twt-cms-testimonials-css
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
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
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)
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
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
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
Adds CSS classes for animations and manual use in Shopping Experiences.
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
Adds CSS headline classes for manual use in Shopping Experiences.
Apply to a CMS block to modify its headlines.
Example: twt-cms-headline-bath
Adds CSS "max-width" classes for manual use in Shopping Experiences.
Apply to a CMS block to modify its headlines.
Example: twt-mw-900
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.
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.
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".
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".
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)".
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".
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".
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".
Adds CSS code of the ThemeWare® "Hover teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Hover teaser".
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".
Adds CSS code of the ThemeWare® "Hero teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Hero teaser".
Adds CSS code of the ThemeWare® "Advanced teaser" to your Shopping Experiences.
You can disable this configuration if you don't use the "Advanced teaser".
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".
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".
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".
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".
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".
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".
Adds CSS code of the ThemeWare® "Advanced banner" to your Shopping Experiences.
You can disable this configuration if you don't use the "Advanced banner".
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.
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".
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".
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".
Adds CSS code of the ThemeWare® "Testimonial" elements to your Shopping Experiences.
You can disable this configuration if you are not using these elements.
Note: Required for the "Sticky top navigation" or the "Shopping Experiences Header".