Individuelle Anpassungen mittels SCSS
In diesem Artikel erfährst du, wie du individuelle SCSS-Anpassungen mit dem "ThemeWare® Customizing Plugin" durchführen kannst.
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.
Hinweis: Das erstellen eines ThemeWare® Duplikates ist für SCSS-Anpassungen nicht notwendig.
Damit du die entsprechenden SCSS-Anpassungen problemlos hinterlegen kannst solltest du eine separate Erweiterung für individuellen Anpassungen nutzen.
- 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)").
Den grundlegenden Aufbau (Ordner, SCSS-Dateien etc.) gibt das Shopware Theme "Shopware default theme" vor, da ThemeWare® technisch eine "Erweiterung" dessen ist.
Hinweis: In der Shopware Cloud gibt es derzeit keine Möglichkeit Dateien von Erweiterungen (Plugins, Apps oder Themes) einzusehen.
Achtung: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes)!
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.):
custom/plugins/TcinnThemeWareXYZ/src/Resources/app/storefront/src/scss/
custom/plugins/TcinnThemeWareXYZ/src/Resources/app/storefront/src/scss/themeware/
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. Im Ordner "app/storefront/src/scss" befinden sich alle SCSS-Dateien die für die Storefront relevant sind.
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:
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.
@import 'deine-datei.scss';
Hinweis: Weiterführende Links rund um das Thema "SCSS" findest du in der SASS-Dokumentation unter: https://sass-lang.com
Im folgenden Beispiel wird der Produktname auf der Produktseite modifiziert.
// Beispiel: Farbliche Änderung vom Artikelnamen auf der Artikelseite
$eigene-variable: #FF0004;
.is-ctl-product {
.product-detail-name {
padding: 10px;
color: $eigene-variable;
}
}
Über unseren ThemeWare® Config-Finder 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.
Wichtig: Die Nutzung von Theme-Variablen in Plugins ab Shopware 6.4.7.0 leider nicht mehr möglich!
Ist eine CSS/SCSS-Anpassung nur für einen bestimmten Verkaufskanal relevant, hast du die Möglichkeit deine Anpassung beispielsweise über unsere ThemeWare® Konfiguration mit der "Body-Klasse" einzuschränken.
Hinterlege dafür im 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.
// Anpassung nur für Theme mit der Klasse meinshopname
.meinshopname {
h1 {
// Anpassung...
}
}