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

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/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.

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:

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