# Child-Theme

In this article, I'll explain how to create clean child themes in Shopware 6. You will learn how to set the inheritance structure correctly and thus leave the main theme untouched.

This allows you to do your own programming and the main theme remains update-compatible without exception. This article is primarily or exclusively aimed at developers.

{% hint style="danger" %}

#### Do not mix up!

You should not confuse a child theme with a **theme duplicate**. In this guide, you will learn how to create a derived theme with its own folder structure on your server.

A theme duplicate is merely a **database entry** and does not create its own folder structure.
{% endhint %}

If you want to find out more about theme duplicates, I recommend my article on this. Otherwise, you can ignore this note.

{% content-ref url="../preparation/theme-duplicates" %}
[theme-duplicates](https://docs.rh-webdesign.com/shopware-theme/en/preparation/theme-duplicates)
{% endcontent-ref %}

## Child theme template for download

I have spared no expense or effort to provide you with a free template to download.

The template can be used almost universally and has, for example, its own JS plugin and the "Lato" font integrated for illustration purposes. This template or the child theme itself is an **independent theme** and must therefore be edited as such.

<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>

## Define Inheritance

In the template, you can see the configuration for inheritance in the file

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

You probably know how to change the meta information and the namespace of the child theme. But in this file you will find the value **@ParentThemeNamespace**. You must exchange this value with the value of the theme to be overwritten for the inheritance to take effect.

{% hint style="info" %}
You can find the namespace to be replaced in the composer.json file of the main theme.

For my [Tronic theme](https://store.shopware.com/en/rhweb26180384651/tronic-pro-responsive-premium-theme.html), for example, it would be the namespace **@RHWebTronic**
{% endhint %}

{% hint style="danger" %}

#### Hint:&#x20;

Make sure that the parent theme is also installed, compiled and activated. Otherwise it may lead to display errors.
{% endhint %}

{% hint style="danger" %}
**Child theme cannot be assigned to the sales channel?**

This error usually occurs if an SCSS variable of the main theme could not be found. In this case, you should run the command `bin/console theme:refresh` in the console, or uninstall and reinstall the child theme.\
\
in all other cases, please check whether the theme.json file is correct and the theme has been compiled correctly.
{% endhint %}

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

## Child Theme development

Before you get started, you should take the following precautions! These are not necessary for you to be able to program. They are just a few pieces of meta information for your CI.

1. **Change Namespaces**\
   There are a few issues here, e.g. the folder name, the class, the composer.json file, etc.
2. **Customize supplied Javascript**\
   The child theme comes with a sample Javascipt plugin in the folder.
3. **Exchange preview and icon**\
   You will find the preview image in the **src > Resources > app** folder. And in the **src > Resources > config** folder you will find the app icon.
4. **Customize views**\
   In the **src > Resources > views** folder you will find an example of **base.html.twig**.
5. **Change Fonts**\
   The child theme integrates the "Lato" font to show you an example of how to implement your own fonts. The font is integrated in the assets folder of the theme and in the respective .scss.

I will explain how to include your own fonts in another article.

{% content-ref url="integrate-your-own-fonts" %}
[integrate-your-own-fonts](https://docs.rh-webdesign.com/shopware-theme/en/for-developers/integrate-your-own-fonts)
{% endcontent-ref %}

Now you're ready to go! Your child theme is fully configured and the main theme remains update-compatible. The child theme automatically inherits new settings from the main theme.