> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/elements/code.md).

# Code

The code element allows you to add custom HTML/TWIG, CSS or Javascript code to your shopping experiences.

> Feature of the Pro version

Since Shopware 6.5, code in the HTML elements has been cleaned - a so-called "sanitizer" filters most of the code content. With the code element, individual code can be placed in the shopping experiences without being cleaned up.

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FLnuDFuEaXdnpgAjGrm4w%2Fdocs-en-shopping-experiences-elements-code.png?alt=media&amp;token=531a478d-bbf2-4600-ac2f-0a4cf039a951" alt=""><figcaption></figcaption></figure>

The **code element (1)** is in the list of selectable elements of the theme. Once placed, it displays demo content to describe usage. The preview of the element in the editor shows you **parts of your written code (2, 3, 4)** so that you can keep an overview when using several code elements.

## Configuration

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FgO9JJtUQ6k5GrTCW1HT8%2Fdocs-en-shopping-experiences-elements-code-config.png?alt=media&amp;token=a241ddd9-a520-4476-b01b-0bc7a8545b62" alt=""><figcaption></figcaption></figure>

In the configuration of the element you will find the right field for each code, divided into a tab for **HTML and Twig (1)**, styling in the **CSS tab (2)** and Javascript in the **JS tab (3)**. This way you keep the full overview.

{% hint style="info" %}
Remove the example code from all tabs.
{% endhint %}