How to create a custom theme in Shopware 6?

Custom theme creation in shopware 6 is an easy process. First, you need ssh access and make sure file and folder permission and ownership set up correctly then you are good to go.

In shopware 6 plugins and themes both are shown under the plugin section in backend. To check all plugins or themes go to ‘settings’ and click on ‘system’ then click on ‘Plugins’

First, go to shopware root folder using the command line and follow steps to create a theme in Shopware 6.

Step 1: Run ‘php bin/console theme:create Bay20Theme’. Where ‘Bay20Theme’ is a theme name, make sure to add a prefix of your company then theme name whatever you like currently I am using ‘Theme’.

If command successfully run then it will return ‘Creating theme structure under /opt/bitnami/apps/shopware/htdocs/custom/plugins/Bay20Theme’ and you can ‘custom/plugins/Bay20Theme’ check folder

Step 2: Now check ‘composer.json’ under ‘custom/plugins/Bay20Theme’ folder and update name description and
label for different language value.

{
  "name": "bay20/theme",
  "description": "Bay20 Theme development",
  "type": "shopware-platform-plugin",
  "license": "MIT",
  "autoload": {
    "psr-4": {
      "Bay20Theme\\": "src/"
    }
  },
  "extra": {
    "shopware-plugin-class": "Bay20Theme\\Bay20Theme",
    "label": {
      "de-DE": "Theme Bay20Theme plugin",
      "en-GB": "Theme Bay20Theme plugin"
    }
  }
}

Step 3: Update name and author in ‘theme.json’

{
  "name": "Bay20Theme",
  "author": "Bay20",
  "views": [
     "@Storefront",
     "@Plugins",
     "@Bay20Theme"
  ],
  "style": [
    "@Storefront",
    "app/storefront/src/scss/base.scss"
  ],
  "script": [
    "@Storefront",
    "app/storefront/dist/storefront/js/bay20-theme.js"
  ],
  "asset": [
    "app/storefront/src/assets"
  ]
}

Step 4: Once everything is updated you can check your theme under ‘settings’ and plugins section.

Step 5: Now you can install and activate the theme from the backend. You can not activate a theme without installing.

Step 6: Go to shop section to assign the theme to the website by clicking on ‘change theme’

Note: Clear cache to see the changes on frontend.

For any support on shopware please mail us at manish@bay20.com or Whatsapp Us at +91-8800519180.