SCSS & Styling

Das Aussehen der Storefront entsteht in SCSS. Ein Theme bringt eigene Stile ein und überschreibt die Variablen, mit denen Shopware sein Standard-Design baut.

Einstiegspunkte in theme.json

Der style-Block in theme.json legt fest, welche SCSS-Dateien in welcher Reihenfolge kompiliert werden:

"style": [
  "@Storefront",
  "app/storefront/src/scss/base.scss"
]

@Storefront zuerst bindet das komplette Standard-Design ein; die eigene base.scss kommt danach und darf überschreiben.

Storefront-Variablen überschreiben

Shopware baut sein Design aus SCSS-Variablen (Farben, Abstände, Schriftgrößen). Die eigene SCSS-Datei kann sie neu setzen:

// app/storefront/src/scss/base.scss
$sw-color-brand-primary: #04151f;
$sw-color-brand-secondary: #c8102e;
$font-family-base: 'Inter', sans-serif;

// eigene Regeln
.header-main {
    border-bottom: 2px solid $sw-color-brand-primary;
}

Weil die eigene Datei nach @Storefront geladen wird, gewinnen diese Werte.

Struktur statt einer Riesendatei

Bei wachsendem Theme lohnt sich Aufteilung mit @import oder @use:

scss/
├── base.scss        // bindet die Teile ein
├── _variables.scss  // eigene Variablen
├── _header.scss
└── _footer.scss

So bleibt das Styling wartbar und die Zuständigkeiten klar.

Nicht vergessen: kompilieren

SCSS-Änderungen werden erst nach bin/console theme:compile sichtbar. In der Entwicklung hilft der Storefront-Watcher, der bei jeder Änderung automatisch neu baut (siehe Kapitel „Kompilieren & Workflow").

Grenze zum Theme Manager

Fest im SCSS gesetzte Werte sind im Code verankert. Sollen Betreiber Farben oder Schriften selbst im Admin ändern, gehören die Variablen in den config-Block der theme.json – das ist das nächste Kapitel.

Kurz: eigene SCSS-Datei nach @Storefront laden, Standard-Variablen überschreiben, sauber in Teildateien gliedern – und nach jeder Änderung kompilieren.