CODEWITHSUNDEEP
themesshopware6
exe
exe

Reputation: 559

Shopware 6 Theme inheritance limitations

To get a new shop faster ready we bought a theme in the shopware store. But we want to modify a few things.

My first idea was to write a theme that inherits from the paid theme, following the docs: https://developer.shopware.com/docs/v/6.4/guides/plugins/themes/add-theme-inheritance

Thats working fine but comes with a very annoying limitation. There is no way to "duplicate" the theme in the admin backend, like you can do with the default theme or the paid theme to create sales channel specific variants to setup different logos, colors and other settings.

I also tested to create a theme that inherits my child theme but that does not work. All settings from the paid theme are gone.

I think the only workaround is, to create an regular plugin to extend the theme views and (s)css. Are there any problems I might run into using this workaround? Or is there a better way for multi sales channels and a theme to modify a paid theme?

Upvotes: 0

Views: 198

Answers (1)

Kathi
Kathi

Reputation: 1

I faced exactly the same situation in one of my projects. I discussed it with my team and at the end we decided against the plugin solution because we want our client (administration user) to have ideally only one place to configure the appearance of the sales channels. We wanted to avoid forcing our client to configure some appearance in the theme and some in plugins as this might lead to confusion.
Another drawback of the plugin approach is, that plugins are usually loaded before the theme which makes it hard to overwrite/extend twig templates of a theme by a plugin.

So, what I ended up doing is: I copied the whole config property from the purchased theme's theme.json into my custom theme and removed the purchased theme from my configInheritance property, so my theme.json looks like:

{
  "name": "My Theme",
  "author": "Me",
  "views": [
    "@Storefront",
    "@Plugins",
    "@PurchasedTheme",
    "@MyTheme"
  ],
  "style": [
    "app/storefront/src/scss/overrides.scss",
    "@Storefront",
    "@PurchasedTheme",
    "app/storefront/src/scss/base.scss"
  ],
  "script": [
    "@Storefront",
    "@PurchasedTheme",
    "app/storefront/dist/storefront/js/my-theme.js"
  ],
  "asset": [
    "@Storefront",
    "@PurchasedTheme",
    "app/storefront/src/assets"
  ],
  "configInheritance": [
    "@Storefront"
  ],
  "config": {
    "tabs": {
      // all the tabs from the purchased theme
    },
    "blocks": {
      // all the blocks from the purchased theme
    },
    "sections": {
      // all the sections from the purchased theme
    },
    "fields": {
      // all the fields from the purchased theme
      "my-custom-field": {
        "type": "color",
        "editable": true,
        // ...
      }
    }
  }
}

As you can see I also added my customizations to the config property and this is the huge drawback of this technique, so when you update the purchased theme and the vendor made changes to their theme.json, you need to reflect those changes in your theme.json as well.
But however, with this approach an Shopware Admin user has the possibility to create duplicates.

When you adjust an existing theme which is already in use, don't forget to run

  • bin/console theme:refresh
  • bin/console theme:compile
  • bin/console cache:clear

and you might want to manually set the parent_theme_id to NULL in the theme table and additionally copy config_values from the paid theme to your custom theme.

Upvotes: 0

Related Questions