Custom code (HTML/CSS/JS)

Note: This element and this article are work in progress.

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.

Beta: Please note that this element is in a testing phase, feel free to test it.

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!

Important: This element is only available in the ThemeWare® Pro Edition.

---

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 "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.

ThemeWare® CMS-Element "Individueller Code (HTML/CSS/JS)" konfigurieren

---

Configuration

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.

Caution: Potenziell gefährlicher Code wird nicht bereinigt und automatisch aus dem Editor entfernt!

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.

---

Demo

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

Demo will follow...