In this article you will learn how to perform SCSS customization using the "ThemeWare® customizing plugin.
Last updated
Was this helpful?
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.
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
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)").
The basic structure (folders, SCSS files, etc.) is provided by the Shopware theme "" since ThemeWare® is technically an "extension" of it.
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® 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).
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 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.
In the following example, the product name is modified on the product page.
Important: The use of theme variables in plugins starting from Shopware 6.4.7.0 unfortunately is no longer possible.
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.
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.
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:
In addition, you will find the source code of the Shopware default theme on . The folder "app/storefront/src/scss" contains all SCSS files which are relevant for the storefront.
Note: Further information concerning the topic "SCSS" are available in the SASS documentation:
Using our 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.