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.
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 erfahrende 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
ThemeWare® Cloud-Edition
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.
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:
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.
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.
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 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.
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:
Last updated