> For the complete documentation index, see [llms.txt](https://wiki.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.themeware.design/mehr-wissen/themeware-tools/themeware-customizing-app.md). # 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 Shopware 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 die kostenlose "Customizing App" 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 die App kostenfrei und nicht über den Shopware Store erhältlich ist, gibt es derzeit keine automatische Update-Möglichkeit. Den **Download-Link für die neueste Version** erhältst du stets über die ThemeWare® Utilities. Falls erforderlich, registriere dich einfach erneut: {% embed url="" %} ThemeWare® Utilities {% endembed %} Deaktiviere die App bevor du ein Shopware-Update durchführst. Informationen zum manuellen aktualisieren deiner App 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 {% hint style="info" %} **Hinweis**: Ob deine bisherige Version mit Shopware 6.7 weiterverwendet werden kann, hängt vor allem von deinen konkreten Anpassungen ab. Prüfe dies am besten zunächst in einer Test- bzw. Staging-Umgebung. {% endhint %} 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 {% block base_header %} >> {% block base_body_inner %} ``` {% 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