# 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="/pages/Nn8WPyYL22d3tUAbX4pL" %} [Individual customizations with the ThemeWare® Customizing Plugin](/knowledge-base/tutorials/individual-customizations/individual-customizations-with-the-themeware-customizing-plugin.md) {% endcontent-ref %} {% content-ref url="/pages/IHfWdc0deeGwtfn2TIxS" %} [Individual customizations with the ThemeWare® Customizing App (Cloud)](/knowledge-base/tutorials/individual-customizations/individual-customizations-with-the-themeware-customizing-app.md) {% 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: {% 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="/pages/UsielF4CV0O25ltWB3Lr" %} [CSS hierarchy](/knowledge-base/tutorials/individual-customizations/css-hierarchy.md) {% endcontent-ref %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://knowledge.themeware.design/knowledge-base/tutorials/individual-customizations/individual-customizations-by-means-of-scss.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.