Shopware 6

Get Setup Service

  1. Home
  2. Docs
  3. Shopware 6
  4. Child Theme

Child Theme

In this post I 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. So you can do your own programming and the main theme remains update compatible without exception. This article is primarily or exclusively intended for developers.

– PS: Child themes are not to be mistaken with Theme – Duplicates. A theme – duplicate does not create an independent folder structure and thus cannot be used as a basis by developers. Duplicates only control some internal inheritances of themes.

Child-Theme Template for Download

I have spared no expense and effort to bring you a free template for download. The template is effectively universal and has, for example, its own JS plugin and the font “Lato” integrated for illustration. This template or the child theme itself is an independent theme and must therefore be edited as such. You know! 😉

Download Child-Theme

Define inheritance

In the template you can see the configuration for the inheritance in the file src Resources theme.json . You surely 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 have to exchange this value with the value of the theme to be overwritten so that the inheritance takes effect.

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

Develop Child Theme

Before you start, you should take the following precautions! These are not necessary for you to be able to program. They are just some meta information for your CI.

  1. Change Namespaces
    There are a few issues here, for example 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 src Resources app storefront src . Make any necessary adjustments here.
  3. Replace preview and icon
    In the folder src Resources app you will find the preview image. And in the folder src Resources config you will find the app icon.
  4. Views anpassen
    In the folder src Resources views you will find an example of the base.html.twig.
  5. Customize fonts
    Das Child-Theme integriert die Font “Lato”, um dir ein Beispiel zu zeigen, wie du eigene Fonts implementierst. In the assets folder of the theme and in the respective .scss will be included.

Now you are ready to go! Your child theme is configured and the main theme remains update compatible. The child theme inherits new settings of the main theme automatically. How to program the theme you will learn in the official Shopware Documentation.

Leave a Reply

Your email address will not be published.

This site is registered on wpml.org as a development site.