Es ist Montagmorgen, 9:15 Uhr. Du sitzt vor deinem Bildschirm und starrst auf deinen Shopware-Shop. Die Funktionen stimmen, die Produkte sind eingestellt, aber irgendetwas fehlt noch. Der Footer sieht zu generisch aus, das Logo könnte besser positioniert sein, und für die neue Marketing-Kampagne benötigst du zusätzliche Inhalte im Header. Kurz gesagt: Du musst die Shopware Templates anpassen – aber wo fängst du an, ohne dabei das System zu beschädigen?
Diese Situation kennst du? Dann bist du hier richtig. Die Template-Anpassung in Shopware mag zunächst komplex erscheinen, aber mit der richtigen Herangehensweise wird sie zu einem mächtigen Werkzeug für deine individuellen Shop-Anforderungen.
Bevor wir in die praktische Umsetzung einsteigen, hier die wichtigste Regel: **Fasse niemals die Original-Templates von Shopware an!** Diese Dateien befinden sich in Verzeichnissen wie `/vendor/shopware/storefront/Resources/views/storefront/` und werden bei jedem Update überschrieben.
Stell dir vor, du passt das Logo direkt in der Originaldatei an. Läuft prima – bis zum nächsten Shopware-Update. Plötzlich sind alle deine Änderungen weg, und du stehst wieder am Anfang. Deshalb arbeiten wir immer mit abgeleiteten Templates in einem eigenen Theme.
Das Prinzip funktioniert so: Du erstellst ein eigenes Theme und überschreibst nur die Templates, die du anpassen möchtest. Shopware lädt dann automatisch deine angepasste Version anstelle der Originaldatei.
Falls du noch kein eigenes Theme hast, ist das der erste Schritt. Über die Konsole erstellst du mit folgendem Befehl ein neues Theme:
php bin/console theme:createShopware generiert dann eine Theme-Struktur, die du als Extension in der Administration unter "Erweiterungen > Meine Erweiterungen" findest. Nach der Installation und Aktivierung kannst du das Theme in den Sales Channel-Einstellungen zuweisen. Zum Shopware 6 Theme bearbeiten nutzt du dann diese Grundstruktur.
Dein Theme-Verzeichnis hat dann folgende Struktur:
/custom/plugins/DeinTheme/
├── src/
│ └── Resources/
│ └── views/
│ └── storefront/
Hier legst du alle deine angepassten Templates ab.
Shopware 6 nutzt die Template-Engine Twig, die auf einem Block-System basiert. Jedes Template ist in verschiedene Blöcke unterteilt, die du gezielt überschreiben kannst. Das gibt dir maximale Flexibilität: Du musst nicht das komplette Template neu schreiben, sondern nur die Teile ändern, die du anpassen möchtest.
Die Vererbung funktioniert mit dem `sw_extends`-Befehl. Shopware hat den Standard-Twig-Befehl `extends` erweitert, um Multivererbung zu ermöglichen. Das bedeutet, du kannst Templates von mehreren Quellen gleichzeitig erweitern.
Nehmen wir ein konkretes Beispiel. Du möchtest das Logo im Header verändern. Hier die Schritt-für-Schritt-Anleitung:
Das Logo befindet sich in der Datei `/vendor/shopware/storefront/Resources/views/storefront/layout/header/logo.html.twig`. Diese Pfadstruktur musst du dir merken.
Profi-Tipp: Nutze das Plugin "FroshDevelopmentHelper". Es zeigt dir direkt im Frontend, welche Templates und Blöcke verwendet werden. Das spart enorm viel Zeit beim Suchen.
Erstelle die exakt gleiche Verzeichnisstruktur in deinem Theme:
/custom/plugins/DeinTheme/src/Resources/views/storefront/layout/header/logo.html.twigIn deine neue `logo.html.twig` kommt folgender Code:
<div class="custom-logo">
<img src="" alt="Mein Shop">
</div>
Die erste Zeile erweitert das Original-Template. Im Block `layout_header_logo_link` überschreibst du dann den Inhalt komplett.
Oft möchtest du Inhalte nicht komplett ersetzen, sondern nur ergänzen. Dafür gibt es den `parent()`-Befehl:
<div class="custom-logo">
<img src="" alt="Mein Shop">
</div>
Oder für Inhalte vor dem Original:
<div class="custom-logo">
<img src="" alt="Mein Shop">
</div>
Mit dem Shopware 6 parent-Befehl behältst du den ursprünglichen Inhalt und erweiterst ihn gezielt.
Für mehrsprachige Shops sind Textbausteine unverzichtbar. Du findest sie in der Administration unter "Einstellungen > Shop > Textbausteine". Im Template verwendest du sie so:
Der `|trans`-Filter sorgt dafür, dass automatisch die richtige Übersetzung geladen wird. Für Shopware 6 Textbausteine Twig legst du sie zunächst in der Administration an und verwendest sie dann im Template:
<div class="custom-logo">
<img src="" alt="Mein Shop">
</div>
Ein häufiges Problem: Du möchtest Daten ausgeben, weißt aber nicht, welche Variablen verfügbar sind. Die Lösung ist der `dump()`-Befehl:
Dieser gibt alle verfügbaren Variablen der aktuellen Seite aus. Wichtig: Das funktioniert nur im Entwicklungsmodus. Für die Produktionsumgebung musst du diese Zeile wieder entfernen. Der Shopware 6 dump-Befehl ist essentiell zum Verstehen der verfügbaren Daten.
Alternativ nutzt du das FroshDevelopmentHelper-Plugin, das alle Shopware 6 Variablen übersichtlich im Twig-Tab des Profilers anzeigt. Mit Shopware 6 Twig variables erhältst du einen kompletten Überblick über die Datenstruktur.
Manchmal möchtest du Template-Teile an mehreren Stellen verwenden. Dafür gibt es `sw_include`:
Das ist besonders praktisch für wiederkehrende Elemente wie Preisanzeigen, Buttons oder Produktinformationen.
Nicht nur das Frontend, auch Dokumente wie Rechnungen oder Lieferscheine lassen sich anpassen. Die Basis-Datei ist `/vendor/shopware/core/Framework/Resources/views/documents/base.html.twig`.
Für deine Anpassungen legst du die Datei hier ab:
/custom/plugins/DeinTheme/src/Resources/views/documents/base.html.twigBeispiel für die Ergänzung von E-Mail-Adresse und Website in Dokumenten:
Wichtiger Hinweis: Dokumentenanpassungen gelten für alle Sales Channels. Für channelspezifische Anpassungen nutzt du Bedingungen:
Custom Fields sind perfekt für zusätzliche Produktinformationen. Um sie im Frontend anzuzeigen, passt du das entsprechende Template an.
Beispiel für ein Custom Field auf der Produktdetailseite:
Die Struktur für Custom Fields verschiedener Bereiche:
| Bereich | Variable |
|---|---|
| Produkte | `page.product.translated.customFields.feldname` |
| Kunden (eingeloggt) | `page.customer.customFields.feldname` |
| Kategorien | `page.category.translated.customFields.feldname` |
| Bestellungen | `order.customFields.feldname` |
Nach Template-Änderungen musst du den Cache leeren:
php bin/console cache:clearDein Theme muss nicht nur installiert, sondern auch dem richtigen Sales Channel zugewiesen sein.
Die Pfade müssen ab dem `views`-Verzeichnis exakt übereinstimmen. Ein kleiner Tippfehler, und das Template wird nicht gefunden. Zum Shopware 6 Template erstellen ist die korrekte Struktur entscheidend.
Im Produktionsmodus werden Templates gecacht. Für Entwicklung solltest du den Entwicklungsmodus aktivieren:
composer install --devShopware's `sw_extends` ermöglicht es, von mehreren Templates gleichzeitig zu erben:
Das Shopware extend template-System bietet damit maximale Flexibilität für komplexe Anforderungen.
Je nach Kontext verschiedene Templates laden:
Viele kleine Shopware Template Blöcke verbessern die Flexibilität, ohne die Performance merklich zu beeinträchtigen. Nutze sie gezielt für bessere Wartbarkeit.
In der `.env`-Datei:
APP_ENV=dev
TWIG_DEBUG=true
Mit Shopware 6 debug Twig aktiviert siehst du detaillierte Informationen zu Template-Ladungen und möglichen Fehlern.
Der Symfony-Profiler zeigt dir genau, welche Templates geladen werden und wie lange sie brauchen. Für Shopware 6 Twig debug ist er unverzichtbar.
Das FroshDevelopmentHelper-Plugin ist unverzichtbar:
Oft musst du nicht nur Shopware-Core-Templates, sondern auch Plugin-Templates anpassen. Das Prinzip bleibt gleich, nur der Pfad ändert sich. Für das Shopware override Plugin erstellst du die entsprechende Struktur in deinem Theme.
Beispiel für Shopware Plugin extend template:
/custom/plugins/DeinTheme/src/Resources/views/storefront/page/plugin-name/template.html.twigDas Shopware extend Plugin template-System funktioniert identisch zum Core-System. Du kannst sowohl Shopware overwrite Plugin template als auch Shopware 6 override Plugin template nutzen.
Neben Template-Anpassungen benötigst du oft auch Styling-Änderungen. Shopware 6 SCSS und Shopware SASS werden in der `style.scss` deines Themes definiert:
/custom/plugins/DeinTheme/src/Resources/app/storefront/src/scss/style.scssFür Plugin-spezifische Styles nutzt du Shopware 6 Plugin SCSS in der entsprechenden Plugin-Struktur.
Shopware bietet spezielle Shopware Twig functions für häufige Aufgaben. Die Shopware 6 Twig functions erweitern die Standard-Twig-Funktionen um Shop-spezifische Features:
Zum Shopware Variablen anzeigen nutzt du neben `dump()` auch den Shopware dump-Befehl in verschiedenen Kontexten. Der Shopware 6 Twig dump funktioniert identisch zum Shopware 6 dump Twig-Ansatz.
Falls du von Shopware 5 migrierst: Der Shopware 5 dump-Befehl und Shopware 5 Variablen funktionieren anders als in Shopware 6. In Shopware 5 nutzt du Shopware Textbaustein Smarty statt Twig.
Für spezielle Variablen wie die Shopware Artikelnummer Variable oder Shopware neue Gruppe Template Variable findest du die entsprechenden Twig-Pendants in der Shopware 6-Dokumentation.
Das Shopware Block überschreiben-System ist der Kern der Template-Anpassungen. Mit Shopware Template Block überschreiben änderst du gezielt einzelne Bereiche. Der Shopware extend Block-Ansatz ermöglicht es, bestehende Inhalte zu erweitern statt zu ersetzen.
Spezielle Seiten wie Shopseiten haben eigene Variablen. Die Shopware Shopseiten Template Variable unterscheidet sich von Standard-Produktseiten und erfordert angepasste Template-Pfade.
Nutze Git für deine Theme-Entwicklung. So kannst du Änderungen nachverfolgen und bei Problemen zurückrollen.
Nach Shopware-Updates solltest du prüfen, ob sich die Original-Templates geändert haben. Eventuell musst du deine Anpassungen entsprechend aktualisieren.
Dokumentiere deine Template-Anpassungen. Das hilft dir und anderen Entwicklern bei späteren Änderungen.
Die Anpassung von Shopware Templates ist weit mehr als nur optische Kosmetik. Sie ermöglicht es dir, deinen Shop exakt an deine Geschäftsanforderungen anzupassen und ein einzigartiges Kundenerlebnis zu schaffen. Mit dem Verständnis für die Template-Vererbung, den richtigen Werkzeugen und einer systematischen Herangehensweise verwandelst du Standard-Templates in maßgeschneiderte Lösungen.
Der Schlüssel liegt darin, die Shopware-Architektur zu respektieren und sauber zu arbeiten. Nutze eigene Themes, halte dich an die Verzeichnisstrukturen und vergiss nie das Cache-Clearing. So bleibt dein Shop auch nach Updates funktionsfähig und deine individuellen Anpassungen bestehen.
Template-Anpassungen in Shopware sind eine Investition in die Zukunft deines Online-Geschäfts. Sie geben dir die Flexibilität, schnell auf Marktveränderungen zu reagieren, neue Features umzusetzen und deinen Shop kontinuierlich zu optimieren. Mit diesen Grundlagen bist du bestens gerüstet, um aus deinem Shopware-Shop genau das zu machen, was dein Business braucht.