Styling a CMS element individually

You can style a specific CMS element individually by assigning it a custom CSS class in the element settings and defining the desired styles in your stylesheet or theme configuration.

Additionally, you can use the automatically generated element ID – especially for CMS elements where assigning a custom CSS class is not possible.

---

Adding a CSS class to a ThemeWare® CMS element

1. Click on the corresponding CMS block to activate the "edit mode"

2. Hover the mouse over the desired CMS element (1)

3. Click on the "gear" icon (2) to configure the CMS element

4. The "Element Settings" pop-up will open

5. Switch to the "Advanced" tab (3)

6. Enter your own CSS class in the "CSS classes (Element)" configuration field (4)

   • Tip: Separate multiple classes with a space.

7. Save your changes

---

Element-ID

Shopware automatically creates a unique element ID for each CMS element. You can use this to style the element individually using CSS - especially if no separate CSS class can be assigned.

You can find this element ID in the HTML code of the storefront. It is stored in the data-cms-element-id attribute of the corresponding container:

<div class="col-12" data-cms-element-id="019762d3f5ac74cd97043411f86aec36">
    <div class="cms-element-twt-modern-teaser element ...">
    ...

To target this element via CSS, use an attribute selector like this:

[data-cms-element-id="019762d3f5ac74cd97043411f86aec36"] {
    /* Custom styles here */
}

Note: For ThemeWare® CMS elements, you can also find the automatically generated element ID directly in the element’s configuration under the "Advanced" tab. This allows you to avoid manually inspecting the HTML markup in the storefront.

---

Further information

You can find more information on how to add CSS styles in the following instructions:

Individual customizations by means of CSS