Viele Shopware-6-Shops sehen auf den ersten Blick ähnlich aus. Für Markenaufbau, Conversion und Wiedererkennung braucht es aber ein eigenes Gesicht. Gleichzeitig sollen Updates weiter funktionieren und das System stabil bleiben.
Dieser Leitfaden zeigt, wie sich ein Shopware 6 Theme sauber anpassen lässt – vom Styling im Admin-Bereich bis zu eigenen Theme-Erweiterungen. Mit Praxis-Tipps, typischen Stolperfallen und einem klaren Fahrplan.
Grundlagen zu Shopware 6 Themes und Layout-Struktur
Bevor Anpassungen starten, lohnt ein Blick auf die Bausteine von Shopware 6. Wer die Struktur versteht, spart später viel Zeit.
Was ein Shopware 6 Theme eigentlich ist
Ein Theme ist das „Kleid“ des Shops: Es steuert Farben, Schriften, Abstände, Icons und viele Layout-Bereiche. Technisch besteht ein Theme aus Templates (Twig-Dateien), Styles (SCSS/CSS), JavaScript und Konfigurationen, die im Admin sichtbar sind.
Wichtig: Das Standardtheme „Storefront“ dient als Basis. Eigene Themes erweitern oder überschreiben nur bestimmte Teile davon. So bleiben Updates des Kerns möglich, ohne dass alles neu gebaut werden muss.
Templates, Blöcke und Vererbung verstehen
Shopware 6 arbeitet mit Template-Vererbung. Das bedeutet: Eigene Templates bauen auf bestehenden Dateien auf. Statt alles zu kopieren, werden nur einzelne „Blöcke“ angepasst. Diese Blöcke sind klar markierte Bereiche im Template, etwa für Header, Produktliste oder Footer.
Das Prinzip: Der Kern liefert eine Standard-Ausgabe, das Theme kann bestimmte Bereiche ersetzen oder erweitern. So bleiben viele Funktionen kompatibel und Wartung wird einfacher.
Erlebniswelten und Theme – wer macht was?
Erlebniswelten (Shopping Experiences) steuern Inhalte und Seitenaufbau: Hero-Bild, Teaser-Boxen, Produktslider usw. Das Theme definiert, wie diese Elemente aussehen – etwa Farben, Abstände, Hover-Effekte. In vielen Projekten entsteht ein moderner Shop durch das Zusammenspiel aus individuellem Theme und gut durchdachten Erlebniswelten. Wer tiefer einsteigen will, findet ergänzend Tipps in Shopware 6 Erlebniswelten: Layouts, Blöcke, SEO-Tipps.
Shopware 6 Theme-Konfiguration im Admin nutzen
Viele Anpassungen lassen sich ohne Code direkt im Admin-Bereich umsetzen. Das ist ideal für schnelle Tests und Grunddesign.
Farben, Typografie und Logo im Theme Manager einstellen
Im Admin unter „Inhalte > Themes“ können für jedes Theme Einstellungen vorgenommen werden. Je nach Theme stehen dort unterschiedliche Optionen bereit, typischerweise:
- Primär- und Sekundärfarbe (Buttons, Links, Akzente)
- Schriftarten und Schriftgrößen
- Logo, Favicon und alternative Logos für dunklen Hintergrund
- Abstände und Rahmen (z. B. Karten, Boxen)
Für ein konsistentes Erscheinungsbild sollten diese Basiswerte einmal sauber definiert und dokumentiert werden. In komplexeren Projekten kann es helfen, Parallelen zu einem Design-Token-System zu ziehen: Primärfarbe, Sekundärfarbe, Hintergrundfarbe usw. sind dann feste Bausteine, die überall gleich genutzt werden.
Theme-Einstellungen für verschiedene Verkaufskanäle
Shopware 6 erlaubt die Zuweisung verschiedener Themes zu unterschiedlichen Verkaufskanälen. So kann etwa ein B2C-Kanal ein emotionales Design und ein B2B-Kanal ein sachliches Layout nutzen. Auch wenn dasselbe Theme verwendet wird, lassen sich pro Kanal eigene Konfigurationen speichern (z. B. andere Farben oder Logos).
Empfehlung: Anpassungen immer in einem Testkanal oder einer Staging-Umgebung ausprobieren, bevor sie im Live-Shop aktiv werden.
Wann Admin-Einstellungen nicht mehr reichen
Der Theme Manager deckt viele Basics ab, stößt aber schnell an Grenzen, etwa bei:
- individuellen Produktdetail-Layouts mit speziellen Informationsboxen
- komplexen Header-Strukturen mit Mega-Menüs
- spezifischen Animationen oder Microinteractions
Spätestens dann ist ein eigenes Theme oder eine Theme-Erweiterung sinnvoll. Für feine Interaktionsdetails lohnt auch ein Blick auf UI-Microinteractions im Web.
Eigenes Shopware 6 Theme erstellen – sicherer Einstieg
Wer wirklich individuelle Anforderungen hat, kommt um ein eigenes Theme kaum herum. Entscheidend ist, es update-sicher und strukturiert aufzubauen.
Child-Theme statt Kernanpassung
Ein häufiger Fehler ist, direkt im Standardtheme oder sogar im Core zu ändern. Das führt fast immer zu Problemen bei Updates. Besser ist der Aufbau eines eigenen Themes, das auf dem Standardtheme aufsetzt (Child-Theme-Ansatz).
Die Schritte im Überblick (technisch vereinfachte Darstellung):
- Neues Theme-Plugin-Struktur anlegen (Ordner für Templates, SCSS, JS, Konfiguration)
- In der theme.json das Standardtheme als Parent definieren
- Nur die notwendigen Blöcke und Styles überschreiben oder erweitern
- Theme kompilieren, zuweisen und testen
So bleibt der Weg für Shopware-Updates offen. Nur die eigenen Dateien müssen überprüft und ggf. angepasst werden.
Typische Stellen für Template-Anpassungen
In vielen Projekten werden immer wieder ähnliche Bereiche angepasst:
- Header und Navigation (Logo-Position, Menüstruktur, Suchfeld)
- Produktkacheln in der Kategorieansicht (Badges, Labels, Zusatzinfos)
- Produktdetailseite (Tabs, technische Daten, Downloads, Trust-Elemente)
- Footer (Spalten, Kontaktinfos, Newsletter-Einbindung)
Statt diese Bereiche komplett neu zu bauen, ist es meist besser, gezielt einzelne Blöcke zu überschreiben. So bleibt die Logik des Systems erhalten und spätere Anpassungen fallen leichter.
SCSS-Struktur und Wartbarkeit
Shopware 6 setzt auf SCSS, eine Erweiterung von CSS mit Variablen, Mixins und Vererbung. Ein sauberes SCSS-Konzept erleichtert langfristig Anpassungen. Hilfreich sind:
- klare Trennung nach Komponenten (Buttons, Formulare, Karten etc.)
- Verwendung von Variablen für Farben, Abstände, Schriftgrößen
- vermeiden von „!important“-Kaskaden, die sich später schwer auflösen lassen
Wer größere Designsysteme pflegt, profitiert davon, SCSS-Variablen mit einem Design-Tool abzugleichen – analog zu den Prinzipien in Designsystemen mit Figma.
Layout und Usability im Shopware 6 Theme verbessern
Visuelles Design ist wichtig, aber ein Theme steht und fällt mit Nutzbarkeit und Klarheit. Ein paar grundsätzliche Regeln helfen, typische Usability-Probleme zu vermeiden.
Navigationsstruktur und Header sinnvoll planen
Die Hauptnavigation des Shops sollte nicht nur „schön“, sondern auch verständlich sein. Wichtige Entscheidungen:
- Wie viele Hauptkategorien sind sinnvoll, ohne zu überfrachten?
- Wie werden Filter und Facetten dargestellt (Sidebar, offcanvas)?
- Wie schnell sind Warenkorb, Suche und Login erreichbar?
Ein klar strukturierter Header mit wenigen, klar benannten Aktionen setzt den Rahmen für den gesamten Shop. Gerade in mobilen Ansichten lohnt eine manuelle Feinarbeit, damit Menüs nicht zu verschachtelt wirken.
Produktpräsentation und Lesbarkeit optimieren
Produktseiten sollten übersichtlich und gut lesbar sein. Wichtige Stellschrauben:
- ausreichende Schriftgröße und Zeilenabstand für längere Produkttexte
- logische Gliederung in Blöcke (Bilder, Preis, Varianten, Warenkorbbutton, Zusatzinfos)
- klare Hierarchie von Überschriften und Zwischenüberschriften
Gerade die Typografie wirkt sich stark auf die Wahrnehmung der Marke aus. Wer tiefer einsteigen möchte, findet Grundlagen in Responsive Typografie im Webdesign.
Formulare, Checkout und Microinteractions
Individuelle Themes erlauben, Formulare und den Checkout gezielt zu verbessern. Dazu gehören:
- klare Fehlermeldungen bei Eingabefehlern
- deutliche Markierung von Pflichtfeldern
- visuelles Feedback bei Klicks (z. B. Button-States, Ladeindikatoren)
Solche Microinteractions helfen, den Bestellprozess flüssig zu halten. Gerade bei mobilen Nutzer:innen sollte darauf geachtet werden, dass Buttons groß genug und gut erreichbar sind.
Performance und SEO im Shopware 6 Theme berücksichtigen
Ein schönes Theme allein reicht nicht. Ladezeiten, Struktur und saubere Ausgaben im Code entscheiden mit, wie gut der Shop gefunden und genutzt wird.
Assets, Bilder und CSS im Griff behalten
Viele Probleme entstehen durch zu große oder zu viele Bilder sowie ungenutztes CSS. Ein paar Grundprinzipien:
- Bilder passend komprimieren und in geeigneten Formaten bereitstellen
- nur benötigte Schriftvarianten laden (z. B. normal, fett, kursiv)
- kompakte SCSS-Struktur, Vermeidung toter CSS-Regeln
Gerade bei großen Produktkatalogen oder vielen Erlebniswelten summieren sich kleine Optimierungen zu spürbar besseren Ladezeiten. Das zahlt auf Nutzerzufriedenheit und Sichtbarkeit ein.
Strukturierte Inhalte und interne Verlinkung
Das Theme beeinflusst auch, wie Inhalte strukturiert und verlinkt werden. Dazu gehören:
- saubere Überschriften-Hierarchie (h1, h2, h3) auf zentralen Seiten
- klare Breadcrumbs zur Orientierung
- platzierte interne Links auf relevante Kategorien, Ratgeber oder Marken-Seiten
Wer generelle SEO-Strukturen im Blick behalten möchte, kann die Grundprinzipien aus Interner Verlinkung für SEO gut auf Shopware-Projekte übertragen.
Technische Stolperfallen im Theme vermeiden
Einige Änderungen sehen zwar harmlos aus, können aber technische Folgen haben, etwa:
- Entfernen wichtiger Elemente (z. B. strukturrelevanter Listen oder Überschriften)
- Einbau schwerer Skripte ohne Notwendigkeit
- CSS-Hacks, die spätere Anpassungen blockieren
Ein strukturiertes Vorgehen mit Code-Reviews, Tests in verschiedenen Browsern und klaren Guidelines für Entwickler:innen hilft, solche Fehler früh zu erkennen.
So geht’s: Fahrplan für ein individuelles Shopware 6 Theme
Damit ein Theme-Projekt nicht aus dem Ruder läuft, hilft ein klarer Fahrplan. Die folgende kompakte Checkliste fasst die wichtigsten Schritte zusammen.
- Ist-Analyse: Welche Defizite hat das aktuelle Theme (Markenwirkung, Usability, Conversion)?
- Zielbild definieren: Welche Design-Elemente, Tonalität und Funktionen werden gebraucht?
- Basis wählen: Standard-Storefront nutzen und ein eigenes Erweiterungs-Theme planen.
- Designsystem festlegen: Farben, Schriften, Spacing, Komponenten sauber dokumentieren.
- Theme-Konfiguration nutzen: Farben, Logos, Basis-Typografie im Admin einstellen.
- Templates anpassen: Nur nötige Blöcke überschreiben, Child-Theme nutzen.
- SCSS strukturieren: Komponentenbasiert, mit Variablen und ohne CSS-Hacks.
- Usability testen: Navigation, mobile Nutzung, Checkout mit echten Nutzer:innen prüfen.
- Performance prüfen: Ladezeiten, Bilder, CSS/JS analysieren und optimieren.
- Wartung planen: Update-Strategie, Changelog und Dokumentation für künftige Anpassungen.
Häufige Fragen zur Anpassung von Shopware 6 Themes
Wie update-sicher ist ein eigenes Shopware 6 Theme?
Ein Theme ist dann update-sicher, wenn es ausschließlich über Erweiterungen (Plugins, Child-Theme) arbeitet und keine Dateien im Core oder Standardtheme direkt verändert werden. Bei Updates müssen Änderungen geprüft werden, vor allem wenn Shopware neue Blöcke, Funktionen oder Template-Strukturen einführt. Eine Staging-Umgebung als Testsystem vor Live-Updates ist Pflicht.
Welche Anpassungen sollten lieber nicht im Theme landen?
Nicht alles gehört ins Theme. Geschäftslogik (z. B. Preisregeln), Schnittstellen oder komplexe Warenkorb-Funktionen sollten in eigenen Plugins mit klarer Trennung umgesetzt werden. Das Theme konzentriert sich auf Präsentation, Layout und Interaktionen. So bleibt die Architektur verständlich und gut testbar.
Braucht jedes Projekt ein komplett eigenes Theme?
Nein. Für viele Shops reicht es, ein bestehendes Theme anzupassen und gezielt zu erweitern. Ein komplett eigenes Theme lohnt nur, wenn Design, Markenauftritt oder Funktionen sehr speziell sind. In diesen Fällen ist der zusätzliche Aufwand oft gerechtfertigt, weil sich die Marke deutlich abhebt und der Shop exakt zu den Geschäftsprozessen passt.
Wer langfristig plant, sollte die Theme-Entwicklung als Teil einer Gesamtstrategie sehen: Design, UX, Technik und Inhalte greifen ineinander – ein professionelles Theme ist dann ein Baustein im gesamten E-Commerce-Ökosystem.
