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.
Warum du niemals die Originaldateien bearbeiten solltest
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.
Dein eigenes Theme als Grundlage erstellen
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.
Die Grundlagen der Template-Vererbung verstehen
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.
Praktisches Beispiel: Header-Logo anpassen
Nehmen wir ein konkretes Beispiel. Du möchtest das Logo im Header verändern. Hier die Schritt-für-Schritt-Anleitung:
Schritt 1: Die richtige Template-Datei finden
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.
Schritt 2: Template-Datei in deinem Theme erstellen
Erstelle die exakt gleiche Verzeichnisstruktur in deinem Theme:
/custom/plugins/DeinTheme/src/Resources/views/storefront/layout/header/logo.html.twigSchritt 3: Template erweitern und anpassen
In deine neue `logo.html.twig` kommt folgender Code:
{% sw_extends '@Storefront/storefront/layout/header/logo.html.twig' %}
{% block layout_header_logo_link %}
<div class="custom-logo">
<img src="{{ asset('bundles/deinetheme/img/custom-logo.png') }}" alt="Mein Shop">
</div>
{% endblock %}
Die erste Zeile erweitert das Original-Template. Im Block `layout_header_logo_link` überschreibst du dann den Inhalt komplett.
Inhalte erweitern statt ersetzen
Oft möchtest du Inhalte nicht komplett ersetzen, sondern nur ergänzen. Dafür gibt es den `parent()`-Befehl:
{% block layout_header_logo_link %}
{{ parent() }}
<div class="zusaetzlicher-inhalt">Neue Inhalte nach dem Logo</div> {% endblock %} Oder für Inhalte vor dem Original:
{% block layout_header_logo_link %}
<div class="inhalt-vor-logo">Inhalt vor dem Logo</div>
{{ parent() }}
{% endblock %}
Mit dem Shopware 6 parent-Befehl behältst du den ursprünglichen Inhalt und erweiterst ihn gezielt.
Textbausteine nutzen und erstellen
Für mehrsprachige Shops sind Textbausteine unverzichtbar. Du findest sie in der Administration unter "Einstellungen > Shop > Textbausteine". Im Template verwendest du sie so:
{{ 'header.logoAltText'|trans }} 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:
{% block layout_header_logo_link %}
{{ parent() }}
<span class="custom-claim">{{ 'custom.headerClaim'|trans }}</span> {% endblock %} Verfügbare Variablen herausfinden
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:
{{ dump() }}
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.
Templates inkludieren und wiederverwenden
Manchmal möchtest du Template-Teile an mehreren Stellen verwenden. Dafür gibt es `sw_include`:
{% block component_product_box_price %}
{% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %} {% endblock %} Das ist besonders praktisch für wiederkehrende Elemente wie Preisanzeigen, Buttons oder Produktinformationen.
Dokumente individuell gestalten
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:
{% sw_extends '@Framework/documents/base.html.twig' %}
{% block document_footer_first_column %}
{{ parent() }}
{% if config.companyEmail %}
<div class="company-email">
E-Mail: {{ config.companyEmail }}
</div>
{% endif %}
{% endblock %}
Wichtiger Hinweis: Dokumentenanpassungen gelten für alle Sales Channels. Für channelspezifische Anpassungen nutzt du Bedingungen:
{% if order.salesChannelId == "deine-sales-channel-id" %}
<!-- Spezielle Anpassungen nur für diesen Channel --> {% else %}
{{ parent() }}
{% endif %}
Custom Fields im Frontend anzeigen
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:
{% sw_extends '@Storefront/storefront/page/product-detail/description.html.twig' %}
{% block page_product_detail_description_content_text %}
{{ parent() }}
{% if page.product.translated.customFields.custom_technische_daten %}
<div class="custom-technical-data">
<h4>Technische Daten</h4>
{{ page.product.translated.customFields.custom_technische_daten }}
</div>
{% endif %}
{% endblock %}
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` |
Häufige Stolpersteine vermeiden
Cache leeren nicht vergessen
Nach Template-Änderungen musst du den Cache leeren:
php bin/console cache:clearTheme muss aktiviert sein
Dein Theme muss nicht nur installiert, sondern auch dem richtigen Sales Channel zugewiesen sein.
Verzeichnisstruktur exakt einhalten
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.
Entwicklungsmodus für Template-Änderungen
Im Produktionsmodus werden Templates gecacht. Für Entwicklung solltest du den Entwicklungsmodus aktivieren:
composer install --devErweiterte Techniken für Fortgeschrittene
Mehrfachvererbung nutzen
Shopware's `sw_extends` ermöglicht es, von mehreren Templates gleichzeitig zu erben:
{% sw_extends '@Storefront/storefront/layout/header/logo.html.twig' %} {% sw_extends '@Parent/layout/header/logo.html.twig' %} Das Shopware extend template-System bietet damit maximale Flexibilität für komplexe Anforderungen.
Bedingte Template-Ladung
Je nach Kontext verschiedene Templates laden:
{% if app.request.attributes.get('_route') == 'frontend.home.page' %}
{% sw_include '@Storefront/storefront/element/cms-element-homepage-logo.html.twig' %} {% else %}
{{ parent() }}
{% endif %}
Performance-Optimierung
Viele kleine Shopware Template Blöcke verbessern die Flexibilität, ohne die Performance merklich zu beeinträchtigen. Nutze sie gezielt für bessere Wartbarkeit.
Debugging und Entwicklungshelfer
Template-Debugging aktivieren
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.
Twig-Profiler nutzen
Der Symfony-Profiler zeigt dir genau, welche Templates geladen werden und wie lange sie brauchen. Für Shopware 6 Twig debug ist er unverzichtbar.
Entwicklungshelfer installieren
Das FroshDevelopmentHelper-Plugin ist unverzichtbar:
- Zeigt verwendete Templates direkt im Frontend
- Listet alle verfügbaren Variablen mit Shopware Template Variablen ausgeben
- Bietet direkten Zugriff auf Template-Dateien
Plugin-Templates erweitern und überschreiben
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.
Styling mit SCSS anpassen
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.
Twig-Funktionen und erweiterte Ausgabe
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:
- `sw_extends` für Template-Vererbung
- `sw_include` für Template-Includes
- `asset()` für Asset-URLs
- `trans` für Übersetzungen
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.
Legacy-Systeme und Variablen
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.
Block-System verstehen und nutzen
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.
Wartung und Updates im Blick behalten
Versionierung deiner Anpassungen
Nutze Git für deine Theme-Entwicklung. So kannst du Änderungen nachverfolgen und bei Problemen zurückrollen.
Update-Sicherheit prüfen
Nach Shopware-Updates solltest du prüfen, ob sich die Original-Templates geändert haben. Eventuell musst du deine Anpassungen entsprechend aktualisieren.
Dokumentation führen
Dokumentiere deine Template-Anpassungen. Das hilft dir und anderen Entwicklern bei späteren Änderungen.
Template-Anpassungen als Fundament für individuellen E-Commerce-Erfolg
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.
