# Customizations

## Create a Child Theme

With a child theme ([What is a child-theme?](/en/faq/derivations/child-theme.md#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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://themedocs.zenit.design/en/tutorials/customizations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.