Individual SCSS

Add and compile your own styles

As a basis, you should have read and internalized the corresponding article in the official Shopware documentation.

In this example, I will only go into the previously created configuration variable:

Extend configuration

Edit and compile SCSS

You can now use the configuration variable to design your child theme. In this example, I will give the header the background color of the configuration field:

// src/Resources/app/storefront/src/scss/base.scss

.header-main{
  background-color: $rhweb-custom-color-field;
}

To compile your child theme, you can either save the theme configuration from the Shopware backend or use the console command bin/console theme:compile.