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:

Individual customizations by means of SCSSIndividual template customizations (Twig, HTML)

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:

ThemeWare® Customizing App (Cloud)

1. Preparing the app (only necessary for first use)

1. Download our app zip file

2. Unzip the zip file with "Unzip here".

2. Integrating customizations

SCSS customizations

1. Open the file "base.scss".

   • Path: "Resources/app/storefront/src/scss"

2. Paste the desired SCSS code

3. Save the file modification

Template customizations

1. 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.

2. Insert the desired Twig code

3. Save the file modification

3. Installing/updating the app

1. Deactivate and uninstall the "ThemeWare® Customizing App" in case you have already installed and activated it.

2. Zip the file "TcinnCustomizingApp"

3. Download the app to your shop via Shopware 6 Extension Management

4. 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 or Command (⌘) + Option/Alt (⌥) + 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:

CSS hierarchy

Template hierarchy

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:

manifest.xml

<storefront>
    <template-load-priority>100</template-load-priority>
</storefront>

shopware/tests/unit/Storefront/Theme/fixtures/Apps/test/manifest.xml at trunk · shopware/shopwareGitHub