Reading list Switch to dark mode

    Add Custom SCSS in Shopware6

    Updated 3 December 2021


    In this article, we learn about how to add custom SCSS in Shopware6. So let’s start.

    Adding SCSS file

    First of all, we need to create a custom SCSS file in the Shopware6 plugin directory. Create a base.scss file in the directory mentioned below.

    <plugin root>/src/Resources/app/storefront/src/scss

    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.

    body {
        font-family: "Inter",sans-serif;

    Adding Variables

    If we want to use the same font-family in several places, but want to define it just one time, you can use variables for this.

    Start your headless eCommerce
    Find out More

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

    // in variables.scss
    $storefront-font-family: Inter",sans-serif;

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

    @import 'abstract/variables.scss';
    body {
        font-family: $storefront-font-family;

    The main advantage of variables.scss is when you want to change this font family for all elements, you only have to change this variable once.

    Now we can test whether your custom styles actually work on a storefront or not. For this, you have to execute the compiling and building of the .scss files first. This is done by using the following command:

    ./psh.phar storefront:build

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

    ./psh.phar storefront:hot-proxy

    Multi-Seller Marketplace Plugin

    Thanks for reading this blog, I hope it will help you. Happy coding 🙂

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home