# Custom code (HTML/CSS/JS)

{% hint style="info" %}
**Note**: This element and this article are work in progress.
{% endhint %}

The **ThemeWare® CMS element "Custom code (HTML/CSS/JS)"** is a CMS element with which you can add individual HTML, CSS and JS code to your Shopping Experience.

As customised code can create potentially harmful vulnerabilities, this element is aimed at experienced users or experts who are familiar with individual programming. If you are not absolutely sure what you are doing, use the HTML editor of any text element in Shopware 6. This editor will automatically clean up your customised code.

{% hint style="success" %}
**Beta**: Please note that this element is in a testing phase, feel free to test it.
{% endhint %}

{% hint style="danger" %}
**Caution**: This CMS element is intended for experts who are experienced in working with custom code. Please note that custom code can create potentially harmful vulnerabilities!
{% endhint %}

{% hint style="warning" %}
**Important**: This element is only available in the ThemeWare® Pro Edition.
{% endhint %}

***

## Configure element

You can configure the ThemeWare® CMS element "Custom code (HTML/CSS/JS)" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"
2. Hover the mouse over the desired CMS element
3. Click on the ![](https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2F2PucLINZ7mAqvu1W2yKk%2Ficon-cog.png?alt=media\&token=56e34152-66e8-4707-8c19-3621b8f2448e) "gear" icon (2) to configure the CMS element
4. The "Element Settings" pop-up will open
5. Make the desired changes
6. Save your changes

You have now configured the CMS element.

<figure><img src="https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2F0AmAYuKevlftVOIwNJAw%2Fcms-custom-code--configure.png?alt=media&#x26;token=9a37a8b6-3a1f-4c2c-9996-3935eab0e267" alt=""><figcaption><p>Configuring the ThemeWare® CMS element "Custom code (HTML/CSS/JS)"</p></figcaption></figure>

***

## Configuration

The configuration of the CMS element "Custom code" is quite self-explanatory. There are no mandatory fields.

### HTML

In the tab "HTML" you add your custom HTML code.

> **Custom HTML code**
>
> In the section "Custom HTML code" you can add the desired HTML code.
>
> **Twig support**
>
> In the section "Twig" you can enable **Twig variable support**. This allows you to use Twig variables in your HTML code (e.g. `{{ page.product.name }}`).
>
> For advanced use cases you can enable the **Advanced Twig mode**, which allows the full Twig syntax (such as `{% block %}`, `{% extends %}`, etc.).

{% hint style="danger" %}
**Caution**: Potentially dangerous code is **not** sanitised and automatically removed from the editor!
{% endhint %}

### CSS

In the tab "CSS" you can add your custom CSS code. Your CSS code is automatically wrapped in a `style` tag.

You can of course also integrate your CSS code via the "Custom HTML code" field. The "Custom CSS code" field is mainly for a better overview.

> **Custom CSS code**
>
> In the section "Custom CSS code" you can add the desired CSS code.

### JavaScript

In the tab "JavaScript" you can add your custom JavaScript code. The JS code is automatically wrapped in a `script` tag.

You can of course also integrate your JS code via the "Custom HTML code" field. The "Custom JavaScript code" field is mainly for a better overview.

> **Custom JavaScript code**
>
> In the section "Custom JavaScript code" you can add the desired JavaScript code.

### Advanced

You can select each HTML element of our CMS elements using the appropriate CSS classes. If you want to use your own CSS classes, you can insert them in the "Advanced" tab.

***

## **Demo**

You can find some examples of use in our demo shops:

> Demo will follow\...