Add Custom Styling

Overview

Quite often your plugin will have to change a few templates for the Storefront. Those might require custom styling to look neat, which will be explained in this guide.

Prerequisites

You won't learn to create a plugin in this guide, head over to our Plugin base guide to create a plugin first, if you don't know how it is done yet. Also knowing and understanding SCSS will be quite mandatory to fully understand what is going on here.

Other than having those two requirements, nothing else is necessary for this guide.

Adding (S)CSS files

By default, Shopware 6 is looking for a base.scss file in your plugin. To be precise, this file has to be inside the directory <plugin root>/src/Resources/app/storefront/src/scss in order to be properly found and loaded by Shopware.

So just try it out, create a base.scss file in the directory mentioned above.

Inside of the .scss file, we add some basic styles to see if it's actually working. In this example, the background of the body will be changed.

// <plugin root>/src/Resources/app/storefront/src/scss/base.scss
body {
    background: blue;
}

Adding variables

In case you want to use the same color in several places, but want to define it just one time, you can use variables for this.

Create a abstract/variables.scss file inside your <plugin root>/src/Resources/app/storefront/src/scss directory and define your background color variable.

// <plugin root>/src/Resources/app/storefront/src/scss/abstract/variables.scss
// in variables.scss
$sw-storefront-assets-color-background: blue;

Inside your base.scss file you can now import your previously defined variables and use them:

// <plugin root>/src/Resources/app/storefront/src/scss/base.scss
@import 'abstract/variables.scss';

body {
    background: $sw-storefront-assets-color-background;
}

This comes with the advantage that when you want to change this color for all occurrences, you only have to change this variable once and the hard coded values are not cluttered all over the codebase.

INFO

Refer to the theme guide Override Bootstrap Variables in a Theme if you want to override some of the default Shopware variables.

Testing its functionality

Now you want to test if your custom styles actually apply to the Storefront. For this, you have to execute the compiling and building of the .scss files first. This is done by using the following command:

If you want to see all style changes made by you live, you can also use our Storefront hot-proxy for that case:

Using the hot-proxy command, you will have to access your store with the port 9998, e.g. domainToYourEnvironment.in:9998.

That's it! Open the Storefront and see it turning blue due to your custom styles!