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. You also need to have an installed and activated theme which is assigned to a sales channel. Checkout the Create a first theme guide if you have not yet a working theme setup.
Adding custom SCSS
When it comes to CSS and SCSS, they are processed by a PHP SASS compiler.
The main entry point to deploy your SCSS code is defined in the
theme.json file. By default it is the
<plugin root>/app/storefront/src/scss/base.scss file.
When the storefront gets compiled the PHP SASS compiler will look up the files declared in the
style section of the theme configuration. You can define the SCSS entry-points individually if you want to.
In order to add some custom SCSS in your theme, you just need to edit the
base.scss file which in located in
<plugin root>/src/Resources/app/storefront/src/scss directory.
. ├── composer.json └── src ├── Resources │ ├── app │ │ └── storefront │ │ └── src │ │ └── scss │ │ └── base.scss <-- SCSS entry └── SwagBasicExampleTheme.php
To apply your styles and test them, please use some test code:
Afterwards, you need to compile your theme by running the
bin/console theme:compile command in terminal.
After your theme was compiled successfully, go and check your changes by opening the Storefront in your browser.
Adding custom JS
main.js as entry point which has to be located the
. ├── composer.json └── src ├── Resources │ ├── app │ │ └── storefront │ │ └── src │ │ └── js │ │ └── main.js <-- JS entry └── SwagBasicExampleTheme.php
Add some test code in order to see if it works out:
// <plugin root>/src/Resources/app/storefront/src/js/main.js"
In the end, by running the command
Using the hot-proxy (live reload)
Of course, the theme compilation with
bin/console theme:compile will get tedious if you change files a lot and want to check the changes in the browser. So there is a better way while you are developing your theme with the
hot-proxy option, which will give you the live reload feature.
To activate the hot-proxy, run the following command
./psh.phar storefront:hot-proxy in your terminal.
This command starts a NodeJS web server on port
9998. If you open the Storefront of your Shopware installation on
localhost:9998, this page will be automatically updated when you make changes to your theme.