Individual customizations with the ThemeWare® Customizing Plugin

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.

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

Helpful basics

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:

Integrating customizations with the ThemeWare® Customizing Plugin (for experienced users)

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:

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

1. Download the zip file of our extension
2. Unzip the zip file with "Unzip here".

2. Integrating customizations

In the folder TcinnCustomizing, you will find all the files for the extension.

SCSS adjustments

1. SCSS file(s)
   1. 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.
   2. You may also deposit your SCSS code directly in the "base.scss".
2. Insert your desired SCSS code
3. Save the modification of the file(s)

Template customizations

1. 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.
2. Enter the desired Twig code
3. Save the file modification

3. Installing/updating the extensoin

1. Deactivate and uninstall the "ThemeWare® Customizing Plugin" in case you have already installed and activated it.
2. Zip the folder "TcinnCustomizing"
3. Download the extension using Shopware 6 Extension Management in your shop
4. Then install and activate the extension

4. Compiling theme (always necessary for SCSS changes)

• 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 cache (always necessary for template modifications)

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

Extension "live" editing

The extension can also be edited directly on the FTP. Deactivate it before you make modifications and activate it again when you are ready.

Subsequent modifications

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.

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:

Template hierarchy

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:

public function getTemplatePriority(): int
{
    return 100; // hohe Priorität
}

https://github.com/shopware/shopware/blob/trunk/src/Core/Framework/Bundle.php#L96-L99