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

<table id="bkmrk-einstellung-braucht-"> <thead> <tr> <th>Setting</th> <th>Also requires</th> </tr> </thead> <tbody> <tr> <td>Voucher input</td> <td>a created voucher under *eCom \\ Voucher management*</td> </tr> <tr> <td>Freight costs item</td> <td>Freight costs and Free carriage limit as client values **with eCom flag**</td> </tr> <tr> <td>Apply minimum order value from debtor</td> <td>delivered debtor data; otherwise the client value applies</td> </tr> <tr> <td>Default language</td> <td>Item texts and product group texts in the selected culture</td> </tr> <tr> <td>Not a customer yet?, checkbox removed</td> <td>the text block *Access request – General Information* under *eCom \\ Texts*</td> </tr> </tbody> </table>

## 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`:

```css
--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:

```css
: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:

<table id="bkmrk-variable-orange-%28aus"> <thead> <tr> <th>Variable</th> <th>Orange (default)</th> <th>Blue (example)</th> </tr> </thead> <tbody> <tr> <td><code>&#45;&#45;primary</code></td> <td><code>hsl&#40;27 87&#37; 49&#37;&#41;</code></td> <td><code>hsl&#40;215 100&#37; 25&#37;&#41;</code></td> </tr> <tr> <td><code>&#45;&#45;primary&#45;soft</code></td> <td><code>hsl&#40;27 87&#37; 94&#37;&#41;</code></td> <td><code>hsl&#40;215 100&#37; 94&#37;&#41;</code></td> </tr> <tr> <td><code>&#45;&#45;secondary</code></td> <td><code>hsl&#40;36 82&#37; 50&#37;&#41;</code></td> <td><code>hsl&#40;211 100&#37; 40&#37;&#41;</code></td> </tr> <tr> <td><code>&#45;&#45;accent</code></td> <td>like <code>&#45;&#45;primary</code></td> <td>like <code>&#45;&#45;primary</code></td> </tr> <tr> <td><code>&#45;&#45;ring</code></td> <td>like <code>&#45;&#45;primary</code></td> <td>like <code>&#45;&#45;primary</code></td> </tr> <tr> <td><code>&#45;&#45;shop&#45;hintergrund</code></td> <td><code>var&#40;&#45;&#45;primary&#45;soft&#41;</code></td> <td>freely selectable</td> </tr> <tr> <td><code>&#45;&#45;verlauf&#45;warm</code>, <code>&#45;&#45;verlauf&#45;kalt</code></td> <td>both <code>var&#40;&#45;&#45;shop&#45;hintergrund&#41;</code></td> <td>both <code>hsl&#40;0 0&#37; 100&#37;&#41;</code> — white, so no visible gradient</td> </tr> </tbody> </table>

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.