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.
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.
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.
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.
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.
Ü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.
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: