# Individuelle Anpassungen mit dem ThemeWare® Customizing Plugin Wie du das Erscheinungsbild von ThemeWare® in Shopware 6 (self-managed) mittels einer **individuellen Anpassung** und mit unserem kostenfreien "ThemeWare® Customizing Plugin" verändern kannst, erfährst du in diesem Artikel. {% hint style="success" %} **Tipp**: Das erstellen eines ThemeWare® Duplikates ist für SCSS- bzw. Template-Anpassungen nicht notwendig. {% endhint %} {% hint style="info" %} **Hinweis**: Nutze in der Shopware 6 Cloud bitte die "[ThemeWare® Customizing App](/wissensdatenbank/anleitungen/individuelle-anpassungen/individuelle-anpassungen-mit-dem-themeware-customizing-app.md)". {% endhint %} *** ## Einleitung Für individuelle Anpassungen brauchst du in Shopware 6 ein eigenes Theme oder eine separate Erweiterung (Plugin oder App) und nicht – wie bei Shopware 5 – eine Theme-Ableitung. * Prüfe ob es im [Shopware Community Store](https://store.shopware.com/erweiterungen/?p=1\&o=12\&n=21\&shopwareVersion=6) bereits eine passende Erweiterung gibt. * Alternativ kannst du die folgende Methode mit dem "ThemeWare® Customizing Plugin" nutzen. Nachfolgend erklären wir dir den Weg über unser "ThemeWare® Customizing Plugin". *** ## Hilfreiche Grundlagen Dieser Artikel richtet sich an erfahrene Anwender. Wir gehen in diesem Artikel daher davon aus, dass du die Grundlagen für Anpassungen via SCSS und Twig bereits verinnerlichst hast. Falls du nicht erfahren im Umgang mit SCSS und Twig bist findest du hilfreiche Grundlagen zum Thema individuelle SCSS- und Template-Anpassungen findest du in den folgenden Artikeln: {% content-ref url="/pages/vI0xv5IE1vA6Zs7uC8FZ" %} [Individuelle Anpassungen mittels SCSS](/wissensdatenbank/anleitungen/individuelle-anpassungen/individuelle-anpassungen-mittels-scss.md) {% endcontent-ref %} {% content-ref url="/pages/DZ6e7tlizxHzhiN8LYxo" %} [Individuelle Template-Anpassungen (Twig, HTML)](/wissensdatenbank/anleitungen/individuelle-anpassungen/individuelle-template-anpassungen-twig-html.md) {% endcontent-ref %} {% hint style="success" %} **Tipp**: Bist du unerfahren im Umgang mit SCSS und Twig empfehlen wir dir Unterstützung zu suchen. Gern können wir dich natürlich auch bei individuellen Anpassungen unterstützen: [Anpassungen anfragen](https://service.themeware.design/individuelle-anpassungen) {% endhint %} *** ## Anpassungen mit dem ThemeWare® Customizing Plugin integrieren (für erfahrende Anwender) In Shopware 6 fehlt derzeit ein vollwertiges Child-Theme über welches man Dateien einbinden und Änderungen vornehmen kann (wie z.B. bei Shopware 5). Wir haben als Workaround ein kleines kostenfreies "ThemeWare® Customizing Plugin" für die Integration von individuellen Anpassungen und eigenen Dateien in Shopware 6 (self-hosted) entwickelt. Alle Informationen zum "ThemeWare® Customizing Plugin", der Installation und den Download-Link findest du im folgenden Artikel: {% content-ref url="/pages/ll7c9c5xwUiYCm5nU6C5" %} [ThemeWare® Customizing Plugin](/mehr-wissen/themeware-tools/themeware-customizing-plugin.md) {% endcontent-ref %} ### 1. Erweiterung vorbereiten (nur bei der ersten Verwendung nötig) 1. Lade die Zip-Datei unserer Erweiterung herunter 2. Entpacke die Zip-Datei mit "Hier entpacken" ### 2. Anpassungen integrieren Im Ordner `TcinnCustomizing` findest du alle Dateien der Erweiterung. **SCSS-Anpassungen** 1. SCSS-Datei(en) 1. Erstelle eine neue SCSS-Datei und importiere diese über die Datei "**base.scss**" * **Pfad**: "`src/Resources/app/storefront/src/scss`" * **Tipp**: Orientiere dich bezüglich Datei-Name und -Pfad einfach an den Quelldateien. * **Hinweis**: Erstelle benötigte oder fehlende Ordner. 2. Du kannst deinen SCSS-Code auch direkt in der "**base.scss**" hinterlegen. 2. Füge deinen gewünschten SCSS-Code ein 3. Speichere die Änderung der Datei(en) **Template-Anpassungen** 1. Erstelle eine neue Template-Datei und leite darin die gewünschte Quelldatei ab * **Pfad**: "`src/Resources/views/storefront`" * **Tipp**: Orientiere dich bezüglich Datei-Benennung einfach an der Quelldatei. * **Hinweis**: Erstelle benötigte oder fehlende Ordner. 2. Füge deinen gewünschten Twig-Code ein 3. Speichere die Änderung der Datei ### 3. Erweiterung installieren/aktualisieren 1. Deaktiviere und deinstalliere das "ThemeWare® Customizing Plugin" falls du dies bereits installiert und aktiviert hast 2. Zippe den Ordner "`TcinnCustomizing`" 3. Lade die Erweiterung über Shopware 6 Erweiterungs-Verwaltung in deinen Shop 4. Installiere und aktiviere die Erweiterung danach {% hint style="info" %} **Hinweis**: Um Erweiterungen aktualisieren zu können muss die Versionsnummer in der `manifest.xml` höher sein, als die aktuelle Version. Durch das deinstallieren und wieder installieren, sparst du dir diesen Schritt. {% endhint %} ### 4. Theme kompilieren (bei SCSS-Änderungen stets nötig) * Öffne das aktive ThemeWare® in der Theme-Verwaltung und speichere die Einstellungen unverändert ab, damit das Theme kompiliert wird und deine Änderungen in die Storefront übertragen werden. ### 5. Cache leeren (bei Template-Änderungen stets nötig) * Leere den Shopware Cache in den Shopware Einstellungen ("Einstellungen" => "System" => "Caches & Indizes" > "Caches leeren"). * Leeren den Browser-Cache * Windows: **Strg + F5** * Mac: **Command (⌘) + Shift (⇧) + R** oder **Command (⌘) + Option/Alt (⌥) + R** Die Änderung sollte nun in deiner Storefront sichtbar sein. *** ## Erweiterung "live" bearbeiten Du kannst die Erweiterung auch direkt auf dem FTP bearbeiten. Deaktiviere dieses bevor du Änderungen vornimmst und aktiviere es wieder wenn du fertig. *** ## Nachträgliche Änderungen Möchtest du zu einem späteren Zeitpunkt Änderungen vornehmen, deaktiviere die Erweiterung über die Erweiterungs-Verwaltung vor dem Upload und aktiviere es wieder wenn du fertig. **Hinweis**: Es kann nötig sein, dass du die Erweiterung auch einmal deinstallierst damit Änderungen in die Storefront übernommen werden. *** ## Tipps ### CSS-Hierarchie Du kannst die CSS-Hierarchie beim Überschreiben von CSS/SCSS-Anweisungen ganz einfach mit der "Body-Klasse" in der ThemeWare® Konfiguration beeinflussen. Dadurch kannst du unschöne `!important` Anweisungen vermeiden. Mehr Informationen dazu findest du in folgender Anleitung: {% content-ref url="/pages/8Zv8vvtJ9Vj1QEFkNgZp" %} [CSS-Hierarchie](/wissensdatenbank/anleitungen/individuelle-anpassungen/css-hierarchie.md) {% endcontent-ref %} ### Template-Hierarchie Seit Shopware 6.4.12 kann man mit der Methode `getTemplatePriority()` die Renderreihenfolge von Erweiterungen bestimmen (Default: -1). Damit du mit dem "Customizing Plugin" andere Erweiterungen überschreiben kannst, musst du die Priorität über eine Funktion in der `TcinnCustomizing.php` ändern: {% code title="TcinnCustomizing.php" %} ```php public function getTemplatePriority(): int { return 100; // hohe Priorität } ``` {% endcode %} {% embed url="" %} --- # 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/wissensdatenbank/anleitungen/individuelle-anpassungen/individuelle-anpassungen-mit-dem-themeware-customizing-plugin.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.