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:

1. 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.

2. 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 variable for each configuration field can be found quickly using our ThemeWare® Config Finder. Just enter the name of a field and if necessary the block you want to search in (e.g. "typography headline textcolor") and you will find the matching configuration field(s).

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.