Duplicate Child-Theme

If you want to use one child theme for multiple sales channels, you can duplicate and rename the child theme. Below we will show you how this works.

Duration: 5-10 minutes Difficulty level: Easy Programming knowledge: No Programs: Code editor or Notepad

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.

Child theme generator for Zenit Design themesShopware Store

1. Download configuration set

Download the desired template as a zip file on our webseite for free.

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.

For this example we will use Horizon Demo 2

2. Unzip the zip file

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

Unzipped zip zenitPlatformHorizonSet2

└── zenitPlatformHorizonSet2 (1)
    ├── composer.json (2)
    └── src
        ├── zenitPlatformHorizonSet2.php (3)
        └── Resources
            ├── theme.json (4)
            ├── app
            │   └── storefront
            │       ├── dist
            │       │   ├── assets
            │       │   │   └── ...
            │       │   └── storefront
            │       │       └── js
            │       │           ├── zenit-platform-horizon-set2 (5)
            │       │           │   └── zenit-platform-horizon-set2.js (5)
            │       │           └── zenit-platform-horizon-set2.js (5)
            │       └── src
            │           └── scss
            │               ├── base.scss
            │               └── overrides.scss
            └── config
                └── ...

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\\

composer.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/"
        }
    }
}

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.

   Line 3: zenit\PlatformHorizonSet2 → zenit\PlatformHorizonSetBeispiel

   Line 8: zenitPlatformHorizonSet2 → zenitPlatformHorizonSetBeispiel

zenitPlatformHorizonSetBeispiel.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';
    }
}

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 (from version 4.0.0): 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

theme.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": {
        ...
    }

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.