# Customizations

## Create a Child Theme

With a child theme ([What is a child-theme?](https://themedocs.zenit.design/en/faq/derivations/child-theme#was-ist-ein-child-theme)), individual customizations can be implemented in an update-safe manner.

You can fin free child theme presets on [our website](https://www.zenit.design/#demos).

{% hint style="success" %}
However, it's **easier** if you use our [free extension](https://store.shopware.com/en/zenit66399665516f/child-theme-generator-for-zenit-design-themes.html) to generate and customize the child theme.
{% endhint %}

Alternatively, a child theme can be created manually as described in the [Shopware documentation](ttps://developer.shopware.com/docs/guides/plugins/themes/?category=shopware-platform-dev-en).

### Installation

If you are using one of our child-themes, you can upload the child theme under *Extensions > My Extensions* via the **Upload extension** button and install and activate it like any extension.

### Theme assignment

The child theme must now be assigned to a sales channel.

## Customize

After the child theme is installed, you are ready to go. Navigate to the theme folder, there you should find the following structure. `{MyTheme}` stands here for the chosen theme name.

```bash
# move into your theme folder
$ cd custom/plugins/{MyTheme}

# structure of theme
├── composer.json
└── src
    ├── MyTheme.php
    └── Resources
        ├── app
        │   └── storefront
        │       ├── dist
        │       │   └── storefront
        │       │       └── js
        │       │           └── my-theme.js
        │       └── src
        │           ├── assets
        │           ├── main.js
        │           └── scss
        │               ├── base.scss
        │               └── overrides.scss
        ├── views
        │   └── storefront
        └── theme.json
```

Twig-Templates:\
&#x20;`{Root}/custom/plugin/{MyTheme}/src/Resources/views/storefront/`<br>

SCSS: \
`{Root}/custom/plugin/{MyTheme}/src/Resources/app/storefront/src/scss/`<br>

Javascript:\
`{Root}/custom/plugin/{MyTheme}/src/Resources/app/storefront/src/script/`

## Structure

Since **original files must never be edited** or overwritten, it is necessary to see into the structure of the files to be able to extend or overwrite them.

Our main themes are derivatives of the Shopware default theme. Therefore, you can find the basic structure in the [Shopware storefront](https://github.com/shopware/platform/tree/trunk/src/Storefront/Resources).

You can find the structure of our themes as a derivation of the Shopware Storefront under:

Twig-Templates: `{Root}/custom/plugin/zenitPlatform{Theme}/src/Resources/views/storefront/`<br>

SCSS: `{Root}/custom/plugin/zenitPlatform{Theme}/src/Resources/app/storefront/src/scss/`<br>

Javascript: `Root}/custom/plugin/zenitPlatform{Theme}/src/Resources/app/storefront/src/script/`

## Documentations

{% embed url="<https://developer.shopware.com/docs/guides/plugins/themes?category=shopware-platform-dev-en/theme-guide>" %}

For editing **styles** you should significantly stick to the Shopware docs:&#x20;

{% embed url="<https://developer.shopware.com/docs/guides/plugins/themes/add-css-js-to-theme>" %}

Everything needed to edit **Twig templates** can be found here:

{% embed url="<https://developer.shopware.com/docs/guides/plugins/plugins/storefront/customize-templates>" %}