Using theme variables in the configuration
In this tutorial you will learn how to use theme variables in the theme configuration.
In the theme configuration you will occasionally find variables in color fields. This unifies the color image of your Storefront and makes it easier to customize the color image to your preferences.
There are two relevant notations for variables:
Shopware variables:
$sw-color-brand-primary = Primary color in the Storefront
$sw-color-brand-secondary = Secondary color in the Storefront
$sw-text-color = Text color in the Storefront
$sw-background-color = Background color in the Storefront
usw.
ThemeWare® Variables:
$twt-color-brand-primary-light = A light shade of the primary color
$twt-color-brand-primary-dark = A darker shade of the primary color
$twt-color-brand-secondary-light = A lighter shade of the secondary color
$twt-color-brand-secondary-dark = A darker shade of the secondary color
and so on.
Preface
Currently, the use of variables in Themes should be handled with care! In Shopware 6, variables must be initialized in a configuration field before being used. Therefore, a variable cannot be used in a configuration field ahead of the theme variable's actual configuration field.
This especially affects theme duplicates, as they – for whatever reason – currently do not get the order for configuration fields as intended by the developer.
Finding variables
The variables are listed as "Technical name" for each field.
When compiling the Theme, the variables are replaced by the value stored in the corresponding configuration field.
Using variables
Variables can be used in different configuration fields.
Limitation: In Shopware standard configuration fields, theme variables ($twt...) cannot be used due to theme inheritance.
In case configuration fields are not suitable in principle, you will find a corresponding hint in the help text.
Tip: The best is to save and compile the theme once after each used theme variable in order to check whether the variable is possible in the corresponding configuration field.
In case this is not possible, you will receive the following error.
Error "Undefined Variable"
This error occurs when Shopware is not "aware" of a variable. This would occur when working with theme variables when (as described above) the variable has not already been initialized before use.
In this case please change the variable back to a HEX or RGB/RGBA value.
Last updated