` mit der Klassse `product-detail-description-text` umgeben.
Wir durchsuchen das Git-Repository also einmal nach dieser CSS-Klasse und finden die Datei `description.html.twig` (siehe [GitHub](https://github.com/shopware/shopware/blob/trunk/src/Storefront/Resources/views/storefront/component/product/description.html.twig#L14)).
Ein Blick in den Quellcode dieser Datei zeigt, dass der `
` mit der Klassse `product-detail-description-text` sich im Twig-Block `component_product_description_content_text` befindet.
...
{% block component_product_description_content_text %}
<div class="product-detail-description-text"
itemprop="description">
{{ product.translated.description|raw }}
</div>
{% endblock %}
...
Leite also die Datei `description.html.twig` für deine Template-Anpassung ab und erweitere den Twig-Bock `component_product_description_content_text`.
Weitere Informationen zum ableiten und erweitern von Template-Dateien findest du nachfolgend.
***
## Template Anpassungen integrieren (für erfahrende Anwender)
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 zu den Erweiterungen, zur Installation und die Download-Links findest du in folgenden Artikeln:
{% content-ref url="individuelle-anpassungen-mit-dem-themeware-customizing-plugin" %}
[individuelle-anpassungen-mit-dem-themeware-customizing-plugin](https://wiki.themeware.design/wissensdatenbank/anleitungen/individuelle-anpassungen/individuelle-anpassungen-mit-dem-themeware-customizing-plugin)
{% endcontent-ref %}
{% content-ref url="individuelle-anpassungen-mit-dem-themeware-customizing-app" %}
[individuelle-anpassungen-mit-dem-themeware-customizing-app](https://wiki.themeware.design/wissensdatenbank/anleitungen/individuelle-anpassungen/individuelle-anpassungen-mit-dem-themeware-customizing-app)
{% endcontent-ref %}
***
## Hilfreiche Twig-Grundlagen
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.
{% hint style="info" %}
**Hinweis**: Weiterführende Links rund um das Thema "Twig" findest du in der Twig-Dokumentation unter:
{% endhint %}
### Eine Template-Datei ableiten
In der ersten Zeile der Datei muss definiert werden, von welcher übergeordneten Datei diese abgeleitet wird.
```twig
{% sw_extends '@Storefront/storefront/page/product-detail/headline.html.twig' %}
```
#### ThemeWare® Template-Datei ableiten
```twig
{% sw_extends '@Storefront/storefront/themeware/extensions/twt-hero-section.html.twig' %}
```
### Inhalt in Twig-Block ergänzen
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:
#### Inhalt nach dem Originalinhalt des Blocks ergänzen:
```twig
{% block name_des_blocks %}
{{ parent() }}
{# Platziere hier den neuen Inhalt #}
{% endblock %}
```
#### Inhalt vor dem Originalinhalt des Blocks ergänzen:
```twig
{% block name_des_blocks %}
{# Platziere hier den neuen Inhalt #}
{{ parent() }}
{% endblock %}
```
### Twig-Block überschreiben
Möchtest du den Originalinhalt des Blocks vollständig austauschen, kannst du auf den parent-Befehl verzichten um den Block zu leeren.
```twig
{% block page_product_detail_name_container %}
{# Platziere hier den neuen Inhalt #}
{% endblock %}
```
### Anzeigen aller Variablen
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](https://docs.shopware.com/de/shopware-6-de/tutorials-und-faq/fehlermeldungen-debuggen#aktivieren-des-debug-bzw-entwicklermodus) verfügbar.
```twig
{{ dump() }}
```
### Textbaustein einbinden
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`.
```twig
{% block name_des_blocks %}
{{ parent() }}
{{ "twt.widget.communities.headline"|trans }}
{% endblock %}
```
### Zusatzfelder in der Storefront ausgeben
Ein Zusatzfeld auf Produktebene wird wie folgt ausgeben:
```twig
{{ page.product.translated.customFields.technischer_name_zusatzfeld }}
```
Ein Zusatzfeld für Kategorien wird wie folgt ausgegeben:
```twig
{{ page.footer.navigation.active.translated.customFields.technischer_name_zusatzfeld }}
```
{% hint style="success" %}
**Tipp**: Mehr Informationen zu Zusatzfeldern und dem einbinden in die Storefront findest du im Artikel [zusatzfelder-custom-fields](https://wiki.themeware.design/wissensdatenbank/anleitungen/zusatzfelder-custom-fields "mention").
{% endhint %}
### Abfragen einer ThemeWare® Variable
Die Abfrage einer Theme-Variable (z.B. die ThemeWare® Konfiguration "Body-Klasse") in einem Twig-Block funktioniert wie folgt:
```twig
{% if theme_config('twt-body-class') %}
...
{% endif %}
```
### Ausgabe einer ThemeWare® Variable
Die Ausgabe einer Theme-Variable muss ebenfalls in einem Twig-Block erfolgen. Das folgende Beispiel zeigt die ThemeWare® Konfiguration "Body-Klasse" (Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "Individuelle CSS-Klasse" => Feld "Body-Klasse").
```twig
{{ theme_config('twt-body-class') }}
```
***
## Zusätzliches ThemeWare® Wissen
### ThemeWare® Variablen finden
Über unseren [ThemeWare® Config-Finder](https://config.themeware.design) 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.
### Abgrenzung für ThemeWare® Anpassungen
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.
```twig
{# Anpassung nur für Theme mit der Body-Klasse z.B. "meinshopname" #}
{% if theme_config('twt-body-class') == "meinshopname" %}
{# Theme hat die Body-Klasse "meinshopname" #}
...
{{ parent() }}
{% else %}
{# Theme hat nicht die Body-Klasse "meinshopname" #}
{{ parent() }}
{% endif %}
```
Alternativ kannst du deine Anpassung auch an die ID des Verkaufskanals binden:
```twig
{# Anpassung für einen Sales channel mit der ID "..." #}
{% if context.salesChannel.id == "..." %}
{# Sales channel hat die ID "..." #}
...
{{ parent() }}
{% else %}
{# Sales channel hat nicht die ID "..." #}
{{ parent() }}
{% endif %}
```