# ThemeWare® Customizing App (Cloud) Individuelle Anpassungen müssen bei Shopware 6 mit einem eigenen Theme oder einer Erweiterung (Plugin oder App) umgesetzt werden. Für die Integration von individuellen Anpassungen kannst du eine Erweiterung aus dem [Shopware Community Store](https://store.shopware.com/erweiterungen/?shopwareVersion=6\&p=1) oder unsere kostenfreie "ThemeWare® Customizing App" (eine Erweiterung auf Basis des App-Systems von Showpare 6) einsetzen. {% hint style="info" %} **Hinweis**: Nutze in der Shopware 6 (self-managed) bitte das "[ThemeWare® Customizing Plugin](/mehr-wissen/themeware-tools/themeware-customizing-plugin.md)". {% endhint %} *** ## Download Den **Download-Link** für das kostenlose "Customizing Plugin" erhältst du über die **ThemeWare® Utilities**: {% embed url="" %} ThemeWare® Utilities {% endembed %} {% hint style="warning" %} **Wichtig**: Bitte beachte, dass wir die "ThemeWare® Customizing App" kostenfrei anbieten und für die App oder individuelle Anpassungen **keinen Support** anbieten können. {% endhint %} *** ## Installation {% hint style="warning" %} **Wichtig**: Die Möglichkeit Apps manuell in der Cloud installieren zu können ist noch ganz frisch und derzeit in der Beta-Phase! {% endhint %} Die App muss über die Administration von Shopware unter "Erweiterungen" => "Meine Erweiterungen" über den Button "Erweiterung hochladen" hochgeladen werden. Installiere und aktiviere die App danach. Es kann vorkommen, dass bei der Aktivierung der Fehler "Undefined variable $twt-color-brand-secondary-light" erscheint. Die App wird aber dennoch aktiviert. > Unable to compile the theme "Storefront". Undefined variable $twt-color-brand-secondary-light... Kompiliere nach der Aktivierung einmal dein ThemeWare® Theme neu (speichere dazu beispielsweise einfach die Theme-Konfiguration unverändert ab) und leere einmal den Shopware-Cache. Mehr Informationen zur manuellen Installation von Erweiterungen findest du im Artikel: {% content-ref url="/pages/WLx8GDaaVRA1MQmhsr2v" %} [Erweiterungen manuell installieren](/wissensdatenbank/shopware/konfiguration/erweiterungen/erweiterungen-manuell-installieren-1.md) {% endcontent-ref %} Wurde die Erweiterung erfolgreich installiert, erscheinen Beispiel-Implementierungen (eine JavaScript "Testnachricht" und ein "Testbanner") in der Storefront:

ThemeWare® Customizing App

### Beispiel-Implementierungen aktivieren/deaktivieren Ab Version 4.0 kannst du in den App-Einstellungen die Beispiel-Implementierungen (z.B. den "Testbanner") aktivieren bzw. deaktivieren. *** ## Aufbau und Funktion Durch die "ThemeWare® Customizing App" ist es möglich individuelle Anpassungen hinterlegen zu können. Die nachfolgenden Ordner und Dateien sind dabei relevant. * **Datei "base.scss":** * Basis für alle Anpassungen mit CSS/SCSS * **Ordner**: `Resources/app/storefront/src/scss` * **Hinweis**: In der Datei sind Beispielanpassungen hinterlegt, die bearbeitet oder gelöscht werden können. * **Datei "base.html.twig":** * Beispiel für Template-Anpassungen mit Twig/HTML * **Ordner**: `Resources/views/storefront` * **Hinweis**: In der Datei sind Beispielanpassungen hinterlegt, die bearbeitet oder gelöscht werden können. * **Datei "custom.plugin.js":** * Beispiel für ein JS-Plugin (wird über die Datei `Resources/app/storefront/src/main.js` importiert) * **Ordner**: `Resources/app/storefront/src/js` * **Hinweis**: In der Datei ist ein Beispiel JS-Plugin hinterlegt, das bearbeitet oder gelöscht werden kann. * **Assets** * **Ordner**: `Resources/public` {% hint style="info" %} **Hinweis**: In der "base.scss", der "base.html.twig" sowie der "custom.plugin.js" findest du Beispielanpassungen. Passe den Inhalt der Dateien an deine Wünsche an. {% endhint %} *** ## Update Da das Plugin kostenfrei und nicht über den Shopware Store erhältlich ist, gibt es derzeit keine automatische Update-Möglichkeit. Deaktiviere das Plugin bevor du ein Shopware-Update durchführst. Informationen zum manuellen aktualisieren deines Plugins findest du nachfolgend: ### Manuelles Update Da bei einem Update von Erweiterungen alle Änderungen auf Datei-Ebene überschrieben werden ist es wichtig den Ordner `custom/apps/TcinnCustomizingApp/src` vor einem Update zu sichern und nach dem Update wieder hochzuladen. {% hint style="info" %} **Hinweis**: Eine aktuelle Version findest du in den [ThemeWare® Utilities](https://service.themeware.design/themeware-utilities). {% endhint %} Nachfolgend findest du Hinweise zu manuellen Update-Möglichkeiten für die letzten Shopware 6 Major-Releases: ### Shopware 6.7 Die Customizing-App für Shopware 6.6 ist bereits kompatibel mit Shopware 6.7. Die einzige Änderung die nötig ist betrifft den Twig-Block für unsere Beispielanpassung, diesen Block hast du aber vermutlich bereits entfernt oder aus kommentiert: {% code title="base.html.twig" %} ```twig >> ``` {% endcode %} {% hint style="info" %} **Hinweis**: Bitte beachte, dass Deine individuellen Anpassungen ggf. ebenfalls kompatibel gemacht werden müssen. {% endhint %} Mehr Informationen zu den umfangreichen Änderungen der Storefront in Shopware 6.7 findest du im ThemeWare® Service Portal: {% embed url="" %} ### Shopware 6.6 Um die Customizing-App kompatibel für Shopware 6.6 zu machen musst du folgende Änderungen vornehmen: #### SCSS Falls du es nicht bereits für Shopware 6.5 gemacht hast, aktualisiere bitte die Datei "\_**messagebox.scss**": 
color: color-yiq($twt-color-brand-secondary-light);
>>
color: color-contrast($twt-color-brand-secondary-light);
#### JavaScript Darüber hinaus wurde die Integration von JavaScript-Plugins in die Storefront mit Shopware 6.6 geändert. Lösche bitte alle Scripte im Ordner `Resources\app\storefront\dist\storefront\js` und baue die Storefront einmal neu (z.B. mit `build-storefront.sh`). {% hint style="info" %} **Hinweis**: Bitte beachte, dass Deine individuellen Anpassungen ggf. ebenfalls kompatibel gemacht werden müssen. {% endhint %} Mehr Informationen zu den umfangreichen Änderungen der Storefront in Shopware 6.6 findest du im Service Portal: {% embed url="" %} ### Shopware 6.5 Um das Customizing-Plugin grundsätzlich kompatibel für Shopware 6.5 zu machen, reicht es die benötigte Shopware Version in der Datei "\_**messagebox.scss**" wie folgt zu modifizieren: 
color: color-yiq($twt-color-brand-secondary-light);
>>
color: color-contrast($twt-color-brand-secondary-light);
Dadurch wird die Erweiterung mit Shopware 6.5 kompatibel und braucht nicht aktualisiert werden. > Stand: Shopware 6.6.0 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://wiki.themeware.design/mehr-wissen/themeware-tools/themeware-customizing-app.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.