> 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/wissensdatenbank/anleitungen/individuelle-anpassungen/individuelle-anpassungen-mittels-scss.md). # Individuelle Anpassungen mittels SCSS Wenn du das Erscheinungsbild von ThemeWare® mittels SCSS anpassen möchtest, findest du in diesem Artikel nützliche Tipps für die Arbeit mit SCSS-Dateien. {% hint style="success" %} **Tipp**: Das erstellen eines ThemeWare® Duplikates ist für SCSS-Anpassungen nicht notwendig. {% endhint %} ## Einleitung Damit du die entsprechenden SCSS-Anpassungen problemlos hinterlegen kannst solltest du eine separate Erweiterung für individuellen Anpassungen nutzen. * 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 manuelle Methode mit unserem "ThemeWare® Customizing Plugin" bzw. der "ThemeWare® Customizing App" (Cloud) nutzen (siehe Abschnitt "SCSS-Code integrieren (für erfahrende Anwender)"). ## Einsicht in den Quellcode Den grundlegenden Aufbau (Ordner, SCSS-Dateien etc.) gibt das Shopware Theme "[Shopware default theme](https://github.com/shopware/platform/tree/master/src/Storefront/Resources)" vor, da ThemeWare® technisch eine "Erweiterung" dessen ist. {% hint style="info" %} **Hinweis**: In der Shopware Cloud gibt es derzeit keine Möglichkeit Dateien von Erweiterungen (Plugins, Apps oder Themes) einzusehen. {% endhint %} {% hint style="danger" %} **Achtung**: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes)! {% endhint %} Auch wenn du die originalen ThemeWare® Dateien nicht bearbeiten darfst, ist es manchmal nötig, dass du hier etwas nachschaust. Du findest die ThemeWare® SCSS-Dateien unter folgenden Pfaden in deinem Shopware Ordner (XYZ = Modern, Living, Clean, etc.): #### ThemeWare® Pro-Edition ``` custom/plugins/TcinnThemeWareXYZ/src/Resources/app/storefront/src/scss/ custom/plugins/TcinnThemeWareXYZ/src/Resources/app/storefront/src/scss/themeware/ ``` #### ThemeWare® Cloud-Edition ``` custom/apps/TcinnThemeWareXYZApp/Resources/app/storefront/src/scss custom/apps/TcinnThemeWareXYZApp/Resources/app/storefront/src/scss/themeware ``` ThemeWare® leitet im Rahmen unserer **HC-Architecture®** nur die nötigsten SCSS-Dateien ab und ergänzt für eigene Funktionen und Features (z.B. Widgets) eigene SCSS-Dateien. Ergänzend dazu findest du den Quellcode vom Shopware Standard-Theme auf [GitHub](https://github.com/shopware/platform/tree/master/src/Storefront/Resources). Im Ordner "app/storefront/src/scss" befinden sich alle SCSS-Dateien die für die Storefront relevant sind. ## SCSS-Code 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" bzw. eine "ThemeWare® Customizing App" (Cloud) für die Integration von individuellen Anpassungen und eigenen Dateien entwickelt. Alle Informationen zur Installation und die Download-Links findest du in folgenden Artikeln: {% content-ref url="/pages/563ieNC6QwnIn10hGKHB" %} [Individuelle Anpassungen mit dem ThemeWare® Customizing Plugin](/wissensdatenbank/anleitungen/individuelle-anpassungen/individuelle-anpassungen-mit-dem-themeware-customizing-plugin.md) {% endcontent-ref %} {% content-ref url="/pages/j5ZcZrhwlfkqGtsCNr6f" %} [Individuelle Anpassungen mit der ThemeWare® Customizing App (Cloud)](/wissensdatenbank/anleitungen/individuelle-anpassungen/individuelle-anpassungen-mit-dem-themeware-customizing-app.md) {% endcontent-ref %} ## Hilfreiche SCSS-Grundlagen Individuelle Anpassungen müssen in der Datei "**base.scss**" hinterlegt werden. Zur besseren Strukturierung ist es möglich bei zahlreichen Anpassungen auf zusätzliche Ordner und Dateien zurückzugreifen. Diese können ganz einfach per @import integriert werden. ```scss @import 'deine-datei.scss'; ``` {% hint style="info" %} **Hinweis**: Weiterführende Links rund um das Thema "SCSS" findest du in der SASS-Dokumentation unter: {% endhint %} ### Beispielanpassung in der Datei "base.scss" Im folgenden Beispiel wird der Produktname auf der Produktseite modifiziert. ```scss // Beispiel: Farbliche Änderung vom Artikelnamen auf der Artikelseite $eigene-variable: #FF0004; .is-ctl-product { .product-detail-name { padding: 10px; color: $eigene-variable; } } ``` *** ## Zusätzliches ThemeWare® Wissen ### ThemeWare® Variablen finden Über unseren [ThemeWare® Config-Finder](https://config.themeware.design) hast du die Möglichkeit alle ThemeWare® Variablen anzeigen zu lassen. Der "technische Name" in dieser Übersicht ist der Name der entsprechenden Variable, die du in Twig oder SCSS verwenden kannst. {% hint style="warning" %} **Wichtig**: Die Nutzung von Theme-Variablen in Plugins ab Shopware 6.4.7.0 leider nicht mehr möglich. {% endhint %} ### Abgrenzung von Anpassungen #### Anpassungen für einen bestimmten Verkaufskanal Ist eine SCSS-Anpassung nur für einen bestimmten Verkaufskanal relevant, hast du die Möglichkeit deine Anpassung über unsere **ThemeWare® Konfiguration** mit der "**Body-Klasse**" einzuschränken. Hinterlege dafür in der Konfiguration vom entsprechenden Theme (bzw. Theme-Duplikat) für den entsprechenden Verkaufskanal unter `Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "Individuelle CSS-Klasse" => Feld "Body-Klasse"` einen eindeutigen Namen für diesen Verkaufskanal (z.B.: `meinshopname`). Dieser Name kann dann durch die Position am HTML-Body für SCSS-Prüfungen genutzt werden. ```scss // Anpassung für den Verkaufskanal mit der Klasse "meinshopname" .meinshopname { h1 { // Anpassung... } } ``` #### Anpassung für eine bestimmte Seite (Kategorie) Ist eine SCSS-Anpassung nur für eine bestimmte Seite relevant, hast du die Möglichkeit deine Anpassung über das **ThemeWare® Zusatzfeld** "Body-Klasse" einzuschränken. Hinterlege dafür im Zusatzfeld "**Body-Klasse**" von der entsprechenden Seite (Kategorie) im `Tab "Allgemein" => Bereich "Zusatzfelder" => Tab "Kategorien (ThemeWare® ...)" => Zusatzfeld "Body-Klasse"` einen eindeutigen Namen für diesen Verkaufskanal (z.B.: meinshopname). Dieser Name kann dann durch die Position am HTML-Body für SCSS-Prüfungen genutzt werden. ```scss // Anpassung für die Kategorie mit der Klasse "meinshopname" .meinshopname { h1 { // Anpassung... } } ``` *** ## 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 %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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-mittels-scss.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.