Individuelle Template-Anpassungen (Twig, HTML)
In diesem Artikel erfährst du, wie du individuelle Template-Anpassungen mit dem "ThemeWare® Customizing Plugin" durchführen kannst.
Wenn du das Erscheinungsbild von ThemeWare® mittels einer Template-Anpassung individuell verändern möchtest, findest du in diesem Artikel nützliche Tipps für die Arbeit mit Template-Dateien.
Hinweis: Das erstellen eines ThemeWare® Duplikates ist für Template-Anpassungen nicht notwendig.

Für individuelle Template-Anpassungen brauchst du in Shopware 6 ein eigenes Theme oder eine separate Erweiterung (Plugin oder App) und nicht – wie bei Shopware 5 – eine Theme-Ableitung.
  • Prüfe ob es im Shopware Community Store bereits ein passende Erweiterung gibt.
  • Alternativ kannst du die manuelle Methode mit unserem "ThemeWare® Customizing Plugin" bzw. der "ThemeWare® Customizing App" nutzen (siehe Abschnitt "Template Anpassungen integrieren (für erfahrende Anwender)").

Den grundlegenden Aufbau (Ordner, Template-Dateien, Twig-Blöcke etc.) gibt das Shopware Theme "Shopware default theme" vor, da ThemeWare® technisch eine "Erweiterung" dessen ist.
Hinweis: In der Shopware Cloud gibt es derzeit keine Möglichkeit Dateien von Erweiterungen (Plugins, Apps oder Themes) einzusehen.
Achtung: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes)!

custom/plugins/TcinnThemeWareXYZ/src/Resources/views
custom/plugins/TcinnThemeWareXYZ/src/Resources/views/themeware

custom/apps/TcinnThemeWareXYZApp/Resources/views/storefront
custom/apps/TcinnThemeWareXYZApp/Resources/views/storefront/themeware
ThemeWare® leitet im Rahmen unserer HC-Architecture® nur die nötigsten Template-Dateien ab und ergänzt für eigene Funktionen und Features (z.B. Widgets) eigene Template-Dateien.
Ergänzend dazu findest du den Quellcode vom Shopware Standard-Theme auf GitHub. Im Ordner "views/storefront" befinden sich alle Template-Dateien die für die Storefront relevant sind.
Tipp: Wenn du eine bestimmte Stelle in den Templates suchst, kannst du z.B. über den Inspektor deines Browsers eine CSS-Klasse suchen die sich an dem entsprechenden Element oder zumindest in unmittelbarer Umgebung des entsprechenden Elementes befindet. Diese CSS-Klasse kannst du dann im Shopware Git-Repository suchen. Meist findet man so recht schnell eine passende Template-Datei.

In Shopware 6 fehlt derzeit ein vollwertiges Child-Theme über welches man Dateien einbinden und Änderungen vornehmen kann (wie z.B. bei Shopware 5). Wir haben als Workaround ein kleines kostenfreies "ThemeWare® Customizing Plugin" bzw. eine "ThemeWare® Customizing App" für die Integration von individuellen Anpassungen und eigenen Dateien entwickelt.
Alle Informationen zur Installation und die Download-Links findest du in folgenden Artikeln:

Shopware 6 nutzt als Template-Engine Twig und nicht mehr Smarty wie in Shopware 5. Viele Dinge sind in Twig aber gleich oder zumindest sehr ähnlich. Damit du einen groben Überblick über Twig bekommst, haben wir nachfolgend die wichtigsten Informationen kurz zusammengefasst.
Hinweis: Weiterführende Links rund um das Thema "Twig" findest du in der Twig-Dokumentation unter: https://twig.symfony.com

In der ersten Zeile der Datei muss definiert werden, von welcher übergeordneten Datei diese abgeleitet wird.
{% sw_extends '@Storefront/storefront/page/product-detail/headline.html.twig' %}

Um eigne Inhalte vor oder nach dem eigentlichen Inhalt des Blocks zu platzieren, musst du nicht den kompletten Code des Blocks kopieren. Du kannst dafür den parent-Befehl wie folgt nutzen:

{% block name_des_blocks %}
{{ parent() }}
{# Platziere hier den neuen Inhalt #}
{% endblock %}

{% block name_des_blocks %}
{# Platziere hier den neuen Inhalt #}
{{ parent() }}
{% endblock %}

Möchtest du den Originalinhalt des Blocks vollständig austauschen, kannst du auf den parent-Befehl verzichten um den Block zu leeren.
{% block page_product_detail_name_container %}
{# Platziere hier den neuen Inhalt #}
{% endblock %}

Die Ausgabe aller auf der Seite verfügbaren Variablen erreichst du mit dem dump-Befehl. Die Ausgabe muss in einem Block erfolgen und ist nur im Entwicklermodus verfügbar.
{{ dump() }}

Den Namen des gewünschten Textbausteins kannst du der Textbaustein-Verwaltung deiner Administration ("Einstellungen" => "Shop" => "Textbausteine") entnehmen.
Damit die Übersetzungen der einzelnen Textbaustein-Sets berücksichtigt werden nutze den Zusatz "|trans".
{% block name_des_blocks %}
{{ parent() }}
{{ "twt.widget.communities.headline"|trans }}
{% endblock %}

Ein Zusatzfeld auf Produktebene wird wie folgt ausgeben:
{{ page.product.translated.customFields.technischer_name_zusatzfeld }}
Ein Zusatzfeld für Kategorien wird wie folgt ausgegeben:
{{ page.footer.navigation.active.translated.customFields.technischer_name_zusatzfeld }}
Hinweis: Mehr Informationen zu Zusatzfeldern findest du in der Shopware Dokumentation.

Die Ausgabe einer Variable muss ebenfalls in einem Block erfolgen. Das Beispiel zeigt die ThemeWare® Konfiguration "Body-Klasse" (Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "Individuelle CSS-Klasse" => Feld "Body-Klasse").
{# ab Shopware 6.4 #}
{{ theme_config('twt-body-class') }}
{# Shopware 6.3 oder darunter #}
{{ shopware.theme['twt-body-class'] }}

Über unseren ThemeWare® Config-Finder hast du die Möglichkeit alle ThemeWare® Variablen anzeigen zu lassen. Der "technische Name" in dieser Übersicht ist der Name der entsprechenden Variable, die du in Twig oder SCSS verwenden kannst.

Ist eine Template-Anpassung nur für einen bestimmten Verkaufskanal relevant, hast du die Möglichkeit deine Anpassung beispielsweise über die ThemeWare® Konfiguration mit der "Body-Klasse" einzuschränken.
Hinterlege dafür im Theme-Duplikat für den entsprechenden Verkaufskanal unter Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "Individuelle CSS-Klasse" => Feld "Body-Klasse" einen eindeutigen Namen für diesen Verkaufskanal (z.B. meinshopname).
Dieser Name kann dann in einer zusätzlichen Schleife auch für Twig genutzt werden.
{# Anpassung nur für Theme mit der Klasse meinshopname #}
{# ab Shopware 6.4 #}
{% if theme_config('twt-body-class') == "meinshopname" %}
{# Theme hat die Klasse meinshopname #}
{% endif %}
{# Shopware 6.3 oder darunter #}
{% if shopware.theme['twt-body-class'] == "meinshopname" %}
{# Theme hat die Klasse meinshopname #}
{% endif %}
Alternativ kannst du deine Anpassung auch an die ID des Verkaufskanals binden:
{# Anpassung für einen Sales channel #}
{# ab Shopware 6.4 #}
{% if context.salesChannel.id == "..." %}
{# Sales channel hat die ID ... #}
{% endif %}
Copy link
On this page
Einleitung
Einsicht in den Quellcode
Template Anpassungen integrieren (für erfahrende Anwender)
Hilfreiche Twig-Grundlagen
Eine Template-Datei ableiten
Eigene Inhalte in Blöcken platzieren
Block überschreiben
Anzeigen aller Variablen
Textbaustein einbinden
Zusatzfelder in der Storefront ausgeben
Anzeigen einer ThemeWare® Variable
Zusätzliches ThemeWare® Wissen
ThemeWare® Variablen finden
Abgrenzung für ThemeWare® Anpassungen