In this tutorial you will learn how to perform individual customizations with the "ThemeWare® Customizing Plugin.
Last updated
© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH
How to change the appearance of ThemeWare® in Shopware 6 (self-managed) by means of a individual customization and with our free "ThemeWare® Customizing Plugin", you will learn in this article.
Tip: Creatinging a ThemeWare® duplicate is not necessary for SCSS or template customizations.
Note: Please use the "ThemeWare® Customizing App" in the Shopware 6 Cloud.
For individual customizations in Shopware 6, you need your own theme or a separate extension (plugin or app) and not – as in Shopware 5 – a theme derivation.
Check if there is already a suitable extension in the Shopware Community Store
Alternatively, you may use the following method with the "ThemeWare® Customizing Plugin.
In the following we will explain the way using our "ThemeWare® Customizing Plugin".
This article is intended for experienced users. We therefore assume in this article that you already internalized the basics of customization via SCSS and Twig.
In case you are not experienced in using SCSS and Twig, you will find helpful basics on the topic of individual SCSS and template customizations in the following articles:
Tip: In case you are inexperienced in using SCSS and Twig, we recommend you to seek assistance. We will be happy to assist you with individual customizations: Request customizations
Shopware 6 currently lacks a full-fledged child theme which allows to embed files and make modifications (like Shopware 5). We have developed a small free "ThemeWare® Customizing Plugin" as workaround for the integration of customizations and own files in Shopware 6 (self-hosted).
All information about the "ThemeWare® Customizing Plugin", the installation and the download link are available in the following article:
Download the zip file of our extension
Unzip the zip file with "Unzip here".
SCSS adjustments
SCSS file(s)
Create a new SCSS file and import it using the file "base.scss"
Path: "src/Resources/app/storefront/src/scss"
Tip: Just orient yourself regarding file name and path to the source files.
Note: Create required or missing folders.
You may also deposit your SCSS code directly in the "base.scss".
Insert your desired SCSS code
Save the modification of the file(s)
Template customizations
Create a new template file and derive the desired source file from it
Path: "src/Resources/views/storefront"
Tip: Just refer to the source file for file naming.
Note: Create required or missing folders.
Enter the desired Twig code
Save the file modification
Deactivate and uninstall the "ThemeWare® Customizing Plugin" in case you have already installed and activated it.
Zip the folder "TcinnCustomizing"
Download the extension using Shopware 6 Extension Management in your shop
Then install and activate the extension
Open the active ThemeWare® in the Theme Management and save the settings unchanged in order to compile the theme and transfer your modifications to the storefront.
Clear the Shopware cache in the Shopware settings ("Settings" => "System" => "Caches & Indizes" > "Clear Caches").
Clear the browser cache
Windows: Ctrl + F5
Mac: Command (⌘) + Shift (⇧) + R or Command (⌘) + Option/Alt (⌥) + R
The modification should now be visible in your storefront.
The extension can also be edited directly on the FTP. Deactivate it before you make modifications and activate it again when you are ready.
If you want to make changes later on, deactivate the extension via the Extension Management before uploading the extension again. Activate the extension when you are done.
Note: It may be necessary to uninstall the extension once in order to apply changes to the storefront.
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:
Since Shopware 6.4.12, you can use the getTemplatePriority() method to define the render order of the extensions (Default: -1).
So that you can overwrite other extensions with the "Customizing Plugin", you must change the priority via a feature in TcinnCustomizing.php:
