In this tutorial you will learn how to conduct individual customizations with the "ThemeWare® Customizing App in the Shopware Cloud.
Last updated
Was this helpful?
In this article you will discover how to change the appearance of ThemeWare® in the Shopware 6 Cloud using individual customization and our free "ThemeWare® Customizing App".
Tip: Creatinging a ThemeWare® duplicate is not necessary for SCSS or template customizations.
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 whether there already exists a suitable extension in the
Alternatively, you may use the following method with the "ThemeWare® Customizing App".
In the following we are going to explain the way using our "ThemeWare® Customizing App".
This article is intended for experienced users. Therefore, in this article we assume that you already have internalized the basics of customization via SCSS and Twig.
In case you are not experienced in using SCSS and Twig, please refer to the following articles for helpful basics on custom SCSS and template customization:
Tip: In case you are inexperienced in using SCSS and Twig, we recommend you to seek assistance. We will gladly support you with individual customizations as well:
Important: The ability to manually install apps in the cloud is still very new and currently in the beta phase!
Shopware 6 lacks currently a full-fledged child theme which allows you to include files and make changes (as for example in Shopware 5). We have developed a small free "ThemeWare® Customizing App" as a workaround for the integration of customizations and own files in the Shopware 6 Cloud.
All information about the "ThemeWare® Customizing App", the installation as well as the download link are available in the following article:
Download our app zip file
Unzip the zip file with "Unzip here".
SCSS customizations
Open the file "base.scss".
Path: "Resources/app/storefront/src/scss"
Paste the desired SCSS code
Save the file modification
Template customizations
Create a new template file and deduce the desired source file within it
Path: "Resources/views/storefront"
Tip: Just orient yourself regarding file naming on the source file.
Note: Create required or missing files.
Insert the desired Twig code
Save the file modification
Deactivate and uninstall the "ThemeWare® Customizing App" in case you have already installed and activated it.
Zip the file "TcinnCustomizingApp"
Download the app to your shop via Shopware 6 Extension Management
Then install and activate the app
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 browser cache
Windows: Ctrl + F5
Mac: Command (⌘) + Shift (⇧) + R or Command (⌘) + Option/Alt (⌥) + R
The modification should now be visible in your 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 storefront.template-load-priority config to define the render order of extensions (Default: -1).
So that you can overwrite other extensions with the "Customizing App", you must change the priority via a feature in manifest.xml:
