ThemeWare® Customizing App (Cloud)

In this article you will learn all about the free "ThemeWare® Customizing App".

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 or our free "ThemeWare® Customizing App" (an extension based on the app system of Showpare 6).

Note: Please use the "ThemeWare® Customizing Plugin" in Shopware 6 (self-managed).

---

Download

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

ThemeWare® Utilities | ThemeWare® Service Portal

ThemeWare® Utilities

Important: Please note that we offer the "ThemeWare® Customizing App" free of charge and cannot provide support for the App or individual customisations.

---

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:

pageInstall extensions manually

If the extension has been successfully installed, a JavaScript "test message" and a "test banner" appear in the storefront:

ThemeWare® Customizing App

---

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

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.

---

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.

HinwNote: You can find the latest version in the ThemeWare® Utilities.

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

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

_messagebox.scss

color: color-yiq($twt-color-brand-secondary-light);

color: color-contrast($twt-color-brand-secondary-light);

JavaScript

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

Note: Please note that your individual customizations may also need to be made compatible.

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

Shopware 6.6: A look ahead | ThemeWare® Service Portal

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:

_messagebox.scss

color: color-yiq($twt-color-brand-secondary-light);

color: color-contrast($twt-color-brand-secondary-light);

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

Stand: Shopware 6.6.0