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

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

└──  (1)
    ├──  (2)
    └── src
        ├──  (3)
        └── Resources
            ├──  (4)
            ├── app
            │   └── storefront
            │       ├── dist
            │       │   ├── assets
            │       │   │   └── ...
            │       │   └── storefront
            │       │       └── 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.

Adjust the file name to the new name: zenitPlatformHorizonSet2.php → zenitPlatformHorizonSetBeispiel.php
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

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"
    ],
    "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

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.

Last updated 3 months ago