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.

• Body class: Tab "Others" => Block "Expert settings" => Section "Individual CSS class"

For example, enter "myshop" here and place this at the beginning of the corresponding CSS/SCSS selector.

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

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

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:

Shopware 6 lacks currently a full-fledged child theme which allows you to include files and make changes (as for example in Shopware 5). Furthermore, you do not have access to the file system in the cloud. 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. Download our app zip file

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

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

SCSS customizations

1. Open the file "base.scss".

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

2. Paste the desired SCSS code

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.

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

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

In case you wish to customize the appearance of ThemeWare® using SCSS, useful tips for working with SCSS files are available in this article.

Introduction

In order to be able to deposit the corresponding SCSS customizations without problems you should use a separate extension for individual customizations.

• Check whether there already is a suitable extension in the Shopware Community Store

• Alternatively, you may use the manual method with our "ThemeWare® Customizing Plugin" or the "ThemeWare® Customizing App" (Cloud) (see section "Integrating SCSS code (for experienced users)").

The basic structure (folders, SCSS files, etc.) is provided by the Shopware theme "" since ThemeWare® is technically an "extension" of it.

Even though you are not allowed to edit the original ThemeWare® files, it sometimes is necessary to look something up in here. You will find the ThemeWare® SCSS files under the following paths in your Shopware folder (XYZ = Modern, Living, Clean, etc.):

ThemeWare® derives only the necessary SCSS files as part of our HC-Architecture® and adds its own SCSS files for own features and functions (e.g. widgets).

In addition, you will find the source code of the Shopware default theme on . The folder "app/storefront/src/scss" contains all SCSS files which are relevant for the storefront.

Shopware 6 currently lacks a full-fledged child theme that allows you to include files and make changes (like Shopware 5). We have developed a small free "ThemeWare® Customizing Plugin" or a "ThemeWare® Customizing App" (Cloud) as a workaround for the integration of individual customizations and own files.

All information regarding the installation and the download links are available in the following articles:

Individual customizations have to be deposited in the file "base.scss". For better structuring, it is possible to access additional folders and files for numerous customizations. These can easily be integrated using @import.

In the following example, the product name is modified on the product page.

Using our you have the possibility of displaying all ThemeWare® variables. The "technical name" in this overview is the name of the corresponding variable you can use in Twig or SCSS.

If an SCSS customisation is only relevant for a specific Sales Channel, you have the option of restricting your customisation via our ThemeWare® configuration with the "Body class".

To do this, enter a unique name for this Sales Channel (e.g.: myshopname) in the configuration of the corresponding theme (or theme duplicate) for the corresponding Sales Channel under Tab "Others" => Block "Expert settings" => Section "Individual CSS class" => Field "Body class".

This name can then be used for SCSS checks due to its position in the HTML body.

If an SCSS customisation is only relevant for a specific page, you have the option of restricting your customisation via the ThemeWare® custom field "Body class".

To do this, enter a unique name for this Sales Channel (e.g.: myshopname) in the configuration of the corresponding theme (or theme duplicate) for the corresponding Sales Channel under Tab "Others" => Block "Expert settings" => Section "Individual CSS class" => Field "Body class".

To do this, enter a unique name for this Sales Channel (e.g.: myshopname) in the custom field ‘Body class’ of the corresponding page (category) in the Tab "General" => Block "Additional fields" => Tab "Categories (ThemeWare® ...)" => Custom field "Body class" .

This name can then be used for SCSS checks due to its position in the HTML body.

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:

In this section you will find many useful instructions concerning the topic "individual customizations".

Customisations are individual programmings (= individual code) that go beyond the scope of the features and CSS classes provided by ThemeWare®. These include, for example:

• CSS customisations

  • Writing and/or adding of individual CSS/SCSS code

  • e.g. .my-shop { color: red; }

• JavaScript customisations

  • Writing and/or adding of individual JavaScript code

  • e.g. <script src="myScript.js">...

• Template customisations

  • Writing and/or adding of individual HTML/Twig code

ThemeWare® offers you with the tutorials in this section, the expert configuration or the free customising plugin, ThemeWare® offers you various options for adding your own code to the Storefront. However, this is primarily intended for professionals and experts who know exactly what they are doing, because customised code can cause various problems in the Storefront or open up potential vulnerabilities!

If you are not absolutely sure, you can request support in creating your desired customisation via the ThemeWare® Service Portal:

In this article you will learn how to use Bootstrap in the Shopware 6 Storefront.

There are various parts of Bootstrap which you can use in the Shopware 6 storefront:

• CSS classes

• HTML elements

...

You have several options with ThemeWare® to embed your own JS code in your shop.

Please note that custom code is not automatically compressed. It is best to compress your custom code manually before embedding it.

Also note that individual scripts are not automatically included in the cookie content manager of Shopware. If you use cookie relevant JS code, make sure that it is correctly integrated into the cookie content manager.

Before we talk about embedding JS code, we would like to point out that you should never edit original Shopware files or extensions (plugins, apps or themes). This can lead to various problems.

In addition, we point out that the functionality of Shopware, ThemeWare® and third-party extensions can be significantly affected by incorrect JavaScript code. Therefore, be sure to write clean and correct JS code!

1. Integrate JavaScript code with configuration field

Enter the desired JS code in the following configuration field: Tab "Others" => Block "Expert settings" => Section "Individual code" => Field "Individual JavaScript code".

The content of the configuration field is added 1:1 at the end of the HTML page. So please enter the full <script> tag here.

To deposit a file locally on your server and integrate it into the storefront, please proceed as follows:

1. Log in to your server via FTP and switch to file "js". File path: "public/js/"

2. Create the file "script.js".

3. Deposit your CSS code in file "script.js".

1. Open ThemeWare® in the Theme Manager and switch to the Tab "Others" => Block "Expert settings" => Section "JS file"

2. Enter the path to the "script.js" in the field "JS file". (e.g. "yourshop.de/js/script.js")

3. Select the option "Yes" in the field "Load JS file".

Currently, the most professional way to integrate JavaScript code is to use a separate extension. There are special extensions (plugins or apps) for this in the .

Alternatively, you can use our free "ThemeWare® Customizing Plugin" (self-managed) or the "ThemeWare® Customizing App" (cloud) to integrate customizations and your own files.

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

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:

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. Download the zip file of our extension

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

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

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.

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

• 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 Shopware cache in the Shopware settings ("Settings" => "System" => "Caches & Indizes" > "Clear Caches").

• Clear the browser cache

  • Windows: Ctrl + F5

The modification should now be visible in your storefront.

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

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.

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 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:

With ThemeWare® you have got several options to add your own CSS styling to your shop. Depending on what you want to change and how extensive the modifications are, you choose the method that suits you best.

Please note that custom code is not automatically compressed. It is best to compress your custom code manually before embedding it.

Before we talk about embedding CSS code, we would like to point out that you should never edit original Shopware files or extensions (plugins, apps or themes). This can lead to various problems.

In order to make it as easy as possible for you to decide which way to go, we have listed the advantages and disadvantages of each:

Advantages and disadvantages

1. Integrating CSS code using the ThemeWare® configuration

Using the ThemeWare® configuration, it is possible to deposit small CSS adjustments quickly and easily. This code is not compressed and only CSS syntax is possible, however this is the easiest way for beginners.

1.1) Integrating CSS code with snippets

• Advantages

  • fast procedure (via the Shopware 6 snippet management)

• Disadvantages

1.2) Integrating CSS code with configuration field

• Advantages

  • quickest procedure (using the ThemeWare® configuration)

  • recommended method

The ThemeWare® configuration also offers you the option to include an external file via a URL. This way, a file which is available via a CDN (Content Delivery Network) can also be integrated.

• Advantages

  • external file integrable

• Disadvantages

Currently, the most advanced way to integrate SCSS code is to use a separate extension. There are special extensions (plugins or apps) for this in the .

Alternatively, you may use our free "ThemeWare® Customizing Plugin" (self-managed) or the "ThemeWare® Customizing App" (Cloud) for the integration of individual customizations and your own files.

• Advantages

  • professional approach

  • SCSS syntax possible

Place the desired CSS code in the snippet "twt.custom.css" and activate the following configuration field: Tab "Others" => Block "Deprecated" => field "Individual CSS code (snippet)".

Enter the desired CSS code in the following configuration field: Tab "Others" => Block "Expert settings" => Section "Individual code" => Field "Individual CSS code".

The content of the configuration field is added directly in a <style> Tag in the "head" of the HTML page. Just enter the desired CSS code here.

To deposit a file locally on your server and integrate it into the storefront, please proceed as follows:

1. Log in to your server via FTP and switch to file "css". File path: "public/css/"

2. Create the file "styles.css".

3. Deposit your CSS code in file "styles.css".

1. Open ThemeWare® in the Theme Manager and switch to the Tab "Others" => Block "Expert settings" => Section "CSS file"

2. Enter the path to the "styles.css" in the field "CSS file". (e.g. "yourshop.de/css/styles.css")

3. Select the option "Yes" in the field "Load CSS file".

Please find a detailed instruction in the article:

If an CSS customisation is only relevant for a specific Sales Channel, you have the option of restricting your customisation via our ThemeWare® configuration with the "Body class".

To do this, enter a unique name for this Sales Channel (e.g.: myshopname) in the configuration of the corresponding theme (or theme duplicate) for the corresponding Sales Channel under Tab "Others" => Block "Expert settings" => Section "Individual CSS class" => Field "Body class".

This name can then be used for SCSS checks due to its position in the HTML body.

If an CSS customisation is only relevant for a specific page, you have the option of restricting your customisation via the ThemeWare® custom field "Body class".

To do this, enter a unique name for this Sales Channel (e.g.: myshopname) in the configuration of the corresponding theme (or theme duplicate) for the corresponding Sales Channel under Tab "Others" => Block "Expert settings" => Section "Individual CSS class" => Field "Body class".

To do this, enter a unique name for this Sales Channel (e.g.: myshopname) in the custom field ‘Body class’ of the corresponding page (category) in the Tab "General" => Block "Additional fields" => Tab "Categories (ThemeWare® ...)" => Custom field "Body class" .

This name can then be used for SCSS checks due to its position in the HTML body.

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:

In case you want to change the appearance of ThemeWare® individually by means of a template customization, you will find useful tips for working with template files in this article.

Introduction

For individual template customizations in Shopware 6 you need an own theme or a separate extension (plugin or app) and not – as in Shopware 5 – a theme derivative.

• Check whether there already is a suitable extension in the Shopware Community Store

• Alternatively, you may use the manual method using our "ThemeWare® Customizing Plugin" or the "ThemeWare® Customizing App" (see section "Integrating template customizations (for experienced users)").

The basic structure (folders, template files, Twig blocks, etc.) is given by the Shopware theme, "" since ThemeWare® is technically an "extension" of it.

ThemeWare® only derives the necessary template files within the scope of our HC-Architecture® and adds for its own functions and features (e.g. widgets) its own template files.

In addition, please find the source code of the Shopware default theme on . The folder "views/storefront" contains all template files which are relevant for the storefront.

When looking for a specific place in the templates, you can use e.g. the inspector of your browser to find a CSS class which is located at the corresponding element or at least in the immediate vicinity of the corresponding element.

Now you can search for this CSS class in the . In most cases a suitable template file will be found quite soon.

For example, if you want to add something below the product description, take a closer look at the HTML code of the description:

The description is surrounded by a <div> with the class product-detail-description-text.

We search in the Git repository for this CSS class and find the file description.html.twig (see ).

A look at the source code of this file shows that the <div> with the product-detail-description-text class is located in the Twig block component_product_description_content_text.

So derive the file description.html.twig for your template customisation and extend the Twig block component_product_description_content_text.

Further information on deriving and extending template files can be found below.

Currently, Shopware 6 lacks a full-fledged child theme that allows you to include files and make changes (like Shopware 5). As a workaround, we have developed a small free "ThemeWare® Customizing Plugin" or "ThemeWare® Customizing App" for integrating individual customizations and your own files.

All information about the extensions, installation and download links can be found in the following articles:

Shopware 6 uses Twig as template engine and no longer Smarty as used in Shopware 5. However, many things are the same or at least very similar in TwigIn order to give you a rough overview of Twig, we have briefly summarized the most important information in the following.

In the first line of the file it has to be defined from which superior file it is derived.

In order to place your own content in front of or behind the actual content of the block, you do not have to copy the entire code of the block. You can use the parent command as follows:

In case you want to replace the original content of the block completely, you can omit the parent command to empty the block.

The output of all variables available on the page can be obtained with the dump command. The output has to be in a block and is only available in

The name of the desired snippet is available in the snippet management of your administration ("Settings" => "Shop" => "Snippets").

In order that the translations of the individual snippets are being considered, use the addition |trans.

An additional field at the product level is output as follows:

An additional field for categories will be output as follows:

The query of a theme variable (e.g. the ThemeWare® configuration "Body class") in a Twig block works as follows:

The output of a theme variable must also take place in a Twig block. The following example shows the ThemeWare® configuration "Body class" (Tab "Others" => Block "Expert settings" => Section "Individual CSS class" => Field "Body class").

Our provides you with the opportunity to have all ThemeWare® variables displayed. The "technical name" in this overview is the name of the corresponding variable you can use in Twig or SCSS.

In case a template customization is only relevant for a certain sales channel, you have the possibility to limit your customization for example via the ThemeWare® configuration with the "Body class".

For this purpose, enter a unique name for this sales channel (e.g. myshopname) in the theme duplicate for the corresponding sales channel using Tab "Others" => Block "Expert settings" => Section "Individual CSS class" => Field "Body class".

This name can then be used for Twig in an additional loop.

Alternatively, you may also bind your customization to the ID of the sales channel: