Stell dir vor: Der Traum vom eigenen, unverwechselbaren Online-Shop ist greifbar nah. Die Produktpalette steht, das Shopware-System läuft und der erste Entwurf für das Design gefällt eigentlich gut. Doch schon beim ersten Versuch, den Header anzupassen oder den Subshop an neue Farben und mobile Geräte anzupassen, tauchen Fragen auf. Wie bringst du individuelle Styles schnell und sauber ins Frontend? Wie sicherst du, dass Updates deine Anpassungen nicht überschreiben? Genau an diesem Punkt steht fast jede:r Händler:in und Entwickler:in früher oder später – und die Lösung lautet häufig: Shopware Less.
In diesem Praxis-Guide erfährst du, wie du mit Less in Shopware effizient und wartbar Designs und Layouts anpasst, welche Rolle Breakpoints, Variablen oder Mixins spielen und worauf du bei Subshops und beim Kompilieren der Styles achten solltest. Alle Inhalte sind so aufbereitet, dass sowohl Shopware-Einsteiger:innen als auch erfahrene User echten Mehrwert erhalten – mit sofort umsetzbaren Tipps und anschaulichen Beispielen für dein nächstes Projekt.
Shopware nutzt im Theme-System die Stylesheet-Sprache Less anstelle von klassischem CSS. Warum? Ganz einfach: Mit Less arbeitest du nicht nur schneller, sondern auch strukturierter und flexibler. Variablen, Funktionen und Mixins ermöglichen es dir, wiederverwendbare Designelemente zu schaffen und Anpassungen zentral zu steuern – ein immenser Vorteil, wenn du das Erscheinungsbild deines Shops effizient individualisieren und pflegen möchtest.
Gerade wenn im Shop mehrere Subshops existieren, du wechselnde Aktionen präsentieren möchtest oder das Layout immer wieder an aktuelle Anforderungen anpassen musst, wirst du mit Less flexibler. Denn statt viele einzelne CSS-Regeln zu ändern, steuerst du das Design über zentrale und klar strukturierte Dateien.
Bevor es ans Umsetzen geht, lohnt ein Blick in den technischen Hintergrund: Shopware bindet Less nativ in das Theme-System ein. Das bedeutet, du ergänzt deine .less-Dateien im jeweiligen Theme-Verzeichnis – Shopware übernimmt das Kompilieren und Einbinden beim Theme-Update oder Cache-Leeren automatisiert.
Tipp aus der Praxis: Erstelle niemals Anpassungen direkt an den Shopware Standard-Themes oder in Core-Dateien. Leg stattdessen immer ein eigenes Theme an, das auf dem Standard (z.B. Bare, Responsive) basiert! Sonst drohen Probleme bei Updates und Migrationen.
Die größten Pluspunkte von Shopware Less entdeckst du, sobald es um wiederkehrende Farben, Abstände oder Responsive-Design geht. Dank Variablen und Mixins passt du Änderungen zentral an.
Ein klassisches Beispiel: Willst du allen Buttons im Shop eine neue Hauptfarbe geben, setzt du im Theme eine Variable, z.B.
@brand-primary: #248dcc; // deine Wunschfarbe
Jetzt reicht ein Eintrag, den du überall im Theme vererben oder überschreiben kannst. Wenn du später die Farbe anpasst, genügt das Ändern an einer Stelle – und das komplette Button-Styling passt sich an.
Mixins sind praktisch "Funktionsbausteine" für CSS – etwa für Responsive-Design oder wiederkehrende Animationen.
.button-shadow() {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.button {
.button-shadow();
}
Shopware bietet im Standard bereits viele eigene Mixins, etwa für Pixel-zu-Rem-Umrechungen (.unitize()), Breakpoints (.breakpoint()) oder Shadows – die du entweder direkt nutzt oder im eigenen Theme erweitern, überschreiben oder anpassen kannst.
Damit Shopware den Überblick behält und du später noch weißt, weshalb bestimmte Styles im Subshop so und andere im Hauptshop anders aussehen, lohnt sich eine saubere Ordner- und Dateistruktur. Eine bewährte Struktur siehst du hier:
Beispiel für die all.less:
@import "_variables.less"; @import "_mixins.less"; @import "_modules/header.less"; @import "_modules/footer.less";
Durch diese Struktur kannst du später auch schnell einzelne Bereiche für Subshops oder Promotions gezielt ansteuern.
Im Alltag von Shopware-Projekten landet man oft bei der Frage: Wie überschreibe ich Styles, ohne Updates zu gefährden oder Stylesheet-Konflikte zu riskieren? Hier liefern dir Less-Mechanismen zusammen mit der Shopware Theme-Vererbung die sichere Antwort!
/* Nur für den Subshop */
@if (@shop-id = '3') {
.button {
background: #dd3444;
}
}
Über die @shop-id Variable kannst du gezielt unterschiedliche Styles für unterschiedliche Subshops ausgeben, etwa wenn ein Subshop eine spezielle Marke oder eigenständige CI braucht.
Ein zentrales Feature: Der Shopware Less Compiler. Er sorgt dafür, dass alle Less-Dateien beim Leeren des Theme-Caches automatisch neu zu CSS kompiliert und fehlerhafte Syntax gemeldet wird. Hier ein paar Hinweise aus dem Praxisalltag:
Auch Plugins, die eigene Less-Dateien bereitstellen, werden beim Kompilieren eingebunden. Willst du Styles aus Plugins anpassen, überschreibe die entsprechenden Mixins oder Variablen im eigenen Theme.
Online-Shops müssen heute auf jedem Endgerät überzeugen – vom Smartphone bis zum 4K-Monitor. Shopware setzt daher in seinen Standard-Themes und -Mixins auf flexible Breakpoints.
| Gerätetyp | Empfohlene Breakpoints Shopware 5 / 6 |
|---|---|
| Smartphone (Portrait) | max-width: 479px |
| Smartphone (Landscape) | 480px–767px |
| Tablet | 768px–991px |
| Desktop (klein) | 992px–1199px |
| Desktop (groß) | ab 1200px |
Shopware stellt praktische Less-Mixins zur Verfügung, um Breakpoints einfach einzubinden:
.button {
.breakpoint(@tablet) {
font-size: 18px;
}
}
So erreichst du, dass sich z.B. Buttons oder Header ab einem bestimmten Viewport automatisch anpassen – ohne ellenlange Media-Queries im CSS. Gerade mit mehreren Subshops oder speziellen Aktionen kannst du damit gezielt mobile oder Desktop-Layouts abweichen lassen.
Neben dem Hauptshop lassen sich in Shopware mehrere Subshops mit eigenen Domains, Produkten oder Zielgruppen anlegen. Aber wie stellst du sicher, dass jeder Subshop sein unverwechselbares „Face“ bekommt? Mit Shopware Less kannst du Styles pro Shop oder Subshop granular steuern.
_variables_shop2.less und binde sie im Einstiegspunkt all.less nur für die zugehörige Shop-ID ein.@shop-id-Abfrage, ob Styles nur im Subshop ausgegeben werden.Vorteil: Änderungen für einen Subshop wirken sich nicht auf andere aus – du behältst die zentrale Kontrolle und kannst trotzdem für jede Zielgruppe oder Kampagne individuelle CI-Regeln umsetzen.
Lösung: Immer Child-Themes und eigene Dateien verwenden. Sonst überschreibt das nächste Update deine Anpassungen!
Lösung: Nutze für individuelle Styles separate Selektoren oder erhöhe die Selektivität gezielt, niemals mit !important-Trickserei arbeiten.
Lösung: Nach jeder Änderung Cache via Backend-Menü oder Konsole leeren. Prüfe, ob der Shop im Produktiv- oder Entwicklungsmodus läuft – nur im Entwicklermodus bekommst du direkte Compile-Fehler angezeigt.
Lösung: Halte die Datei- und Variablenstruktur sauber, benenne und dokumentiere deine Less-Files verständlich.
src/less/ und deine Dateien all.less, _variables.less etc..all.less die @import-Regeln, um alle Modul- und Variablen-Dateien zu laden.Ob neue Farbwelt für den Frühlings-Sale, gezielte Anpassungen im Header eines Subshops oder die perfekte Darstellung auf dem iPhone – Shopware Less macht deine Theme-Gestaltung effizient, strukturiert und absolut updatesicher. Du steuerst zentrales Shop-Design mit Variablen, strukturierst Anpassungen über Mixins und holst das Maximum an Flexibilität heraus – sowohl in Shopware 5 als auch Shopware 6. Gleichzeitig behältst du bei mehreren Subshops, saisonalen Kampagnen oder sich ständig ändernden Anforderungen den Überblick und wandelst Designänderungen in minimaler Zeit in sichtbare Ergebnisse um.
Mit Shopware Less werden Anpassungen am Layout und Design nicht nur technisch einfacher, sondern auch im Alltag skalierbar und zukunftssicher. So bist du gerüstet, um deinen Online-Shop an die Wünsche deiner Kund:innen anzupassen, neue Subshops zu launchen oder spezielle Aktionen ohne Frust und aufwendige Fehlersuche umzusetzen.