Child-Theme

A child theme is the basis for any programming that affects the frontend.

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.

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.

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

pageTheme Duplicates

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.

Github Repo / Download
https://github.com/rhwebdesign/RHWebChildThemeTemplate

Define Inheritance

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

src > Resources > theme.json

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.

You can find the namespace to be replaced in the composer.json file of the main theme.

For my Tronic theme, for example, it would be the namespace @RHWebTronic

Hint:

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

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.

https://github.com/rhwebdesign/RHWebChildThemeTemplate/blob/master/src/Resources/theme.json

{
    "name": "Child - Theme | Template",
    "author": "RH-Webdesign",
    "previewMedia": "app/child-theme-preview.jpg",
    "views": [
        "@Storefront",
        "@ParentThemeNamespace",
        "@RHWebChildThemeTemplate",
        "@Plugins"
    ],
    "style": [
        "app/storefront/src/scss/overrides.scss",
        "@Storefront",
        "@ParentThemeNamespace",
        "app/storefront/src/scss/base.scss"
    ],
    "script": [
        "@Storefront",
        "@ParentThemeNamespace",
        "app/storefront/dist/storefront/js/r-h-web-child-theme-template.js"
    ],
    "asset": [
        "@Storefront",
        "@ParentThemeNamespace",
        "app/storefront/src/assets"
    ],
    "configInheritance": [
        "@ParentThemeNamespace"
    ]
}

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.

pageIntegrate your own fonts

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.