Maintain Settings

Summary

Under eCom \ Settings you configure the behaviour of the shop.

Which settings exist, what values they take, and what they do is described in the specification on the page Settings at a Glance. This page only describes the procedure and the places where mistakes are commonly made.

Procedure

1. Open eCom \ Settings.
2. Change setting.
3. Save.
4. Provide data.

A change takes effect at the earliest after the next shop retrieval interval, i.e. after 15 or 30 minutes.

Settings that only take effect together with another place

This is the most common source of errors: the setting is set, but the second place is missing.

Change shop colours via CSS

The colouring is stored as free text in the field CSS. The colours are given as CSS variables in HSL notation.

For switching to your corporate colour, usually two values are sufficient:

1. --primary set to your corporate colour — dark shade.
2. --primary-soft set to the same hue angle, but very light.

The HSL notation is hsl(hue saturation lightness). To make it lighter or darker in the same colour, you only change the last value. Variables with var(--primary) automatically take the value of the main colour.

Warning: Each colour has a -foreground colour, i.e. the text colour on it. Ensure sufficient contrast, otherwise text in the shop becomes unreadable.

The page background

Previously, the shop generated a background gradient from --primary. This could only be disabled by manually setting its two endpoints --verlauf-warm and --verlauf-kalt to the same colour.

There is now a dedicated variable. Both endpoints point to --shop-hintergrund, which in turn points to --primary-soft:

--shop-hintergrund: var(--primary-soft); --verlauf-warm: var(--shop-hintergrund); --verlauf-kalt: var(--shop-hintergrund); 

Because both endpoints have the same value, in the default state no gradient is visible — the background is solid. And because the value is linked to --primary-soft, it automatically adapts to the corporate colour: Whoever changes --primary-soft gets the matching background.

Set a different background. Now only one line is needed instead of two:

:root { --shop-hintergrund: hsl(0 0% 100%); } 

Want a gradient. Set --verlauf-warm and --verlauf-kalt individually to two different colours and leave --shop-hintergrund untouched.

Note on colour choice: A strong main colour appears much stronger over large areas than on a button. Because the background is linked to --primary-soft — the light shade — this is less noticeable than before. Still, check the result on the finished shop before fixing the colour.

The default state and a counterexample

The shop is delivered in orange. Next to it is a blue palette as an example for a change — both are based on one hue angle:

From --primary to --primary-soft the hue and saturation remain the same; only the lightness jumps — for orange from 49 to 94 per cent, for blue from 25 to 94. This is exactly how the notation is intended: one colour, two lightness levels.

--secondary differs slightly in both cases — a few degrees in hue and a lighter level. This is enough to set off secondary elements without introducing a second colour.

Note: --accent and --ring take the main colour. If you do not explicitly want them different, you do not have to set them. In practice, there are thus three values: --primary, --primary-soft and --secondary.

The complete list of variables is in the specification.