Individual customizations by means of CSS

In this article you will discover how to perform individual customizations using CSS with ThemeWare®

With ThemeWare® you have got several options to add your own CSS styling to your shop. Depending on what you want to change and how extensive the modifications are, you choose the method that suits you best.

Tip: Creating a ThemeWare® duplicate is not necessary for CSS customizations.

Please note that custom code is not automatically compressed. It is best to compress your custom code manually before embedding it.

Note: Custom CSS code is not automatically compressed. It is best to compress your code manually.

Before we talk about embedding CSS code, we would like to point out that you should never edit original Shopware files or extensions (plugins, apps or themes). This can lead to various problems.

Attention: Do not edit Shopware files or files of any extension (plugins, apps or themes).

In order to make it as easy as possible for you to decide which way to go, we have listed the advantages and disadvantages of each:

Advantages and disadvantages

1. Integrating CSS code using the ThemeWare® configuration

Using the ThemeWare® configuration, it is possible to deposit small CSS adjustments quickly and easily. This code is not compressed and only CSS syntax is possible, however this is the easiest way for beginners.

1.1) Integrating CSS code with snippets

• Advantages

  • fast procedure (via the Shopware 6 snippet management)

• Disadvantages

  • outdated method

  • only CSS syntax possible

  • CSS code is not compressed automatically

1.2) Integrating CSS code with configuration field

• Advantages

  • quickest procedure (using the ThemeWare® configuration)

  • recommended method

• Disadvantages

  • only CSS syntax possible

  • CSS code is not compressed automatically

2. Integrating CSS code with external CSS file

The ThemeWare® configuration also offers you the option to include an external file via a URL. This way, a file which is available via a CDN (Content Delivery Network) can also be integrated.

• Advantages

  • external file integrable

• Disadvantages

  • only CSS syntax possible

  • CSS code is not compressed automatically

  • only limited possible in the Shopware 6 Cloud

3. Integrating individual SCSS code (for experienced users)

Currently, the most advanced way to integrate SCSS code is to use a separate extension. There are special extensions (plugins or apps) for this in the Shopware Community Store.

Alternatively, you may use our free "ThemeWare® Customizing Plugin" (self-managed) or the "ThemeWare® Customizing App" (Cloud) for the integration of individual customizations and your own files.

• Advantages

  • professional approach

  • SCSS syntax possible

  • SCSS variables possible

  • SCSS features possible

  • SCSS code will be compressed automatically

• Disadvantages

  • rather for experienced users

  • only possible using an external extension

1. Integrating CSS code

1.1) Integrating individual CSS code with snippets

Place the desired CSS code in the snippet "twt.custom.css" and activate the following configuration field: Tab "Others" => Block "Deprecated" => field "Individual CSS code (snippet)".

Important: This configuration was a workaround until option 1.2 was possible. The configuration is deprecated and is no longer recommended by us and will be removed with a later update.

1.2) Integrating individual CSS code with configuration field

Enter the desired CSS code in the following configuration field: Tab "Others" => Block "Expert settings" => Section "Individual code" => Field "Individual CSS code".

The content of the configuration field is added directly in a <style> Tag in the "head" of the HTML page. Just enter the desired CSS code here.

Example:

.my-class { color: #000000; }

Tip: To apply the "Expert settings" in the storefront, please activate "Expert mode" and deactivate the "Debug mode" of ThemeWare®:

• Tab "Others" => Block "Expert settings" => Expert mode

• Expert mode

• Debug mode

2. Integrating CSS code with external CSS file

To deposit a file locally on your server and integrate it into the storefront, please proceed as follows:

2.1) Creating and editing a CSS file on the server

1. Log in to your server via FTP and switch to file "css". File path: "public/css/"

2. Create the file "styles.css".

3. Deposit your CSS code in file "styles.css".

4. Save the modification of the file "styles.css" and upload it again if necessary.

2.2) Embedding a CSS file with ThemeWare®

1. Open ThemeWare® in the Theme Manager and switch to the Tab "Others" => Block "Expert settings" => Section "CSS file"

2. Enter the path to the "styles.css" in the field "CSS file". (e.g. "yourshop.de/css/styles.css")

3. Select the option "Yes" in the field "Load CSS file".

4. Save the settings so that the current theme will be compiled and changes will take effect in the storefront.

Note: Access to external files (files on a different domain) is not recommended, see "Cross-Origin Resource Sharing".

3. Integrating SCSS code (for experienced users)

Please find a detailed instruction in the article:

Individual customizations by means of SCSS

---

Additional ThemeWare® knowledge

Delimitation of customizations

Customisation for a specific Sales Channel

If an CSS customisation is only relevant for a specific Sales Channel, you have the option of restricting your customisation via our ThemeWare® configuration with the "Body class".

To do this, enter a unique name for this Sales Channel (e.g.: myshopname) in the configuration of the corresponding theme (or theme duplicate) for the corresponding Sales Channel under Tab "Others" => Block "Expert settings" => Section "Individual CSS class" => Field "Body class".

This name can then be used for SCSS checks due to its position in the HTML body.

// Customisation for the Sales Channel with the class "myshopname"
.myshopname h1 {
    // Customization...
}

Customisation for a specific page (category)

If an CSS customisation is only relevant for a specific page, you have the option of restricting your customisation via the ThemeWare® custom field "Body class".

To do this, enter a unique name for this Sales Channel (e.g.: myshopname) in the configuration of the corresponding theme (or theme duplicate) for the corresponding Sales Channel under Tab "Others" => Block "Expert settings" => Section "Individual CSS class" => Field "Body class".

To do this, enter a unique name for this Sales Channel (e.g.: myshopname) in the custom field ‘Body class’ of the corresponding page (category) in the Tab "General" => Block "Additional fields" => Tab "Categories (ThemeWare® ...)" => Custom field "Body class" .

This name can then be used for SCSS checks due to its position in the HTML body.

// Customisation for the category with the class "myshopname"
.myshopname h1 {
    // Customization...
}

---

Tips

CSS hierarchy

You can easily adjust the CSS hierarchy when overwriting CSS/SCSS styles with the "Body class" in the ThemeWare® configuration. This allows you to avoid using !important statements.

You can find more information about this in the following tutorial:

CSS hierarchy