Custom code (HTML/CSS/JS)

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.

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.

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

Using the "Allow Twig Variables" option, you can enable support for Twig variables. This allows you to use Twig variables (e.g. {{ page.product.name }} or {{ category.name }}) directly within your HTML code.

The variables used are automatically resolved and replaced with the corresponding content on product pages, category pages, and landing pages.

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.

Full Twig support

Full Twig support enables access to the complete Twig context (variables, tags, filters, functions). This feature is intended exclusively for experienced developers and agencies. Incorrect Twig code can cause page errors.

With the switch "Allow full Twig" your HTML code is rendered as a Twig template. Only users with the corresponding permission can use the switch (see Using Twig).

Note: This configuration is not available yet and will be enabled with an upcoming release.

Using Twig

If "Allow full Twig" is active, your HTML code is rendered as a Twig template in the storefront. You can then use snippets, conditions and loops, for example.

<h2>{{ product.translated.name }}</h2>
<a href="{{ path('frontend.home.page') }}">{{ 'general.homeLink'|trans }}</a>

Permission

Twig is executed on the server and has access to the complete context of the page. That is why it needs its own permission. Administrators always have it, all other users get it via their role:

1. In the administration, open Settings > Users & permissions
2. Open the desired role
3. In the section "Additional permissions", activate the permission "Use Twig in element "Custom code"" under "ThemeWare"
4. Save the role

Without this permission:

• The switch "Allow full Twig" is locked.
• If Twig is already active in an element, the HTML code is read-only. A note appears at the top of the element settings.
• You can still edit the CSS, the JavaScript and the other settings of the element.

The permission is checked on the server when saving, also for changes via the API and for layout adjustments in categories, products and landing pages.

Variables

The page on which the element is output is available to you as a variable:

Use translated for translatable fields, e.g. {{ product.translated.name }}. This gives you the value in the language of the storefront.

The switch "Allow Twig variables" has no effect while "Allow full Twig" is active and is locked then. The variables are available automatically.

Output

As in every Twig template, output is escaped automatically. Output fields that contain HTML (e.g. the product description) with |raw:

{{ product.translated.description|raw }}

Content from the database, e.g. a product name containing {{ ... }}, is never executed as Twig.

Saving

Your Twig code is checked when saving. If it contains a syntax error or an unknown function, an error message with the affected line appears and the change is not saved.