Create a first theme
This guide will show you how to create a theme fom the scratch. You will also learn how to install and activate your theme.
All you need for this guide is a running Shopware 6 instance and full access to both the files, as well as the command line.
Let's get started with creating your plugin by finding a proper name for it.
First, you need to find a name for your theme. We're talking about a technical name here, so it needs to describe your theme appearance as short as possible, written in UpperCamelCase. To prevent issues with duplicated theme names, you should add a shorthand prefix for your company. Shopware uses "Swag" as a prefix for that case. For this example guide we'll use the theme name SwagBasicExampleTheme.
Notice: The name of a theme must begin with a capital letter too!
Now that you've found your name, it's time to actually create your plugin.
Open your terminal and run the following command to create a new theme
bin/console theme:create SwagBasicExampleTheme# you should get an output like this:Creating theme structure under .../development/custom/plugins/SwagBasicExampleTheme
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# you should get an output like this[OK] Plugin list refreshedShopware Plugin Service=======================----------------------- ------------------------------------ ------------- ----------------- -------- ----------- -------- -------------Plugin Label Version Upgrade version Author Installed Active Upgradeable----------------------- ------------------------------------ ------------- ----------------- -------- ----------- -------- -------------SwagBasicExampleTheme Theme SwagBasicExampleTheme plugin 9999999-dev No No No----------------------- ------------------------------------ ------------- ----------------- -------- ----------- -------- -------------1 plugins, 0 installed, 0 active , 0 upgradeable
Now Shopware recognises your plugin theme. The next step is the installation and activation of your theme. Run the following command in terminal.
# run this command to install and activate your pluginbin/console plugin:install --activate SwagBasicExampleThemeShopware Plugin Lifecycle Service=================================Install 1 plugin(s):* Theme SwagBasicExampleTheme plugin (vdev-trunk)Plugin "SwagBasicExampleTheme" has been installed and activated successfully.[OK] Installed 1 plugin(s).
Your theme was successfully installed and activated.
The last thing we need to do to work with the theme is to assign it to a sales channel. You can do that by running the theme:change command in the terminal and follow the instuctions.
# run this to change the current storefront theme$ bin/console theme:change# you will get an interactive prompt to change the# current theme of the storefront like thisPlease select a sales channel:[0] Storefront | 64bbbe810d824c339a6c191779b2c205[1] Headless | 98432def39fc4624b33213a56b8c944d> 0Please select a theme:[0] Storefront[1] SwagBasicExampleTheme> 1Set "SwagBasicExampleTheme" as new theme for sales channel "Storefront"Compiling theme 13e0a4a46af547479b1347617926995b for sales channel SwagBasicExampleTheme
At first, we have to select a sales channel. The obvious choice here is the 'Storefront'. Afterwards enter the number for our theme.
Now your theme is fully installed, and you can start your customization.
# structure of a plugin-based theme├── composer.json└── src├── Resources│ ├── app│ │ └── storefront│ │ ├── dist│ │ │ └── storefront│ │ │ └── js│ │ │ └── swag-basic-example-theme.js│ │ └── src│ │ ├── assets│ │ ├── main.js│ │ └── scss│ │ ├── base.scss│ │ └── overrides.scss│ └── theme.json└── SwagBasicExampleTheme.php
Now that you have created your own theme, the next step is to learn how to make settings and adjustments.
