# 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="individuelle-anpassungen-mit-dem-themeware-customizing-plugin" %} [individuelle-anpassungen-mit-dem-themeware-customizing-plugin](https://wiki.themeware.design/wissensdatenbank/anleitungen/individuelle-anpassungen/individuelle-anpassungen-mit-dem-themeware-customizing-plugin) {% endcontent-ref %} {% content-ref url="individuelle-anpassungen-mit-dem-themeware-customizing-app" %} [individuelle-anpassungen-mit-dem-themeware-customizing-app](https://wiki.themeware.design/wissensdatenbank/anleitungen/individuelle-anpassungen/individuelle-anpassungen-mit-dem-themeware-customizing-app) {% 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="css-hierarchie" %} [css-hierarchie](https://wiki.themeware.design/wissensdatenbank/anleitungen/individuelle-anpassungen/css-hierarchie) {% endcontent-ref %}