Individuelle Anpassungen mittels SCSS
In diesem Artikel erfährst du, wie du individuelle SCSS-Anpassungen mit dem "ThemeWare® Customizing Plugin" durchführen kannst.
Last updated
Was this helpful?
In diesem Artikel erfährst du, wie du individuelle SCSS-Anpassungen mit dem "ThemeWare® Customizing Plugin" durchführen kannst.
Last updated
Was this helpful?
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.
Damit du die entsprechenden SCSS-Anpassungen problemlos hinterlegen kannst solltest du eine separate Erweiterung für individuellen Anpassungen nutzen.
Prüfe ob es im 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)").
Den grundlegenden Aufbau (Ordner, SCSS-Dateien etc.) gibt das Shopware Theme "" vor, da ThemeWare® technisch eine "Erweiterung" dessen ist.
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® 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.
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.
Im folgenden Beispiel wird der Produktname auf der Produktseite modifiziert.
Wichtig: Die Nutzung von Theme-Variablen in Plugins ab Shopware 6.4.7.0 leider nicht mehr möglich.
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.
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.
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:
Ergänzend dazu findest du den Quellcode vom Shopware Standard-Theme auf . Im Ordner "app/storefront/src/scss" befinden sich alle SCSS-Dateien die für die Storefront relevant sind.
Hinweis: Weiterführende Links rund um das Thema "SCSS" findest du in der SASS-Dokumentation unter:
Über unseren 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.