Individual customizations by means of SCSS

In this article you will learn how to perform SCSS customization using the "ThemeWare® customizing plugin.

In case you wish to customize the appearance of ThemeWare® using SCSS, useful tips for working with SCSS files are available in this article.

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

Introduction

In order to be able to deposit the corresponding SCSS customizations without problems you should use a separate extension for individual customizations.

• Check whether there already is a suitable extension in the Shopware Community Store

• Alternatively, you may use the manual method with our "ThemeWare® Customizing Plugin" or the "ThemeWare® Customizing App" (Cloud) (see section "Integrating SCSS code (for experienced users)").

Viewing the source code

The basic structure (folders, SCSS files, etc.) is provided by the Shopware theme "Shopware default theme" since ThemeWare® is technically an "extension" of it.

Note: In the Shopware Cloud it is currently not possible to view files from extensions (plugins, apps or themes).

Attention: Do Never edit original files of Shopware or any extensions (plugins, apps or themes)!

Even though you are not allowed to edit the original ThemeWare® files, it sometimes is necessary to look something up in here. You will find the ThemeWare® SCSS files under the following paths in your Shopware folder (XYZ = Modern, Living, Clean, etc.):

ThemeWare® Pro Edition

custom/plugins/TcinnThemeWareXYZ/src/Resources/app/storefront/src/scss/
custom/plugins/TcinnThemeWareXYZ/src/Resources/app/storefront/src/scss/themeware/

ThemeWare® Cloud Edition

custom/apps/TcinnThemeWareXYZApp/Resources/app/storefront/src/scss
custom/apps/TcinnThemeWareXYZApp/Resources/app/storefront/src/scss/themeware

ThemeWare® derives only the necessary SCSS files as part of our HC-Architecture® and adds its own SCSS files for own features and functions (e.g. widgets).

In addition, you will find the source code of the Shopware default theme on GitHub. The folder "app/storefront/src/scss" contains all SCSS files which are relevant for the storefront.

Integrating SCSS code (for experienced users)

Shopware 6 currently lacks a full-fledged child theme that allows you to include files and make changes (like Shopware 5). We have developed a small free "ThemeWare® Customizing Plugin" or a "ThemeWare® Customizing App" (Cloud) as a workaround for the integration of individual customizations and own files.

All information regarding the installation and the download links are available in the following articles:

Individual customizations with the ThemeWare® Customizing PluginIndividual customizations with the ThemeWare® Customizing App (Cloud)

Helpful SCSS basics

Individual customizations have to be deposited in the file "base.scss". For better structuring, it is possible to access additional folders and files for numerous customizations. These can easily be integrated using @import.

@import 'your-file.scss';

Note: Further information concerning the topic "SCSS" are available in the SASS documentation: https://sass-lang.com

Example customization in the file "base.scss"

In the following example, the product name is modified on the product page.

// Example: Colour change of the article name on the article page

$my-variable: #FF0004;

.is-ctl-product {
  .product-detail-name {
    padding: 10px;
    color: $my-variable;
  }
}

---

Additional ThemeWare® knowledge

Finding ThemeWare® Variables

Using our ThemeWare® Config-Finder you have the possibility of displaying all ThemeWare® variables. The "technical name" in this overview is the name of the corresponding variable you can use in Twig or SCSS.

Important: The use of theme variables in plugins starting from Shopware 6.4.7.0 unfortunately is no longer possible.

Delimitation of customizations

Customisation for a specific Sales Channel

If an SCSS 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 SCSS 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