Theme inheritance configuration

Installation Extensions API Reference Feedback 📣
Search…
The configInheritance is available from Shopware Version 6.4.8.0
Overview
This guide explains how you can use a theme as a basic corporate design theme and create inherited themes for special purposes like holiday time or a sales week.
Imagine you have a theme that is applying your corporate design to the storefront. With your colors, your logo and other configuration fields. But on a special week in the year, you have additional requirements for a special design, like a discount counter or an advent calendar.
Setup
Create two themes
Create the two themes like described in Theme inheritance.
Configure your themes
Add some configuration fields you need in your basic theme inside the theme.json of the SwagBasicExampleTheme
<plugin root>/src/Resources/theme.json
1
{
2
  "name": "SwagBasicExampleTheme",
3
  .....
4
  "config": {
5
    "blocks": {
6
      "colors": {
7
        "themeColors": {
8
          "en-GB": "Theme colours",
9
          "de-DE": "Theme Farben"
10
        }
11
      }
12
    },
13
    "sections": {
14
      "importantColors": {
15
        "label": {
16
          "en-GB": "Important colors",
17
          "de-DE": "Wichtige Farben"
18
        }
19
      }
20
    },
21
    "tabs": {
22
      "colors": {
23
          "label": {
24
              "en-GB": "Colours",
25
              "de-DE": "Farben"
26
          }
27
      } 
28
    },
29
    "fields": {
30
      "sw-color-brand-primary": {
31
        "label": {
32
          "en-GB": "Primary colour",
33
          "de-DE": "Primär"
34
        },
35
        "type": "color",
36
        "value": "#399",
37
        "editable": true,
38
        "tab": "colors",
39
        "block": "themeColors",
40
        "section": "importantColors"
41
      },
42
      "sw-brand-icon": {
43
        "label": {
44
            "en-GB": "Brand icon", 
45
            "de-DE": "Markenlogo"
46
        },
47
        "type": "url",
48
        "value": "/our-logo.png",
49
        "editable": true
50
      }
51
    }
52
  }
53
}
Copied!
Extending an existing theme configuration with a new theme
Add configurations to your extended theme
<plugin root>/src/Resources/theme.json
1
{
2
  "name": "SwagBasicExampleThemeExtend",
3
  .....
4
  "configInheritance": {
5
    "@Storefront",
6
    "@SwagBasicExampleTheme"
7
  },
8
  "config": {
9
    "fields": {
10
      "sw-brand-icon": {
11
        "type": "url",
12
        "value": "/our-logo-holidays.png",
13
        "editable": true
14
      },
15
      "sw-advent-calendar-background-color": {
16
        "label": {
17
          "en-GB": "Advent calendar background color",
18
          "de-DE": "Adventskalender Hintergrundfarbe"
19
        },
20
        "type": "color",
21
        "value": "#399",
22
        "editable": true
23
      }
24
    }
25
  }
26
}
Copied!
In this theme (SwagBasicExampleThemeExtend) all the configuration fields from the themes Storefront and SwagBasicExampleTheme will be used as inherited values. They will be shown in the administration with an inherit anchor and will use the value of the parent themes as long as they are not set to a different value. In the theme.json the sw-brand-icon field value will be overwritten with a different default value. So this field will not be inherited regardless that it is already defined in the SwagBasicExampleTheme. This theme also adds a new field for the background color of the advent calendar (sw-advent-calendar-background-color) because this is only needed in this special theme which will only be used for 4-6 weeks a year.
Next steps
Now that you know how the theme inheritance works you can start with own customizations. Here is a list of other related topics where assets can be used.
​Add SCSS Styling and JavaScript to a theme​
​Customize templates​
Theme with Bootstrap styling
Apps
Last modified 5d ago
Copy link
Edit on GitHub
Contents
Overview
Setup
Create two themes
Configure your themes
Extending an existing theme configuration with a new theme
Next steps