# Child-Theme duplizieren

{% hint style="info" %}
**Dauer:** 5-10 Minuten\
**Schwierigkeitsgrad**: Einfach\
**Programmierkenntnisse**: Keine\
**Programme**: Editor oder Notepad
{% endhint %}

{% hint style="success" %}
Ab Theme Version 4.4.0 hast Du die Möglichkeit, Dir über unser kostenfreies Child-Theme-Generator Plugin ein personalisiertes Child-Theme zu generieren und anschließend die gewünschte Demo-Vorlage zu importieren.
{% endhint %}

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

### 1. Vorlage herunterladen

Lade die gewünschte Vorlage als Zip-Datei auf unserer [Webseite](/vorlagen.md) kostenlos herunter.

![](/files/qR3BYPIUjyLgM0pSYrnj)

Navigiere dazu in den Bereich **Demos (1)** und **filtere (2)** auf den Namen des Themes, welches Du gekauft hast. Über den **Vorlage Download (3)** Link kannst Du die Zip-Datei herunterladen.

Bitte beachte, dass die in den Demos gezeigten Bilder und Demodaten aus urheberrechtlichen Gründen nicht Bestandteil des Themes und der Vorlagen sind.

{% hint style="info" %}
Für dieses Beispiel verwenden wir Horizon Vorlage 2
{% endhint %}

### 2. Entpacke die Zip-Datei

Entpacke die Zip-Datei auf Deinem Computer. Du erhältst folgende Dateien:

<pre class="language-markup" data-title="Entpackte 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-1">theme.json</a> (4)
            ├── app
            │   └── storefront
            │       ├── dist
            │       │   ├── assets
            │       │   │   └── ...
            │       │   └── storefront
            │       │       └── js
            │       │           ├── <a data-footnote-ref href="#user-content-fn-2">zenit-platform-horizon-set2</a> (5)
            │       │           │   └── <a data-footnote-ref href="#user-content-fn-2">zenit-platform-horizon-set2.js</a> (5)
            │       │           └── <a data-footnote-ref href="#user-content-fn-2">zenit-platform-horizon-set2.js</a> (5)
            │       └── src
            │           └── scss
            │               ├── base.scss
            │               └── overrides.scss
            └── config
                └── ...
</code></pre>

### 3. Anpassungen vornehmen

Es sind kleine Namensänderungen an 5 stellen notwendig. Wir haben in der obigen Abbildung die einzelnen Dateien mit Nummern gekennzeichnet.&#x20;

#### Ordnername zenitPlatformHorizonSet2 (1)

Ändere den Ordnernamen in den gewünschten technischen Namen des neuen Themes. Am einfachsten ist es, wenn Du Set2 durch eine beliebige Zeichenfolge ersetzt. In unserem Beispiel wird aus `zenitPlatformHorizonSet2` => `zenitPlatformHorizonSetBeispiel`

#### Umschreibungen in der composer.json (2)

Öffne die Datei in einem Editor oder Notepad.&#x20;

* Zeile 1: `zenit/horizon-set-2` → `zenit/horizon-set-beispiel`
* Zeile 20: `zenit\\PlatformHorizonSet2\\zenitPlatformHorizonSet2` →`zenit\\PlatformHorizonSetBeispiel\\zenitPlatformHorizonSetBeispiel`
* Zeile 24-25: Gib Deinem Child-Theme einen Namen
* Zeile 28-29: Gib Deinem Child-Theme eine Beschreibung
* Zeile 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 %}

#### Umschreibungen der zenitPlatformHorizonSet2.php (3)

Abgesehen vom Dateinamen müssen auch in der Datei zwei Stellen angepasst werden.

1. Passe den Namen der Datei an den neuen Namen an:\
   `zenitPlatformHorizonSet2.php` → `zenitPlatformHorizonSetBeispiel.php`
2. Schreibe in der Datei die Namen um, öffne die Datei in einem Editor oder Notepad.&#x20;

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

   Zeile 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 %}

#### Umschreibungen in der theme.json (4)

Öffne die Datei in einem Editor oder Notepad.&#x20;

* Zeile 2: Gib Deinem Child-Theme einen beliebigen Namen
* Zeile 9: `@zenitPlatformHorizonSet2` → `@zenitPlatformHorizonSetBeispiel`
* Zeile 19: `app/storefront/dist/storefront/js/zenit-platform-horizon-set2.js` → `app/storefront/dist/storefront/js/zenit-platform-horizon-set-beispiel.js`
* Zeile 20 [<mark style="color:red;">(ab Version 4.0.0)</mark>](#user-content-fn-3)[^3]: `app/storefront/dist/storefront/js/zenit-platform-horizon-set2/zenit-platform-horizon-set2.js`

  &#x20;→ `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 %}

#### Anpassen des Dateinamens der zenit-platform-horizon-set2.js (5)

Zum Schluss muss nur noch der Dateiname der Javascript-Datei auf den im vorigen Schritt geänderten Namen aus der theme.json (Zeile 19) geändert werden.&#x20;

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

Solltest du eine Child-Theme Version 4.0.0 oder höher verwenden, muss zusätzlich auf dieser Ebene ein Ordner und darin eine weitere Javascript-Datei umbenannt werden.\
\
Ordner: `zenit-platform-horizon-set2` **→** `zenit-platform-horizon-set-beispiel`\
Javascript-Datei: `zenit-platform-horizon-set2.js` **→** `zenit-platform-horizon-set-beispiel.js`

### 4. Fertig

Zippe nun den Ordner wieder und lade die Datei manuell in Deinem Shop hoch. Du kannst das duplizierte Child-Theme nun wie gewohnt installieren.

[^1]: Anpassungen

[^2]: Namen anpassen

[^3]: Diese Zeile existiert erst ab Child-Theme Version 4.0.0 und wurde mit der Shopware Version 6.6 eingeführt.


---

# 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/tutorials/child-theme-duplizieren.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.