How To Create A Custom Theme In Shopware 6?

Introduction

• Shopware 6 themes allow you to customize the visual appearance of the storefront by modifying SCSS/CSS and adjusting Twig templates. You can also incorporate JavaScript into your theme to alter the storefront’s behavior in the browser.
• Shopware includes a default theme to simplify the process. This default theme is built on top of Bootstrap 5 (Shopware 6.6), enabling you to leverage all Bootstrap functionalities in the Shopware storefront, making it easier to develop and manage Shopware 6 themes.

Create Your First Theme

How to Name Your Theme

• First, you need to choose a name for your theme. This should be a technical name that succinctly describes the theme’s appearance, written in UpperCamelCase. To avoid conflicts with duplicated theme names, it’s advisable to add a shorthand prefix for your company. For example, Shopware uses “Swag” as a prefix. In this guide, we’ll use the theme name “SwagExampleTheme.”

STEP:1 

• Open your terminal and run the following command to create a new theme

bin/console theme:create SwagExampleTheme

• After your theme was created successfully Shopware has to know that it now exists. You have to refresh the plugin list by running the following command.

bin/console plugin:refresh

STEP:2

• Run command to install and activate your Theme

bin/console plugin:install –activate SwagExampleTheme

STEP:3

Assigning the Theme to a Sales Channel

• The final step is to assign your theme to a sales channel. You can accomplish this by running the `theme:change` command in the terminal and following the instructions provided.
• To change the current storefront theme, execute the following command:

bin/console theme:change

• This will prompt an interactive dialogue to guide you through changing the storefront’s current theme.

Please select a sales channel:

[0] Storefront | 64bbbe810d824c339a6c191779b2c205

[1] Headless | 98432def39fc4624b33213a56b8c944d

> 0

Please select a theme:

[0] Storefront

[1] SwagExampleTheme

> 1

• Set “SwagExampleTheme” as a new theme for sales channel “Storefront” Compiling theme 13e0a4a46af547479b1347617926995b for sales channel SwagExampleTheme

The directory structure of a theme

# Structure of a plugin-based theme

├── composer.json

└── src

    ├── Resources

    │   ├── app

    │   │   └── storefront

    │   │       ├── dist

    │   │       │   └── storefront

    │   │       │       └── js

    │   │       │           └── swag-example-theme.js

    │   │       └── src

    │   │           ├── assets

    │   │           ├── main.js

    │   │           └── scss

    │   │               ├── base.scss

    │   │               └── overrides.scss

    │   └── theme.json

    └── SwagExampleTheme.php

• Theme Configuration

• • The theme configuration is located in the theme.json file within the <plugin root>/src/Resources folder. Open this file using your preferred code editor. The configuration will look like this:

{

  “name”: “SwagExampleTheme”,

  “author”: “Shopware AG”,

  “views”: [

     “@Storefront”,

     “@Plugins”,

     “@SwagExampleTheme”

  ],

  “style”: [

    “app/storefront/src/scss/overrides.scss”,

    “@Storefront”,

    “app/storefront/src/scss/base.scss”

  ],

  “script”: [

    “@Storefront”,

    “app/storefront/dist/storefront/js/swag-example-theme.js”

  ],

  “asset”: [

    “@Storefront”,

    “app/storefront/src/assets”

  ],

  “configInheritance”: [

    “@Storefront”,

    “@OtherTheme”

    ]

Note:- If you make changes or additions to the theme.json file, you need to execute the theme:refresh command to apply them. Run the following command to update your theme:

bin/console theme:refresh

If creating a custom theme for Shopware 6 seem challenging,consider working with a reliable Shopware development company. At iCreative Technologies, our developers have the expertise to create themes that meet the specific requirements of your business and industry.