Create a first theme
Overview
This guide will show you how to create a theme fom the scratch. You will also learn how to install and activate your theme.
Prerequisites
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.
Create your first plugin theme
Let's get started with creating your plugin by finding a proper name for it.
Name your plugin theme
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!
Create a plugin-based theme
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
1
bin/console theme:create SwagBasicExampleTheme
2
​
3
# you should get an output like this:
4
​
5
Creating theme structure under .../development/custom/plugins/SwagBasicExampleTheme
Copied!
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.
1
bin/console plugin:refresh
2
​
3
# you should get an output like this
4
​
5
[OK] Plugin list refreshed
6
​
7
Shopware Plugin Service
8
=======================
9
​
10
----------------------- ------------------------------------ ------------- ----------------- -------- ----------- -------- -------------
11
Plugin Label Version Upgrade version Author Installed Active Upgradeable
12
----------------------- ------------------------------------ ------------- ----------------- -------- ----------- -------- -------------
13
SwagBasicExampleTheme Theme SwagBasicExampleTheme plugin 9999999-dev No No No
14
----------------------- ------------------------------------ ------------- ----------------- -------- ----------- -------- -------------
15
​
16
1 plugins, 0 installed, 0 active , 0 upgradeable
Copied!
Now Shopware recognises your plugin theme. The next step is the installation and activation of your theme. Run the following command in terminal.
1
# run this command to install and activate your plugin
2
bin/console plugin:install --activate SwagBasicExampleTheme
3
​
4
Shopware Plugin Lifecycle Service
5
=================================
6
​
7
Install 1 plugin(s):
8
* Theme SwagBasicExampleTheme plugin (vdev-trunk)
9
​
10
Plugin "SwagBasicExampleTheme" has been installed and activated successfully.
11
​
12
[OK] Installed 1 plugin(s).
Copied!
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 instructions.1
# run this to change the current storefront theme
2
$ bin/console theme:change
3
​
4
# you will get an interactive prompt to change the
5
# current theme of the storefront like this
6
​
7
Please select a sales channel:
8
[0] Storefront | 64bbbe810d824c339a6c191779b2c205
9
[1] Headless | 98432def39fc4624b33213a56b8c944d
10
> 0
11
​
12
Please select a theme:
13
[0] Storefront
14
[1] SwagBasicExampleTheme
15
> 1
16
​
17
Set "SwagBasicExampleTheme" as new theme for sales channel "Storefront"
18
Compiling theme 13e0a4a46af547479b1347617926995b for sales channel SwagBasicExampleTheme
Copied!
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.
Directory structure of a theme
1
# structure of a plugin-based theme
2
├── composer.json
3
└── src
4
├── Resources
5
│ ├── app
6
│ │ └── storefront
7
│ │ ├── dist
8
│ │ │ └── storefront
9
│ │ │ └── js
10
│ │ │ └── swag-basic-example-theme.js
11
│ │ └── src
12
│ │ ├── assets
13
│ │ ├── main.js
14
│ │ └── scss
15
│ │ ├── base.scss
16
│ │ └── overrides.scss
17
│ └── theme.json
18
└── SwagBasicExampleTheme.php
Copied!
Next steps
Now that you have created your own theme, the next step is to learn how to make settings and adjustments.
Last modified 18d ago