Add SCSS Styling and JavaScript to a Theme
Overview
This guide explains how you can add your custom styling via SCSS and add your custom JavaScript to 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. 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.<plugin root>/src/Resources/theme.json
1
{
2
...
3
"style": [
4
"app/storefront/src/scss/overrides.scss",
5
"@Storefront",
6
"app/storefront/src/scss/base.scss"
7
],
8
...
9
}
Copied!
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.1
.
2
├── composer.json
3
└── src
4
├── Resources
5
│ ├── app
6
│ │ └── storefront
7
│ │ └── src
8
│ │ └── scss
9
│ │ └── base.scss <-- SCSS entry
10
└── SwagBasicExampleTheme.php
Copied!
To apply your styles and test them, please use some test code:
<plugin root>/src/Resources/app/storefront/src/scss/base.scss
1
body {
2
background-color: blue;
3
}
Copied!
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
JavaScript cannot be compiled by PHP, so webpack is being used for that. All Javascript in Shopware 6 is written in EcmaScript 6. Of course you can write your code in EcmaScript 5 as well.
By default your plugin is using Shopware's default webpack configuration, as you must ship your theme with the JavaScript already compiled.
Since Shopware knows where your style files are located, they are automatically compiled, compressed and loaded into the Storefront. In the case of JavaScript, you have your
main.js as entry point which has to be located the src/Resources/app/storefront/src/ directory:1
.
2
├── composer.json
3
└── src
4
├── Resources
5
│ ├── app
6
│ │ └── storefront
7
│ │ └── src
8
│ │ └── main.js <-- JS entry
9
└── SwagBasicExampleTheme.php
Copied!
Add some test code in order to see if it works out:
<plugin root>/src/Resources/app/storefront/src/js/main.js
1
console.log('SwagBasicExampleTheme JS loaded');
Copied!
In the end, by running the command
bin/console theme:compile your custom JS plugin is loaded. By default, the compiled JavaScript file is saved as <plugin root>/src/resources/app/storefront/dist/storefront/js/swag-basic-example-theme.js. It is detected by Shopware automatically and included in the Storefront. So you do not need to embed the JavaScript file yourself.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.Development template
Production template
1
./psh.phar storefront:hot-proxy
Copied!
1
./bin/watch-storefront.sh
Copied!
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.Next steps
Now that you know how to customize the styling via SCSS and add JavaScript, here is a list of things you can do.
Last modified 3mo ago
Copy link
Edit on GitHub