> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/zusatzfunktionen/cms-erweiterungen/cms-elemente/verschiedenes/individueller-code-html-css-js.md).

# Individueller Code (HTML/CSS/JS)

{% hint style="info" %}
**Hinweis**: Dieses Element sowie dieser Artikel sind in Arbeit.
{% endhint %}

Das **ThemeWare® CMS-Element "Individueller Code (HTML/CSS/JS)"** ist ein CMS-Element mit welchem du individuellen HTML-, CSS- und JS-Code in deiner Erlebniswelt platzieren kannst.

Da durch individuellen Code potenziell gefährliche Schwachstellen entstehen können, richtet sich dieses Element an erfahrene Anwender bzw. Experten, die sicher im Umgang mit individuellen Programmierungen sind. Bist du nicht absolut sicher, was du tust, nutze den HTML-Editor eines beliebigen Text-Elementes von Shopware 6. Dieser Editor bereinigt deinen individuellen Code automatisch.

{% hint style="success" %}
**Beta**: Diese Funktion befindet sich in der Beta-Phase und kann sich mit einem kommenden Release noch ändern. – Wir freuen uns über dein [Feedback](https://service.themeware.design/verbesserungsvorschlag).
{% endhint %}

{% hint style="danger" %}
**Achtung**: Dieses CMS-Element richtet sich an Experten die sicher im Umgang mit individuellem Code sind. Bitte beachte, dass durch individuellen Code potenziell gefährliche Schwachstellen entstehen können!
{% endhint %}

{% hint style="warning" %}
**Wichtig**: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

***

## Element konfigurieren

Die ThemeWare® CMS-Element "Individueller Code (HTML/CSS/JS)" kannst du wie folgt konfigurieren:

1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
2. Fahre mit der Maus über das entsprechende CMS-Element
3. Klicke auf das ![](/files/5URCkVnh55QbNfBAp6e7) "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
4. Es öffnet sich das Pop-up "Element-Einstellungen"
5. Nehme die gewünschten Änderungen vor
6. Speichere deine Änderungen

Du hast das CMS-Element nun konfiguriert.

<figure><img src="/files/Jfa5mMlQlvvv9eEyAVOH" alt=""><figcaption><p>ThemeWare® CMS-Element "Individueller Code (HTML/CSS/JS)" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom CMS-Element "Individueller Code" ist recht selbsterklärend. Es gibt keine Pflichtfelder.

### HTML

Im Tab "HTML" hinterlegst du deinen individuellen HTML-Code.

> **Individueller HTML-Code**
>
> Im Abschnitt "Individueller HTML-Code" kannst du den gewünschten HTML-Code hinterlegen.
>
> **Twig-Unterstützung**
>
> Mit dem Schalter **"Twig-Variablen erlauben"** kannst du die Unterstützung für Twig-Variablen aktivieren. Dadurch lassen sich Twig-Variablen (z. B. `{{ page.product.name }}` oder `{{ category.name }}`) direkt in deinem HTML-Code verwenden.
>
> Die verwendeten Variablen werden auf **Produktseiten**, **Kategorieseiten** und **Landingpages** automatisch aufgelöst und durch die entsprechenden Inhalte ersetzt.

{% hint style="danger" %}
**Achtung**: Potenziell gefährlicher Code wird **nicht** bereinigt und automatisch aus dem Editor entfernt!
{% endhint %}

### CSS

Im Tab "CSS" kannst du deinen individuellen CSS-Code hinterlegen. Dein CSS-Code wird automatisch mit einem `style`-Tag umschlossen eingefügt.

Du kannst du deinen CSS-Code natürlich auch über das Feld "Individueller HTML-Code" integrieren, das Feld "Individueller CSS-Code" dient hauptsächlich der besseren Übersicht.

> **Individueller CSS-Code**
>
> Im Abschnitt "Individueller CSS-Code" kannst du den gewünschten CSS-Code hinterlegen.

### JavaScript

Im Tab "JavaScript" kannst du deinen individuellen JavaScript-Code hinterlegen. Der JS-Code wird automatisch mit einem `script`-Tag umschlossen eingefügt.

Du kannst du deinen JS-Code natürlich auch über das Feld "Individueller HTML-Code" integrieren, das Feld "Individueller JavaScript-Code" dient hauptsächlich der besseren Übersicht.

> **Individueller JavaScript-Code**
>
> Im Abschnitt "Individueller JavaScript-Code" kannst du den gewünschten JavaScript-Code hinterlegen.

### Erweitert

Du kannst zwar jedes HTML-Element unserer CMS-Elemente über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.

> **Vollständige Twig-Unterstützung**
>
> Die vollständige Twig-Unterstützung ermöglicht den Zugriff auf den kompletten Twig-Kontext (Variablen, Tags, Filter, Funktionen). Diese Funktion richtet sich ausschließlich an erfahrene Entwickler und Agenturen. Fehlerhafter Twig-Code kann zu Seitenfehlern führen.
>
> ***Hinweis**: Diese Konfiguration ist derzeit nicht verfügbar. Die Ausführung von Twig-Code kann zu Fehlern und unter Umständen zu erheblichen Sicherheitsrisiken führen. Wir prüfen, ob und in welcher Form wir diese Funktion in einem zukünftigen Release bereitstellen können.*