> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/manual/others/advanced-settings/configuration.md).

# 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.themeware.design/manual/others/advanced-settings/configuration.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.