Individual customizations with the ThemeWare® Customizing App (Cloud)
In this tutorial you will learn how to conduct individual customizations with the "ThemeWare® Customizing App in the Shopware Cloud.
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.
Note: Please use the "ThemeWare® Customizing Plugin" in Shopware 6 (self-managed).
Introduction
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 Shopware Community Store
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".
Helpful basics
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: Request customizations
Integrating customizations with the ThemeWare® Customizing App (for experienced users)
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:
1. Preparing the app (only necessary for first use)
Download our app zip file
Unzip the zip file with "Unzip here".
2. Integrating customizations
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
3. Installing/updating the app
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
4. Compiling the theme (always necessary for SCSS modifications)
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.
5. Clear the cache (always necessary for template modifications)
Clear the browser cache
Windows: CTRL + F5
Mac: Command + Shift + R
The modification should now be visible in your storefront.
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:
Last updated