# Child-Theme

In diesem Beitrag erkläre ich dir, wie du in Shopware 6 saubere Child-Themes erstellst. Du erfährst, wie du die Vererbungsstruktur richtig setzt und somit das Haupt-Theme unberührt lässt. 

Somit kannst du deine eigenen Programmierungen vornehmen und das Haupt-Theme bleibt ausnahmslos updatekompatibel. Dieser Beitrag richtet sich vorrangig bzw. ausschließlich an Entwickler.

{% hint style="danger" %}

#### Nicht verwechseln!

Ein Child-Theme solltest du nicht mit einem **Theme-Duplikat** verwechseln. In dieser Anleitung erfährst du, wie du ein abgeleitetes Theme mit eigener Ordnerstruktur auf deinem Server erstellst.

Ein Theme-Duplikat ist lediglich ein **Datenbankeintrag** und erstellt keine eigene Ordnerstruktur.
{% endhint %}

Wenn du mehr über Theme-Duplikate erfahren möchtest, empfehle ich dir meinen Beitrag dazu. Ansonsten kannst du diesen Hinweis ignorieren.

## Child-Theme Vorlage zum Download

Ich habe keine Kosten und mühen gescheut, um dir eine kostenlose Vorlage zum Download bereitzustellen. 

Die Vorlage ist quasi universell einsetzbar und hat bspw. ein eigenes JS-Plugin und die Font „Lato“ zur Veranschaulichung integriert. Diese Vorlage bzw. das Child-Theme an sich ist ein **eigenständiges Theme** und muss demnach auch so bearbeitet werden. 

<table><thead><tr><th data-type="content-ref">Github Repo / Download</th></tr></thead><tbody><tr><td><a href="https://github.com/rhwebdesign/RHWebChildThemeTemplate">https://github.com/rhwebdesign/RHWebChildThemeTemplate</a></td></tr></tbody></table>

## Vererbung definieren

In der Vorlage siehst du die Konfiguration für die Vererbung in der Datei&#x20;

**src > Resources > theme.json**&#x20;

Wie du die Meta-Angaben und den Namespace des Child-Themes änderst, weißt du sicherlich. Aber in dieser Datei findest du den Wert **@ParentThemeNamespace**. Diesen Wert musst du mit dem Wert des zu überschreibenden Themes austauschen damit die Vererbung greift.

{% hint style="info" %}
Den zu ersetzenden Namespace des findest du in der composer.json Datei des Haupt-Themes.&#x20;

Für mein [Tronic-Theme](https://store.shopware.com/rhweb26180384651/tronic-pro-responsive-premium-theme.html) wäre es bspw. der Namespace **@RHWebTronic**
{% endhint %}

{% hint style="danger" %}

#### Hinweis:&#x20;

Stelle sicher, dass das Parent – Theme ebenfalls installiert, kompiliert und aktiviert ist. Sonst kann es ggf. zu Darstellungsfehlern führen.
{% endhint %}

{% @github-files/github-code-block url="<https://github.com/rhwebdesign/RHWebChildThemeTemplate/blob/master/src/Resources/theme.json>" %}

## Child Theme programmieren

Bevor du loslegst, solltest du noch folgende Vorkehrungen treffen! Diese sind nicht notwendig, damit du programmieren kannst. Es sind lediglich ein paar Metainformationen für deine CI.

1. **Namespaces anpassen**\
   Hier gibt es ein paar Baustellen, bspw. den Ordnernamen, die Klasse, die composer.json – Datei etc.
2. **Mitgeliefertes Javascript anpassen** \
   Das Child-Theme kommt mit einem Beispiel Javascipt – Plugin im Ordner.
3. **Preview und Icon austauschen**\
   Im Ordner **src > Resources > app** findest du das Preview Image. Und im Ordner **src > Resources > config** findest du das App – Icon.
4. **Views anpassen**\
   Im Ordner **src > Resources > views** findest du ein Beispiel der **base.html.twig**.
5. **Fonts anpassen**\
   Das Child-Theme integriert die Font „Lato“, um dir ein Beispiel zu zeigen, wie du eigene Fonts implementierst. Im Assets Ordner des Themes und im jeweiligen .scss wird die Font eingebunden.

Wie du eigene Schriftarten mitlieferst, erkläre ich dir in einem anderen Beitrag.

{% content-ref url="eigene-fonts-einbinden" %}
[eigene-fonts-einbinden](https://docs.rh-webdesign.com/shopware-theme/fur-entwickler/eigene-fonts-einbinden)
{% endcontent-ref %}

Jetzt kann es losgehen! Dein Child-Theme ist fertig konfiguriert und das Haupttheme bleibt updatekompatibel. Das Child-Theme erbt neue Einstellungen des Haupt-Themes automatisch.