#2147 Individuelle Anpassungen mittels SCSS

Wie du optische Anpassungen mittels SCSS vornehmen kannst, erfährst du in diesem Artikel.

Hinweis: Das erstellen eines ThemeWare^® Duplikates ist für Template-Anpassungen nicht notwendig. 

Lösungen

1. Prüfe ob es im Shopware Community Store bereits ein passendes Plugin gibt.
2. Alternativ kannst du die nachfolgende manuelle Methode nutzen.

Einsicht in den Quellcode

Den grundlegenden Aufbau (Template-Ordner, Template-Dateien, Twig-Blöcke, etc.) gibt das Shopware Theme "Shopware default 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 Dateien unter folgendem Pfad in deinem Shopware Ordner (XXX = Modern, Living, Clean, etc.):

• Twig: "custom/plugins/TcinnThemeWareXXX/src/Resources/views/storefront/"
• SCSS: "custom/plugins/TcinnThemeWareXXX/src/Resources/app/storefront/src/scss/"

Individuellen 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 Plugin "ThemeWare^® Customizing" für die Integration von individuellen Anpassungen und eigenen Dateien entwickelt.

Alle Informationen zum Plugin, der Installation und den Download-Link findest du über folgenden Link:

Download ThemeWare^® Customizing

1) Plugin vorbereiten

1. Lade die Zip-Datei unseres Plugins über die Shopware 6 Erweiterungs-Verwaltung hoch.
2. Installiere und aktiviere das Plugin danach.

2) SCSS/CSS-Code einfügen

1. Bearbeite die Datei "main.scss" im Ordner: "custom/plugins/TcinnCustomizing/src/Resources/app/storefront/src/scss/"
2. Speichere die Änderung der Datei "main.scss" und lade diese ggf. erneut hoch.

3) Theme kompilieren

• Öffne ThemeWare^® im Theme-Manager und speichere die Einstellungen unverändert ab, damit das aktuelle Theme kompiliert wird und Änderungen in die Storefront übertragen werden.

Hilfreiche SCSS-Grundlagen

Individuelle Anpassungen müssen in der Datei "main.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 "deine-datei.scss"" integriert werden.

Beispielanpassung in der Datei "main.scss"

In diesem Beispiel verwenden wir auch die ThemeWare^®-Variablen "twt-color-brand-primary-light" (Tab "Layout" => Bereich "Hauptfarben" => Feld "Primärfarbe Hell") und "twt-color-brand-primary-dark" (Tab "Layout" => Bereich "Hauptfarben" => Feld "Primärfarbe Dunkel").

// Beispiel: Farbliche Änderung vom Artikelnamen auf der Artikelseite
// Example: Colour change of the article name on the article page

$eigene-variable: #FF0004;

.is-ctl-product {
  .product-detail-name {
    background-color: $twt-color-brand-primary-light;
    border: 1px solid $twt-color-brand-primary-dark;
    padding: 10px;
    color: $eigene-variable;
  }
}

// Anpassung nur für Theme mit der Klasse meinshopname
.meinshopname {
  h1 {
    // Anpassung...
  }
}