# ThemeWare® Customizing App (Cloud)

Individual customizations have to be implemented in Shopware 6 with an own theme or an extension (plugin or app).

For the integration of individual customizations you may use an extension from the [Shopware Community Store](https://store.shopware.com/en/extensions/?p=1\&o=12\&n=21\&c=2069\&shopwareVersion=6) or our free "ThemeWare® Customizing App" (an extension based on the app system of Showpare 6).

{% hint style="info" %}
**Note**: Please use the "[ThemeWare® Customizing Plugin](https://knowledge.themeware.design/more-knowledge/themeware-tools/themeware-customizing-plugin)" in Shopware 6 (self-managed).
{% endhint %}

***

## Download

You can find the **download link** for the free "Customising plugin" via the **ThemeWare® Utilities**:

{% embed url="<https://service.themeware.design/en/themeware-utilities>" %}
ThemeWare® Utilities
{% endembed %}

{% hint style="warning" %}
**Important**: Please note that we offer the "ThemeWare® Customizing App" free of charge and **cannot provide support** for the App or individual customisations.
{% endhint %}

***

## Installation

The app has to be uploaded using the administration of Shopware via "Extensions" => "My extensions" and the button "Upload extension".

Install and activate the plugin after that.

It can happen that the error "`Undefined variable $twt-color-brand-secondary-light`" appears during activation. However, the app is still activated.

> Unable to compile the theme "Storefront". Undefined variable $twt-color-brand-secondary-light...

After activation, recompile your ThemeWare® theme once (just save the theme configuration unchanged, for example) and clear the Shopware cache.

Please find more information regarding the manual installation of extensions in the article:

{% content-ref url="../../knowledge-base/shopware/configuration/extensions/installing-extensions-manually" %}
[installing-extensions-manually](https://knowledge.themeware.design/knowledge-base/shopware/configuration/extensions/installing-extensions-manually)
{% endcontent-ref %}

If the extension has been successfully installed, example implementations (a JavaScript "test alert" and a "test banner") appear in the Storefront.

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2FsbfzW7q0QsGEF3wD7g8n%2Fimage.png?alt=media&#x26;token=09d9b7be-0400-4253-b9fa-943475251d94" alt=""><figcaption><p>ThemeWare® Customizing App</p></figcaption></figure>

### Activate/deactivate example implementations

From version 4.0, you can activate or deactivate the example implementations (e.g. the "test banner") in the app settings.

***

## Structure and feature

Using the "ThemeWare® Customizing App", it is possible to deposit individual customizations. In this context, the following folders and files are relevant

* **File "base.scss":**
  * Basis for all customizations with CSS/SCSS
  * **Folder**: `Resources/app/storefront/src/scss`
  * **Note**: The file contains sample customizations which can be edited or deleted.
* **File "base.html.twig":**
  * Example for template customization with Twig/HTML
  * **Folder**: `Resources/views/storefront`
  * **Note**: The file contains sample customizations which can be edited or deleted.
* **File "custom.plugin.js":**
  * Example of a JS plugin (imported via the file `Resources/app/storefront/src/main.js`)
  * **Folder**: `Resources/app/storefront/src/js`
  * **Note**: The file contains a sample JS plugin that can be edited or deleted.
* **Assets**
  * **Folder**: `Resources/public`

{% hint style="info" %}
**Note**: You can find example customisations in "base.scss", "base.html.twig" and "custom.plugin.js". Adjust the content of the files to your requirements.
{% endhint %}

***

## Update

As the plugin is free of charge and not available via the Shopware Store, there is currently no automatic update option.

Deactivate the plugin before you perform a Shopware update. You can find information on how to update your plugin manually below:

### Manual update

As all changes are overwritten on file level when updating extensions, it is important to backup the folder `custom/apps/TcinnCustomizingApp/src` before updating and upload it again after the update.

{% hint style="info" %}
**HinwNote**: You can find the latest version in the [ThemeWare® Utilities](https://service.themeware.design/en/themeware-utilities).
{% endhint %}

Below you will find notes on manual update options for the latest Shopware 6 major releases:

### Shopware 6.7

The customising app for Shopware 6.6 is already compatible with Shopware 6.7.

The only change that needs to be made is to the twig block for our example customisation, but you have probably already removed this block:

<pre class="language-twig" data-title="base.html.twig"><code class="lang-twig">{% block base_header %}
>>
<strong>{% block base_body_inner %}
</strong></code></pre>

{% hint style="info" %}
**Note**: Please note that your individual customizations may also need to be made compatible.
{% endhint %}

For more information about the extensive changes to the storefront in Shopware 6.7, please visit the ThemeWare® Service Portal:

{% embed url="<https://service.themeware.design/en/news/20250519-shopware-6.7-what-you-need-to-know>" %}

### Shopware 6.6

To make the "Customising App" compatible for Shopware 6.6, you need to make the following changes:

#### SCSS

If you have not already done so for Shopware 6.5, please update the file "\_**messagebox.scss**":

<pre class="language-scss" data-title="_messagebox.scss"><code class="lang-scss">color: color-yiq($twt-color-brand-secondary-light);
>>
<strong>color: color-contrast($twt-color-brand-secondary-light);
</strong></code></pre>

#### JavaScript

In addition, the integration of JavaScript plugins into the storefront has been changed with Shopware 6.6. Please delete all scripts in the folder`Resources\app\storefront\dist\storefront\js` and rebuild the storefront once (e.g. with build-storefront.sh).

{% hint style="info" %}
**Note**: Please note that your individual customizations may also need to be made compatible.
{% endhint %}

For more information on the extensive changes to the storefront in Shopware 6.6, please visit the Shopware Blog:

{% embed url="<https://service.themeware.design/en/news/20240308-shopware-6.6>" %}

### Shopware 6.5

To make the customising plugin basically compatible for Shopware 6.5, it is sufficient to modify the required Shopware version in the "**\_messagebox.scss**" file as follows:

<pre class="language-scss" data-title="_messagebox.scss"><code class="lang-scss">color: color-yiq($twt-color-brand-secondary-light);
>>
<strong>color: color-contrast($twt-color-brand-secondary-light);
</strong></code></pre>

This makes the extension compatible with Shopware 6.5 and it does not need to be updated.

> Stand: Shopware 6.6.0