Individual customizations with the ThemeWare® Customizing Plugin

In this tutorial you will learn how to perform 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.

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.

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:

pageIndividual customizations by means of SCSSpageIndividual template customizations (Twig, HTML)

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

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:

pageThemeWare® Customizing Plugin

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

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

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:

pageCSS hierarchy