Individuelle Themes für Shopware 6

Ein Shopware-6-Theme ist mehr als eine Sammlung von Style-Dateien. Es muss vier Dinge gleichzeitig leisten: die Marke sichtbar machen, kurze Ladezeiten halten, nach Shopware-Updates wartbar bleiben und zu der Art passen, wie das Team im Backend arbeitet, etwa mit den Erlebniswelten für Inhaltsseiten. Themes für Shopware 6 entstehen hier seit dem Release 2019, und die Arbeitsweise ist genau auf diese vier Punkte ausgelegt. Dass Theme und Backend aus einer Hand kommen, spart dabei die Übergaben, an denen sonst Details verloren gehen.

Es gibt zwei Wege zum eigenen Auftritt, und beide funktionieren nach demselben Prinzip. Entweder wird das Shopware-Standard-Theme als Grundlage genommen, oder ein fertiges Theme aus dem Shopware Store gekauft und an die eigene Marke angepasst, was schneller und günstiger ist, wenn der Zuschnitt ohnehin passt. In beiden Fällen entsteht das eigene Theme als Erweiterung der Grundlage (Theme-Vererbung), nicht als Neuentwicklung daneben. Der Vorteil zeigt sich bei jedem Update: Führt Shopware neue CMS-Blöcke ein, überarbeitet den Checkout oder verbessert die Ladezeiten, kommen diese Änderungen automatisch mit. Überschrieben wird nur, was wirklich anders sein soll, und genau diese Stellen sind später auch die einzigen, die nach einem Versionssprung geprüft werden müssen.

Gearbeitet wird mit dem aktuellen Shopware-Stack: Twig 3 für Templates, SCSS für Styles, Webpack als Storefront-Build (die Administration setzt seit Shopware 6.7 auf Vite), JavaScript-Plugins auf Basis der Shopware-eigenen Plugin-Architektur. Als Orientierung für die Ladezeiten dienen die Web Vitals, also die Messwerte, die auch Google für die Bewertung heranzieht. Gemessen wird mit Lighthouse, üblich ist ein Vergleich vor und nach der Umstellung. Welche Werte am Ende herauskommen, hängt neben dem Theme auch am Hosting, an der Zahl der Erweiterungen und an den Inhalten. Vom Theme aus kommen die Voraussetzungen dafür: Bilder werden als WebP ausgeliefert und lazy geladen, kritisches CSS inline, JavaScript wird gesplittet, damit die Storefront beim ersten Render nichts unnötig blockiert.

Ein eigener Prüfpunkt bei jedem Theme ist die Barrierefreiheit. Seit Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz für Online-Shops im Endkundengeschäft, mit Ausnahmen für Kleinstunternehmen. Das Shopware-Standard-Theme bringt dafür schon einiges mit, eigene Anpassungen hebeln es aber leicht wieder aus: Markenfarben mit zu wenig Kontrast auf hellem Grund, Bedienelemente, die sich nur mit der Maus erreichen lassen, Formularfelder ohne zugeordnete Beschriftung, Bilder ohne Alternativtext. Die Umsetzung orientiert sich an den WCAG-Kriterien in Stufe AA, vor dem Live-Gang stehen ein Tastatur-Durchlauf und eine Kontrastmessung. Was darüber hinaus zur Barrierefreiheit gehört, liegt auf der Inhaltsseite und damit beim Betreiber: Alternativtexte zu Produktbildern, verständliche Beschreibungen, Untertitel bei Videos. Die rechtliche Bewertung im Einzelfall bleibt beim Auftraggeber.

Nicht zum Theme-Auftrag gehört das visuelle Konzept: Die Rolle hier ist Entwicklung, nicht Webdesign. Liegt ein Design vor, aus Figma, Sketch oder einem anderen Werkzeug, wird es umgesetzt; offene Punkte, die ein Entwurf naturgemäß lässt, etwa das Verhalten auf schmalen Bildschirmen oder Zustände wie „nicht auf Lager", werden vorher abgestimmt statt hinterher interpretiert. Gibt es noch kein Design, lassen sich Designer aus dem Netzwerk vermitteln, langjährige Partner, die Shopware-typische Bausteine wie Varianten-Auswahl, Warenkorb-Overlay, B2B-Login-Bereiche oder Filter kennen. Das spart die Abstimmungsschleifen, die sonst entstehen, wenn ein Design erst im Shop auf seine Machbarkeit trifft. Für kleinere Vorhaben kommt man inzwischen auch mit KI-Werkzeugen erstaunlich weit, gerade wenn es nur um Farben, Typografie und ein paar eigene Akzente auf Basis des Standard-Themes geht; auch das wird im Briefing offen besprochen.

Die Zusammenarbeit läuft standardmäßig zu 100 % remote und damit ortsunabhängig, direkt mit Shop-Betreibern, als Verstärkung für Agenturen und über IT-Vermittler. Code geht über Git, Zwischenstände stehen auf einer Staging-Umgebung zum Anschauen, und Design-Abnahmen laufen per Bildschirmübertragung oder als kurzes Video, damit sich Anmerkungen an konkreten Stellen festmachen lassen. Gearbeitet wird aus dem eigenen Büro im kontorworx-Coworking-Space in Rheine, persönliche Termine vor Ort sind nach Absprache möglich, etwa zum Auftakt mit dem Marketing-Team.