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