Überblick
Aussehen der Storefront
Diese Dokumentation ist ein praxisnaher Einstieg in die Theme-Entwicklung für Shopware 6. Ein Theme bestimmt das Aussehen der Storefront – Farben, Schriften, Layout – über theme.json und SCSS, ohne die Geschäftslogik anzufassen.
Was ist ein Theme?
Ein Theme ist technisch ein spezielles Plugin (oder eine Theme-App) mit einer zentralen Datei: theme.json. Es erbt vom Standard-Theme der Storefront und überschreibt gezielt, was anders sein soll – Stile, Templates und die Optionen, die der Betreiber später im Theme Manager einstellen kann.
Plugin, App oder Theme?
| Plugin | App | Theme | |
|---|---|---|---|
| Zweck | Core-Logik, Services | Integration, Cloud | Aussehen der Storefront |
| Sprache | PHP | Manifest/API | theme.json + SCSS |
| Cloud-fähig | nein | ja | ja (als Theme-App) |
Faustregel: Geht es nur um Gestaltung, ist ein Theme richtig. Braucht es Logik, ist es ein Plugin oder eine App.
Plugin-Theme oder Theme-App?
- Plugin-Theme: liegt unter
custom/plugins/, wird per PHP-Bundle installiert – der klassische, self-hosted Weg. - Theme-App: wird als App ausgeliefert (
custom/apps/) und ist damit cloud-fähig.
Der Aufbau von theme.json, SCSS und Vererbung ist in beiden Fällen gleich – nur die Verpackung unterscheidet sich.
Was ein Theme kann
- Farben und Schriften zentral definieren und im Theme Manager editierbar machen
- SCSS-Variablen der Storefront überschreiben
- Templates per Twig überschreiben oder ergänzen
- eigenes JavaScript und Assets einbinden
- über Vererbung auf einem Eltern-Theme aufbauen
Der rote Faden
Zuerst ein Theme anlegen und aktivieren, dann theme.json verstehen, danach SCSS & Styling und der Theme Manager, schließlich Vererbung/Overrides und der Kompilier-Workflow.
Hinweis: Diese Doku geht vom Plugin-Theme aus (die Beispiele nutzen
custom/plugins/). Für eine Theme-App gilt dasselbetheme.json– nur im App-Kontext.