Es ist Montagmorgen, 9:30 Uhr. Du öffnest das Backend deines Shopware 5 Shops und bemerkst wieder diese träge Ladezeit. Beim Blick auf das Frontend fällt dir auf: Das Design, das vor zwei Jahren noch modern aussah, wirkt heute irgendwie... altbacken. Die Konkurrenz hat längst aufgeholt, mobile Optimierung bereitet Kopfschmerzen und die Entwicklungsgeschwindigkeit deines Teams hat sich merklich verlangsamt. Kommt dir das bekannt vor? Dann ist es höchste Zeit, über eine Shopware 6 Theme Migration nachzudenken.
Warum dein aktuelles Setup an Grenzen stößt
Die versteckten Bremsen in Shopware 5
Shopware 5 war lange Zeit eine solide Wahl für E-Commerce-Projekte. Doch mit den Jahren haben sich die Anforderungen drastisch verändert. Die jQuery-basierte Frontend-Architektur wirkt heute schwerfällig, der LESS-Precompiler ist kaum noch zeitgemäß und die Smarty-Template-Engine erschwert modernen Entwicklern den Einstieg.
Besonders schmerzhaft wird es beim Theme-Kompilieren: Wer kennt nicht die endlosen Wartezeiten nach jeder kleinen CSS-Änderung? Ein Kaffee hier, ein Gespräch dort – die Entwicklungszeit explodiert förmlich.
Mobile First ist kein Luxus mehr
Heute shoppen über 60% aller Kunden mobil. Shopware 5 Themes sind oft noch Desktop-orientiert konzipiert und wirken auf Smartphones umständlich. Die Performance-Optimierung für mobile Endgeräte ist aufwändig und oft nur mit Kompromissen umsetzbar.
Der Quantensprung zu Shopware 6
Moderne Technologie-Basis als Fundament
Die Shopware 6 Theme Migration bringt dich technologisch in die Gegenwart. Statt jQuery setzt das System auf modernes ES6 JavaScript mit Helper-Klassen. Die Twig Template Engine ersetzt das veraltete Smarty-System und bietet deutlich mehr Flexibilität.
Besonders beeindruckend ist der Wechsel von LESS zu SASS/SCSS. Als Frontend-Entwickler findest du dich sofort zurecht, denn SASS ist heute der de-facto Standard. Zusätzlich profitierst du von Bootstrap 4 als solider Basis – keine selbstgebastelten CSS-Konstrukte mehr.
| Shopware 5 | Shopware 6 |
|---|---|
| jQuery | ES6 JavaScript |
| Smarty Templates | Twig Templates |
| LESS Precompiler | SASS/SCSS |
| Eigene CSS-Frameworks | Bootstrap 4 |
| PHP-basierter Compiler | Webpack Bundler |
Webpack revolutioniert den Entwicklungsprozess
Der größte Gamechanger ist Webpack als Bundler. Die Entwicklungsumgebung unterstützt Hot Module Replacement – Änderungen werden quasi in Echtzeit sichtbar, ohne dass du die Seite neu laden musst. Aus minutenlangen Wartezeiten werden Sekunden.
Schritt-für-Schritt zur erfolgreichen Theme Migration
Vorbereitung ist der Schlüssel
Bevor du mit der eigentlichen Shopware 6 Theme Entwicklung beginnst, solltest du eine gründliche Bestandsaufnahme machen:
Checkliste vor der Migration:
- Welche individuellen Features nutzt dein aktuelles Theme?
- Welche Third-Party-Extensions sind integriert?
- Wie komplex sind deine Template-Anpassungen?
- Welche besonderen Design-Elemente müssen übernommen werden?
Theme-Erstellung in Shopware 6
Die Grundlage schaffst du mit dem Konsolen-Kommando:
bin/console theme:createDas System fragt nach einem Namen im CamelCase-Format mit Vendor-Prefix, beispielsweise "MeinUnternehmenCustomTheme". Shopware legt automatisch eine strukturierte Verzeichnisstruktur im Ordner /custom/plugins an.
Installation und Aktivierung
Die Installation erfolgt über bewährte Plugin-Befehle:
bin/console plugin:install --activate MeinUnternehmenCustomThemeAnschließend weist du das Theme einem Sales Channel zu:
bin/console theme:changeDas System führt dich interaktiv durch die Auswahl des Sales Channels und des gewünschten Themes.
Die theme.json als Steuerungszentrale
Das Herzstück jeder Shopware 6 Theme Konfiguration ist die theme.json-Datei:
{
"name": "MeinUnternehmenCustomTheme",
"author": "Mein Unternehmen GmbH",
"views": [
"@Storefront",
"@Plugins",
"@MeinUnternehmenCustomTheme"
],
"style": [
"@Storefront",
"app/storefront/src/scss/base.scss"
],
"script": [
"@Storefront",
"app/storefront/dist/storefront/js/main.js"
],
"config": {
"fields": {
"primary-brand-color": {
"label": {
"de-DE": "Primärfarbe",
"en-GB": "Primary Color"
},
"type": "color",
"value": "#e74c3c"
}
}
}
}SCSS-Entwicklung mit System
Vererbung clever nutzen
Ein Shopware 6 Custom Theme erbt standardmäßig alle Styles vom Storefront-Theme. Du überschreibst nur die Bereiche, die tatsächlich angepasst werden müssen. Das spart Zeit und macht Wartung deutlich einfacher.
Die base.scss dient als Einstiegspunkt. Ein bewährter Ansatz ist es, zunächst alle Imports aus dem Original-Storefront zu kopieren und auszukommentieren:
// @import "abstract/variables";
// @import "skin/shopware/base";
// @import "component/product-box";Gezieltes Überschreiben von Komponenten
Möchtest du beispielsweise die Produktboxen anpassen, suchst du im Frontend die entsprechenden CSS-Klassen und erstellst eine gleichnamige Datei in deinem Theme:
/custom/plugins/MeinTheme/src/Resources/app/storefront/src/scss/component/_product-box.scss
.product-box {
.product-name {
color: #e74c3c;
font-weight: 600;
}
.product-price {
font-size: 1.2rem;
color: #2c3e50;
}
}Variablen-Management im Backend
Ein großer Vorteil der Shopware 6 Theme Anpassung sind konfigurierbare Variablen. In der theme.json definierte Farben, Schriften oder Medien können Kunden direkt im Backend anpassen:
"config": {
"fields": {
"header-background": {
"label": {
"de-DE": "Header-Hintergrund"
},
"type": "color",
"value": "#ffffff"
}
}
}Twig Templates: Flexibilität trifft Einfachheit
Template-Struktur verstehen
Shopware 6 Twig Templates folgen einem klaren Vererbungssystem. Jede Template-Datei kann über Blöcke erweitert oder überschrieben werden. Das Grundprinzip:
{% sw_extends '@Storefront/storefront/page/product-detail/index.html.twig' %}
{% block page_product_detail_content %}
<div class="custom-product-wrapper">
{{ parent() }}
<div class="additional-info">
<!-- Eigene Ergänzungen -->
</div>
</div>
{% endblock %}Blöcke erweitern statt überschreiben
Mit {{ parent() }} behältst du die ursprüngliche Funktionalität und ergänzt gezielt eigene Elemente. Das macht Updates deutlich sicherer, da weniger Code komplett überschrieben wird.
Performance-Optimierung durch Hot Module Replacement
Der Hot Mode als Entwicklungs-Booster
Der Hot Module Replacement Modus ist ein echter Quantensprung:
./psh.phar storefront:hot-proxyDieser Befehl startet einen Development Server auf https://localhost:9998. Änderungen an SCSS-Dateien werden ohne Seitenneuladung direkt im Browser sichtbar. Die Entwicklungsgeschwindigkeit steigt exponentiell.
Docker-Setup für reibungslose Entwicklung
Besonders auf macOS kann die Performance leiden. Docker-Sync schafft Abhilfe:
# docker-sync.yml
version: "2"
syncs:
shopware-sync:
src: './'
sync_strategy: 'native_osx'
sync_excludes: ['.git', 'node_modules']JavaScript-Entwicklung ohne jQuery-Ballast
ES6-Module als neuer Standard
Shopware 6 JavaScript Entwicklung setzt auf moderne ES6-Module. Die main.js in deinem Theme dient als Einstiegspunkt:
// Import von Shopware Core-Funktionen
import Plugin from 'src/plugin-system/plugin.class';
import DomAccess from 'src/helper/dom-access.helper';
// Eigene Plugin-Klasse
export default class CustomProductSlider extends Plugin {
init() {
this.slider = DomAccess.querySelector(this.el, '.product-slider');
this.initSlider();
}
initSlider() {
// Slider-Logik ohne jQuery
}
}Helper-Klassen nutzen
Shopware 6 bietet praktische Helper-Klassen wie ViewportDetection, DomAccess oder PluginManager. Diese ersetzen typische jQuery-Funktionen und sind deutlich performanter.
Häufige Stolperfallen vermeiden
Icon-Integration richtig angehen
Ein bekanntes Problem ist die Integration eigener Icons. Das Standard-System unterstützt nur die mitgelieferten Icons. Eine elegante Lösung ist die Erweiterung des Icon-Templates:
{# utilities/icon.html.twig #}
{% sw_extends '@Storefront/storefront/utilities/icon.html.twig' %}
{% block utilities_icon %}
{% set iconPath = '@' ~ themeClass ~ '/app/storefront/src/assets/icon/' ~ name ~ '.svg' %}
{% if iconExists(iconPath) %}
{% sw_include iconPath %}
{% else %}
{{ parent() }}
{% endif %}
{% endblock %}Cache-Management beachten
Während der Entwicklung solltest du regelmäßig Caches leeren:
bin/console cache:clear
./psh.phar cacheSCSS vs. Sass Syntax
Shopware 6 verwendet außerhalb des Hot Mode den scssphp-Compiler, der nur SCSS-Syntax unterstützt. Die einrückungsbasierte Sass-Syntax funktioniert nicht zuverlässig.
Migration bestehender Themes: Praktisches Vorgehen
Komponenten-basierte Analyse
Zerlege dein bestehendes Shopware 5 Theme in logische Komponenten:
- Header/Navigation
- Produktlisting
- Produktdetails
- Checkout-Prozess
- Footer
Migriere diese Bereiche schrittweise, anstatt alles auf einmal umzustellen.
CSS-Klassen Mapping
Erstelle eine Übersicht der wichtigsten CSS-Klassen:
| Shopware 5 | Shopware 6 |
|---|---|
.product--box |
.product-box |
.navigation--list |
.navigation-main |
.checkout--item |
.checkout-item |
Template-Vergleich durchführen
Nutze Diff-Tools, um Unterschiede zwischen Shopware 5 und 6 Templates zu identifizieren. So erkennst du, welche Bereiche komplett neu strukturiert werden müssen.
Das neue Backend: Vue.js statt extJS
Moderne Administrations-Oberfläche
Das Shopware 6 Admin basiert auf Vue.js und bietet eine deutlich modernere und performantere Benutzeroberfläche. Theme-Konfigurationen sind intuitiver zugänglich und die Bearbeitung von CMS-Inhalten wird zum Vergnügen.
CMS-System als zentrales Konzept
Statt separater Einkaufswelten, Kategorieseiten und statischer Inhalte gibt es in Shopware 6 ein einheitliches CMS-System:
- Layouts definieren die Struktur
- Blöcke enthalten die Inhalte
- Elemente sind die kleinsten Bausteine
Diese Vereinheitlichung macht Content-Management deutlich konsistenter und flexibler.
Performance-Vergleich: Messbare Verbesserungen
Ladezeiten im direkten Vergleich
Typische Verbesserungen nach einer Shopware 6 Theme Migration:
| Metrik | Shopware 5 | Shopware 6 | Verbesserung |
|---|---|---|---|
| First Contentful Paint | 2,8s | 1,4s | -50% |
| Largest Contentful Paint | 4,2s | 2,1s | -50% |
| Time to Interactive | 5,1s | 2,8s | -45% |
| Bundle-Größe | 890 KB | 640 KB | -28% |
Mobile Performance besonders stark
Auf mobilen Endgeräten sind die Verbesserungen noch deutlicher spürbar. Das responsive Design von Bootstrap 4 funktioniert out-of-the-box und muss nicht mühsam nachgerüstet werden.
ROI der Migration: Wann sich der Aufwand lohnt
Entwicklungszeit-Ersparnis
Die moderne Toolchain reduziert Entwicklungszeiten um durchschnittlich 40%. Features, die in Shopware 5 Stunden dauerten, sind in Shopware 6 oft in Minuten umgesetzt.
Wartungsaufwand sinkt drastisch
- Weniger proprietäre Lösungen: Bootstrap und Standard-Technologien sind besser dokumentiert
- Modularer Aufbau: Einzelne Komponenten können isoliert gewartet werden
- Bessere Testbarkeit: Moderne JavaScript-Architektur erleichtert Automated Testing
Zukunftssicherheit als Investment
Shopware 5 erreicht 2025 das End-of-Life. Eine rechtzeitige Migration vermeidet Druck und hohe Last-Minute-Kosten. Außerdem profitierst du länger von den Vorteilen der modernen Architektur.
Typische Herausforderungen meistern
Legacy-Code schrittweise ersetzen
Nicht alles muss sofort neu entwickelt werden. Ein bewährter Ansatz:
- Phase 1: Grundlegendes Design übertragen
- Phase 2: Interaktive Elemente migrieren
- Phase 3: Spezielle Features neu implementieren
- Phase 4: Performance-Optimierung
Team-Schulung einplanen
Plane etwa 1-2 Wochen für die Einarbeitung deines Entwicklerteams ein. Die Investition macht sich durch höhere Produktivität schnell bezahlt.
Testphase ausreichend bemessen
Mindestens 2-3 Wochen sollten für ausgiebige Tests eingeplant werden. Besonders wichtig:
- Cross-Browser-Tests
- Mobile Darstellung
- Performance unter Last
- SEO-Kompatibilität
Die solide Architektur zahlt sich langfristig aus
Eine Shopware 6 Theme Migration ist weit mehr als ein technisches Upgrade – sie ist eine Investition in die Zukunft deines Online-Shops. Die moderne Technologie-Basis mit Webpack, SASS, Twig und ES6 JavaScript macht nicht nur die Entwicklung effizienter und angenehmer, sondern liefert auch messbar bessere Performance für deine Kunden.
Die Zahlen sprechen für sich: 50% schnellere Ladezeiten, 40% reduzierte Entwicklungszeit und deutlich geringere Wartungskosten. Gleichzeitig schaffst du die Basis für moderne Features wie Progressive Web Apps, bessere mobile Optimierung und zeitgemäße User Experience.
Der Aufwand der Migration mag zunächst abschreckend wirken, aber die Alternative – ein veraltetes System bis zum End-of-Life 2025 zu betreiben – ist deutlich kostspieliger. Teams, die heute den Wechsel vollziehen, profitieren nicht nur von der verbesserten Performance, sondern auch von motivierteren Entwicklern, die wieder mit modernen Tools arbeiten können.
Dein Shop verdient es, technologisch auf der Höhe der Zeit zu sein. Die Shopware 6 Theme Entwicklung bietet alle Werkzeuge, um auch in den nächsten Jahren erfolgreich zu wachsen.
