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.
Tipp: Das erstellen eines ThemeWare® Duplikates ist für SCSS-Anpassungen nicht notwendig.
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 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 erfahrene Anwender)").
Einsicht in den Quellcode
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.):
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/themewareThemeWare® 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.
SCSS-Code integrieren (für erfahrene 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:
Individuelle Anpassungen mit dem ThemeWare® Customizing PluginIndividuelle Anpassungen mit der ThemeWare® Customizing App (Cloud)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.
@import 'deine-datei.scss';Hinweis: Weiterführende Links rund um das Thema "SCSS" findest du in der SASS-Dokumentation unter: https://sass-lang.com
Beispielanpassung in der Datei "base.scss"
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;
}
}Zusätzliches ThemeWare® Wissen
ThemeWare® Variablen finden
Ü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.
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.
// 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.
// 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:
CSS-Hierarchie