# 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`

{% hint style="info" %}
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'.
{% endhint %}

## 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`

{% hint style="info" %}
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
{% endhint %}

***

### 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`

{% hint style="info" %}
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)
{% endhint %}

***

### 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`

{% hint style="info" %}
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
{% endhint %}

***

### 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`

{% hint style="info" %}
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
{% endhint %}

***

### 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`

{% hint style="info" %}
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
{% endhint %}

***

### 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`

{% hint style="info" %}
Adds CSS classes for animations and manual use in Shopping Experiences.
{% endhint %}

***

### 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`

{% hint style="info" %}
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
{% endhint %}

***

### 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`

{% hint style="info" %}
Adds CSS headline classes for manual use in Shopping Experiences.

Apply to a CMS block to modify its headlines.

**Example**:\
twt-cms-headline-bath
{% endhint %}

***

### 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`

{% hint style="info" %}
Adds CSS "max-width" classes for manual use in Shopping Experiences.

Apply to a CMS block to modify its headlines.

**Example**:\
twt-mw-900
{% endhint %}

## 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`

{% hint style="info" %}
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.
{% endhint %}

***

### 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`

{% hint style="info" %}
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.
{% endhint %}

## 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`

{% hint style="info" %}
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".
{% endhint %}

***

### 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`

{% hint style="info" %}
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".
{% endhint %}

***

### 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`

{% hint style="info" %}
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)".
{% endhint %}

***

### 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`

{% hint style="info" %}
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".
{% endhint %}

***

### 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`

{% hint style="info" %}
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".
{% endhint %}

***

### 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`

{% hint style="info" %}
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".
{% endhint %}

***

### Load CSS of the "Hover 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-hover-teaser-css`

{% hint style="info" %}
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".
{% endhint %}

***

### 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`

{% hint style="info" %}
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".
{% endhint %}

***

### Load CSS of the "Hero 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-hero-teaser-css`

{% hint style="info" %}
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".
{% endhint %}

***

### Load CSS of the "Advanced 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-advanced-teaser-css`

{% hint style="info" %}
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".
{% endhint %}

***

### 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`

{% hint style="info" %}
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".
{% endhint %}

***

### 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`

{% hint style="info" %}
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".
{% endhint %}

***

### 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`

{% hint style="info" %}
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".
{% endhint %}

***

### 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`

{% hint style="info" %}
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".
{% endhint %}

***

### 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`

{% hint style="info" %}
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".
{% endhint %}

***

### 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`

{% hint style="info" %}
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".
{% endhint %}

***

### Load CSS of the "Advanced 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-advanced-banner-css`

{% hint style="info" %}
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".
{% endhint %}

***

### 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`

{% hint style="info" %}
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.
{% endhint %}

***

### 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`

{% hint style="info" %}
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".
{% endhint %}

***

### 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`

{% hint style="info" %}
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".
{% endhint %}

***

### 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`

{% hint style="info" %}
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".
{% endhint %}

***

### 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`

{% hint style="info" %}
Adds CSS code of the ThemeWare® "Testimonial" elements to your Shopping Experiences.

You can disable this configuration if you are not using these elements.
{% endhint %}

## 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`

{% hint style="info" %}
**Note**: Required for the "Sticky top navigation" or the "Shopping Experiences Header".
{% endhint %}