---
title: Override SCSS Variables | Shopware Community Hub
description: >-
  Learn how to override and customize SCSS variables in Shopware to ensure
  consistent styling across your Storefront.
canonical_url: 'https://hub.shopware.com/learn/unit/override-scss-variables'
---

# Override SCSS Variables

<LearningObjectives>

- Understand how SCSS variable overrides work in Shopware.
- Customize existing SCSS variables.
- Learn how to ensure consistent styling across different components.

</LearningObjectives>

# Override SCSS Variables

This learning unit you will learn how to override SCSS variables in Shopware. SCSS variables are a powerful tool to customize your application in a global scope. They allow you to define a value once and use it in multiple places. This makes it easy to change the appearance of your application by changing just one value.

[Default values](https://sass-lang.com/documentation/variables/#default-values) are defined in the `variables.scss` file. You can override these values in your theme by defining them in the `overrides.scss` file.

## Overriding SCSS Variables

We already added the override file to our theme in the previous unit.

``` json
{
  "name": "AcademyTheme",
  "author": "Shopware AG",
  "description": {
    "en-GB": "My custom theme",
  },
  "views": [
     "@Storefront",
     "@Plugins",
     "@AcademyTheme"
  ],
  "previewMedia": "app/storefront/dist/assets/defaultThemePreview.jpg",
  "style": [
    "app/storefront/src/scss/overrides.scss", // This is the override file
    "@Storefront",
    "app/storefront/src/scss/base.scss"
  ],
  "script": [
    "@Storefront",
    "app/storefront/dist/storefront/js/swag-basic-example-theme.js"
  ],
  "asset": [
    "@Storefront",
    "app/storefront/src/assets"
  ],
  "configInheritance": [
    "@Storefront",
    "@OtherTheme"
    ]
}
```

It is important to set the override file as the first file in the `style` array. This way you can be sure that your overrides are applied correctly.

## Real-World Example

Your designer has created a new button style for your shop. The button should have a border-radius of `5px` to fit with the rest of the design. You can easily change this by adding the following line to your `overrides.scss` file:

```scss
$btn-border-radius: 5px;
```

![Button with border-radius](assets/borderRadius.jpg)

This works great for almost all buttons, but a few are missing. Let's fix those as well.

If we inspect the button in the browser, we can follow the Bootstrap hierarchy to find the correct variable to override. The button has a class `btn btn-primary` and the border-radius is defined in the `btn.scss` file.

![Button with border-radius](assets/borderRadiusFix.jpg)

So we add the following lines to our `overrides.scss` file:

```scss
$btn-border-radius-lg: 5px;
```

The x button needs to be adjusted as well, it uses the `sm` for small:

```scss
$btn-border-radius-sm: 5px;
```

The image border-radius is defined in the `image.scss` file. We can override it by adding the following line to our `overrides.scss` file:

```scss
$border-radius: 5px;
```

Last but not least is the search field, which is a little more complex since it is overridden specifically in the `search.scss` file. We can override it by adding the following line to our `base.scss` file or our own search.scss file.

```scss
.input-group > *:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-radius: 0 5px 5px 0;
}
```

![Search field with border-radius](assets/fixedAllBorderRadius.jpg)

<Callout title="Check all views" type="warning">

Be sure to check all common views for the changes you made. This way you can be sure that your changes are applied correctly and don't affect other parts of your shop.

E2E tests with image diffing can help you to check all views automatically.

</Callout>

## Summary

In this learning unit, you learned how to:

- Use the **`overrides.scss`** file to override existing Shopware SCSS variables.
- Ensure that overrides are applied by loading them first in the **`style`** array in your theme.json file.
- Adjust common variables like button or border-radius values to match your custom design.
- Apply targeted SCSS rules when no common variable exists (e.g., for the search field).

With this knowledge you can now confidently customize the visual design of your shop while keeping your styles consistent and maintainable across all components.