Shopware Theme Entwicklung

Individuelle Shopware Storefronts mit sauberer Komponentenstruktur, Mobile-first-Ansatz und Lighthouse-Fokus – entwickelt mit Twig und SCSS. Als Shopware Theme Entwickler setze ich Designs um, die performant, wartbar und markenspezifisch sind.

Was ist Shopware Theme Entwicklung?

Das Shopware Storefront-Framework basiert auf Twig-Templates, SCSS und Bootstrap. Eine Shopware Theme Entwicklung umfasst entweder die Anpassung des Standard-Themes (Child-Theme) oder die Entwicklung eines vollständigen Custom-Themes mit eigenem Designsystem.

Themes in Shopware 6 sind als Plugins strukturiert – das bedeutet: saubere Versionierung, einfache Aktivierung und Updatefähigkeit bei neuen Shopware-Releases. Kein Theme sollte Core-Dateien direkt überschreiben, sondern über Twig-Blocks erweitern.

Leistungsumfang

Child-Theme / Anpassung

Für Shops, die das Shopware Standard-Theme nutzen und gezielt anpassen möchten.

Farben, Typografie, Spacing über SCSS-Variablen
Template-Blöcke überschreiben mit Twig-Extends
Eigene Sections und CMS-Blöcke
Icon-Anpassungen und Custom Fonts

Custom Theme

Für Shops, die eine vollständig eigene Optik benötigen.

Vollständiges Designsystem mit SCSS-Komponentenbibliothek
Alle Twig-Templates neu gestaltet
Eigene Header, Footer, Produktseiten, Checkout-Flow
Mobile-first, Lighthouse-Score 80+

CMS-Blöcke & Sections

Eigene CMS-Elemente für den Shopware Experience Builder.

Eigene Block-Typen und Slot-Konfigurationen
Admin-Vorschau mit Vue.js
Wiederverwendbar für alle Kategorie- und Landingpages

Performance & Lighthouse

Theme-seitige Performance-Optimierung für bessere Core Web Vitals.

Asset-Minimierung und kritisches CSS
Lazy Loading für Bilder und untergeordnete Inhalte
LCP-Optimierung (Largest Contentful Paint)
CLS-Vermeidung durch definierte Bildabmessungen

Tech-Stack: Shopware Theme Entwicklung

Twig – Template-Engine von Symfony

SCSS – Komponentenbasiertes Styling

Bootstrap 5 – Basis des Shopware Storefronts

Vue.js – CMS-Block-Previews im Admin

Webpack – Asset-Build via Shopware CLI

Lighthouse – Performance-Messung & Optimierung

Ablauf einer Shopware Theme Entwicklung

Design-Briefing & Analyse: Vorhandenes Design (Figma, Adobe XD, PDF) sichten, Shopware-Version und Plugin-Stack prüfen, Anforderungen klären.
Theme-Basis aufsetzen: Child-Theme oder Custom-Theme-Plugin anlegen, SCSS-Variablen-Struktur definieren, Asset-Pipeline konfigurieren.
Komponenten-Entwicklung: Header, Footer, Produkt-Listings, Produktdetailseite, Checkout, Kategorie-Seiten – Schritt für Schritt umsetzen.
CMS-Blöcke: Eigene Sections und Blöcke für den Experience Builder entwickeln, falls benötigt.
Performance-Optimierung: Lighthouse-Audit durchführen, LCP / CLS / INP optimieren, WebP-Bilder, Lazy Loading.
Abnahme & Übergabe: Staging-Abnahme, Dokumentation der Komponentenstruktur, Einweisung des Redaktionsteams.

Kosten & Aufwand

Leistung	Typischer Aufwand
Child-Theme mit Farb- und Typo-Anpassungen	5–15 h
Child-Theme mit Template-Anpassungen	15–30 h
Custom Theme (Vollentwicklung)	40–100 h
Eigene CMS-Blöcke (pro Block)	4–12 h
Performance-Optimierung (Lighthouse-Audit + Umsetzung)	8–20 h