# Duplicate Child-Theme

{% hint style="info" %}
**Duration:** 5-10 minutes\
**Difficulty level:** Easy\
**Programming knowledge**: No\
**Programs**: Code editor or Notepad
{% endhint %}

{% hint style="success" %}
Since theme version 4.4.0, you have the option to generate a personalized child theme using our free child theme generator plugin and then import the desired demo template.
{% endhint %}

{% embed url="<https://store.shopware.com/en/zenit66399665516f/child-theme-generator-for-zenit-design-themes.html>" %}

### 1. Download configuration set

Download the desired template as a zip file on our [webseite](https://themedocs.zenit.design/en/configuration-sets) for free.

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FolfLVjm3SfjtmIHHbwUa%2Fdocs-en-download-child-theme.png?alt=media\&token=88ac3625-6d33-4b2e-8a91-44db3412c9fd)

Navigate to **demos (1)** and **filter (2)** on the name of the theme you purchased. Via the **Download Set (3)** link you can download the installable zip file of the child-theme.

Please note that the images and demo data shown in the demos are not part of the theme and templates.

{% hint style="info" %}
For this example we will use Horizon Demo 2
{% endhint %}

### 2. Unzip the zip file

Unzip the zip file on your computer. You will receive the following files:

<pre class="language-markup" data-title="Unzipped zip zenitPlatformHorizonSet2"><code class="lang-markup">└── <a data-footnote-ref href="#user-content-fn-1">zenitPlatformHorizonSet2</a> (1)
    ├── <a data-footnote-ref href="#user-content-fn-1">composer.json</a> (2)
    └── src
        ├── <a data-footnote-ref href="#user-content-fn-1">zenitPlatformHorizonSet2.php</a> (3)
        └── Resources
            ├── <a data-footnote-ref href="#user-content-fn-2">theme.json</a> (4)
            ├── app
            │   └── storefront
            │       ├── dist
            │       │   ├── assets
            │       │   │   └── ...
            │       │   └── storefront
            │       │       └── js
            │       │           ├── <a data-footnote-ref href="#user-content-fn-3">zenit-platform-horizon-set2</a> (5)
            │       │           │   └── <a data-footnote-ref href="#user-content-fn-3">zenit-platform-horizon-set2.js</a> (5)
            │       │           └── <a data-footnote-ref href="#user-content-fn-3">zenit-platform-horizon-set2.js</a> (5)
            │       └── src
            │           └── scss
            │               ├── base.scss
            │               └── overrides.scss
            └── config
                └── ...
</code></pre>

### 3. Make adjustments

Small name changes are necessary in 5 places. We have labeled the individual files with numbers in the image above.

#### Folder name zenitPlatformHorizonSet2 (1)

Change the folder name to the desired technical name of the new theme. The easiest way is to replace Set2 with any string. In our example, from `zenitPlatformHorizonSet2` => `zenitPlatformHorizonSetBeispiel`

#### Rewrites in composer.json (2)

Open the file in a code editor or Notepad.

* Line 1: `zenit/horizon-set-2` → `zenit/horizon-set-beispiel`
* Line 20: `zenit\\PlatformHorizonSet2\\zenitPlatformHorizonSet2` →`zenit\\PlatformHorizonSetBeispiel\\zenitPlatformHorizonSetBeispiel`
* Line 24-25: Give your child theme a name
* Line 28-29: Give your child theme a description
* Line 42: `zenit\\PlatformHorizonSet2\\`→ `zenit\\PlatformHorizonSetBeispiel\\`

{% code title="composer.json" lineNumbers="true" %}

```json
{
    "name": "zenit/horizon-set-2",
    "description": "Theme Horizon by Zenit Design",
    "version": "3.6.5",
    "type": "shopware-platform-plugin",
    "license": "proprietary",
    "authors": [
        {
            "name": "Zenit Design",
            "homepage": "https://zenit.design",
            "role": "Manufacturer"
        }
    ],
    "require": {
        "shopware/core": "^6.5",
        "shopware/storefront": "^6.5",
        "zenit/horizon": ">=3.0.0"
    },
    "extra": {
        "shopware-plugin-class": "zenit\\PlatformHorizonSet2\\zenitPlatformHorizonSet2",
        "plugin-icon": "src/Resources/config/plugin.png",
        "copyright": "(c) by Zenit Design",
        "label": {
            "de-DE": "Theme HORIZON | Pro - Set 2",
            "en-GB": "Theme HORIZON | Pro - Set 2"
        },
        "description": {
            "de-DE": "Theme HORIZON | Pro - Set 2",
            "en-GB": "Theme HORIZON | Pro - Set 2"
        },
        "manufacturerLink": {
            "de-DE": "https://store.shopware.com/zenit-design.html",
            "en-GB": "https://store.shopware.com/en/zenit-design.html"
        },
        "supportLink": {
            "de-DE": "https://help.zenit.design",
            "en-GB": "https://help.zenit.design"
        }
    },
    "autoload": {
        "psr-4": {
            "zenit\\PlatformHorizonSet2\\": "src/"
        }
    }
}
```

{% endcode %}

#### Changes in the zenitPlatformHorizonSet2.php (3)

Apart from the file name, two places in the file also need to be adjusted.

1. Adjust the file name to the new name:\
   `zenitPlatformHorizonSet2.php` → `zenitPlatformHorizonSetBeispiel.php`
2. Rewrite the names in the file, open the file in an editor or Notepad.&#x20;

   Line 3: `zenit\PlatformHorizonSet2` → `zenit\PlatformHorizonSetBeispiel`

   Line 8: `zenitPlatformHorizonSet2` → `zenitPlatformHorizonSetBeispiel`<br>

{% code title="zenitPlatformHorizonSetBeispiel.php" lineNumbers="true" %}

```php
<?php declare(strict_types=1);

namespace zenit\PlatformHorizonSet2;

use Shopware\Storefront\Framework\ThemeInterface;
use Shopware\Core\Framework\Plugin;

class zenitPlatformHorizonSet2 extends Plugin implements ThemeInterface
{
    public function getThemeConfigPath(): string
    {
        return 'theme.json';
    }
}
```

{% endcode %}

#### Changes in the theme.json (4)

Open the file in a code editor or Notepad.

* Line 2: Give your child theme any name you want
* Line 9: `@zenitPlatformHorizonSet2` → `@zenitPlatformHorizonSetBeispiel`
* Line 19: `app/storefront/dist/storefront/js/zenit-platform-horizon-set2.js` → `app/storefront/dist/storefront/js/zenit-platform-horizon-set-beispiel.js`
* Line 20 <mark style="color:red;">(from version 4.0.0)</mark>: `app/storefront/dist/storefront/js/zenit-platform-horizon-set2/zenit-platform-horizon-set2.js`

  → `app/storefront/dist/storefront/js/zenit-platform-horizon-set-beispiel/zenit-platform-horizon-set-beispiel.js`

{% code title="theme.json" lineNumbers="true" %}

```json
{
    "name": "Theme HORIZON | Pro - Set 2",
    "author": "Zenit Design",
    "previewMedia": "config/horizon-set-2-preview.png",
    "views": [
        "@Storefront",
        "@zenitPlatformHorizon",
        "@Plugins",
        "@zenitPlatformHorizonSet2"
    ],
    "style": [
        "app/storefront/src/scss/overrides.scss",
        "@zenitPlatformHorizon",
        "app/storefront/src/scss/base.scss"
    ],
    "script": [
        "@Storefront",
        "@zenitPlatformHorizon",
        "app/storefront/dist/storefront/js/zenit-platform-horizon-set2.js"
        "app/storefront/dist/storefront/js/zenit-platform-horizon-set2/zenit-platform-horizon-set2.js"
    ],
    "asset": [
        "@Storefront",
        "@zenitPlatformHorizon",
        "app/storefront/dist/assets"
    ],
    "configInheritance": [
        "@Storefront",
        "@zenitPlatformHorizon"
    ],
    "config": {
        ...
    }
```

{% endcode %}

#### Rename the file zenit-platform-horizon-set2.js (5)

Finally, all you have to do is change the file name of the Javascript file to the name from theme.json (line 19) that was changed in the previous step.

`zenit-platform-horizon-set2.js` **→** `zenit-platform-horizon-set-beispiel.js`

If you are using a Child Theme version 4.0.0 or higher, an additional folder and another JavaScript file need to be renamed at this location.

Folder: `zenit-platform-horizon-set2` **→** `zenit-platform-horizon-set-beispiel`\
Javascript file: `zenit-platform-horizon-set2.js` **→** `zenit-platform-horizon-set-beispiel.js`

### 4. Ready

Now zip the folder again and upload the file manually to your shop. You can now install the duplicate child theme as usual.

[^1]: adjustments

[^2]: Anpassungen

[^3]: rename