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 refreshed
Shopware 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 plugin
bin/console plugin:install --activate SwagBasicExampleTheme
Shopware 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 instructions.# 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 this
Please select a sales channel:
[0] Storefront | 64bbbe810d824c339a6c191779b2c205
[1] Headless | 98432def39fc4624b33213a56b8c944d
> 0
Please select a theme:
[0] Storefront
[1] SwagBasicExampleTheme
> 1
Set "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.
Last modified 5mo ago