# Individual customizations by means of SCSS

In case you wish to customize the appearance of ThemeWare® using SCSS, useful tips for working with SCSS files are available in this article.

{% hint style="success" %}
**Tip**: Creating a ThemeWare® duplicate is not necessary for SCSS customizations.
{% endhint %}

## Introduction

In order to be able to deposit the corresponding SCSS customizations without problems you should use a separate extension for individual customizations.

* Check whether there already is a suitable extension in the [Shopware Community Store](https://store.shopware.com/en/extensions/?p=1\&o=12\&n=21\&c=2069\&shopwareVersion=6)
* Alternatively, you may use the manual method with our "ThemeWare® Customizing Plugin" or the "ThemeWare® Customizing App" (Cloud) (see section "Integrating SCSS code (for experienced users)").

## Viewing the source code

The basic structure (folders, SCSS files, etc.) is provided by the Shopware theme "[Shopware default theme](https://github.com/shopware/platform/tree/master/src/Storefront/Resources)" since ThemeWare® is technically an "extension" of it.

{% hint style="info" %}
**Note**: In the Shopware Cloud it is currently not possible to view files from extensions (plugins, apps or themes).
{% endhint %}

{% hint style="danger" %}
**Attention**: Do Never edit original files of Shopware or any extensions (plugins, apps or themes)!
{% endhint %}

Even though you are not allowed to edit the original ThemeWare® files, it sometimes is necessary to look something up in here. You will find the ThemeWare® SCSS files under the following paths in your Shopware folder (XYZ = Modern, Living, Clean, etc.):

#### ThemeWare® Pro Edition

```
custom/plugins/TcinnThemeWareXYZ/src/Resources/app/storefront/src/scss/
custom/plugins/TcinnThemeWareXYZ/src/Resources/app/storefront/src/scss/themeware/
```

#### ThemeWare® Cloud Edition

```
custom/apps/TcinnThemeWareXYZApp/Resources/app/storefront/src/scss
custom/apps/TcinnThemeWareXYZApp/Resources/app/storefront/src/scss/themeware
```

ThemeWare® derives only the necessary SCSS files as part of our **HC-Architecture®** and adds its own SCSS files for own features and functions (e.g. widgets).

In addition, you will find the source code of the Shopware default theme on [GitHub](https://github.com/shopware/platform/tree/master/src/Storefront/Resources). The folder "app/storefront/src/scss" contains all SCSS files which are relevant for the storefront.

## Integrating SCSS code (for experienced users)

Shopware 6 currently lacks a full-fledged child theme that allows you to include files and make changes (like Shopware 5). We have developed a small free "ThemeWare® Customizing Plugin" or a "ThemeWare® Customizing App" (Cloud) as a workaround for the integration of individual customizations and own files.

All information regarding the installation and the download links are available in the following articles:

{% content-ref url="individual-customizations-with-the-themeware-customizing-plugin" %}
[individual-customizations-with-the-themeware-customizing-plugin](https://knowledge.themeware.design/knowledge-base/tutorials/individual-customizations/individual-customizations-with-the-themeware-customizing-plugin)
{% endcontent-ref %}

{% content-ref url="individual-customizations-with-the-themeware-customizing-app" %}
[individual-customizations-with-the-themeware-customizing-app](https://knowledge.themeware.design/knowledge-base/tutorials/individual-customizations/individual-customizations-with-the-themeware-customizing-app)
{% endcontent-ref %}

## Helpful SCSS basics

Individual customizations have to be deposited in the file "**base.scss**". For better structuring, it is possible to access additional folders and files for numerous customizations. These can easily be integrated using @import.

```scss
@import 'your-file.scss';
```

{% hint style="info" %}
**Note**: Further information concerning the topic "SCSS" are available in the SASS documentation: <https://sass-lang.com>
{% endhint %}

### Example customization in the file "base.scss"

In the following example, the product name is modified on the product page.

```scss
// Example: Colour change of the article name on the article page

$my-variable: #FF0004;

.is-ctl-product {
  .product-detail-name {
    padding: 10px;
    color: $my-variable;
  }
}
```

***

## Additional ThemeWare® knowledge

### Finding ThemeWare® Variables

Using our [ThemeWare® Config-Finder](https://config.themeware.design/en) you have the possibility of displaying all ThemeWare® variables. The "technical name" in this overview is the name of the corresponding variable you can use in Twig or SCSS.

{% hint style="warning" %}
**Important**: The use of theme variables in plugins starting from Shopware 6.4.7.0 unfortunately is no longer possible.
{% endhint %}

### Delimitation of customizations

#### Customisation for a specific Sales Channel

If an SCSS customisation is only relevant for a specific Sales Channel, you have the option of restricting your customisation via our **ThemeWare® configuration** with the "**Body class**".

To do this, enter a unique name for this Sales Channel (e.g.: `myshopname`) in the configuration of the corresponding theme (or theme duplicate) for the corresponding Sales Channel under `Tab "Others" => Block "Expert settings" => Section "Individual CSS class" => Field "Body class"`.

This name can then be used for SCSS checks due to its position in the HTML body.

```scss
// Customisation for the Sales Channel with the class "myshopname"
.myshopname {
  h1 {
    // Customization...
  }
}
```

#### Customisation for a specific page (category)

If an SCSS customisation is only relevant for a specific page, you have the option of restricting your customisation via the **ThemeWare® custom field** "Body class".

To do this, enter a unique name for this Sales Channel (e.g.: `myshopname`) in the configuration of the corresponding theme (or theme duplicate) for the corresponding Sales Channel under `Tab "Others" => Block "Expert settings" => Section "Individual CSS class" => Field "Body class"`.

To do this, enter a unique name for this Sales Channel (e.g.: myshopname) in the custom field ‘**Body class**’ of the corresponding page (category) in the `Tab "General" => Block "Additional fields" => Tab "Categories (ThemeWare® ...)" => Custom field "Body class"` .

This name can then be used for SCSS checks due to its position in the HTML body.

```scss
// Customisation for the category with the class "myshopname"
.myshopname {
  h1 {
    // Customization...
  }
}
```

***

## Tips

### CSS hierarchy

You can easily adjust the CSS hierarchy when overwriting CSS/SCSS styles with the "Body class" in the ThemeWare® configuration. This allows you to avoid using `!important` statements.

You can find more information about this in the following tutorial:

{% content-ref url="css-hierarchy" %}
[css-hierarchy](https://knowledge.themeware.design/knowledge-base/tutorials/individual-customizations/css-hierarchy)
{% endcontent-ref %}