Individuelles SCSS

Eigene Styles hinzufügen und kompilieren

Als Grundlage solltest du den entsprechenden Artikel der offiziellen Shopware Dokumentation gelesen und verinnerlicht haben.

In diesem Beispiel gehe ich lediglich auf die zuvor angelegte Konfigurationsvariable ein:

Konfiguration erweitern

SCSS bearbeiten und kompilieren

Die Konfigurationsvariable kannst du jetzt nutzen, um dein Child-Theme zu gestalten. In diesem Beispiel werde ich dem Header die Hintergrundfarbe des Konfigurationsfeldes geben:

// src/Resources/app/storefront/src/scss/base.scss

.header-main{
  background-color: $rhweb-custom-color-field;
}

Um dein Child-Theme zu kompilieren, kannst du entweder die Theme-Konfiguration aus dem Shopware Backend heraus abspeichern, oder den Konsolenbefehl bin/console theme:compile verwenden.