# Einstellungen pflegen

## Übersicht

Unter *eCom \\ Einstellungen* stellen Sie das Verhalten des Shops ein.

Welche Einstellungen es gibt, welche Werte sie annehmen und was sie bewirken, steht in der Leistungsbeschreibung auf der Seite *Einstellungen im Überblick*. Diese Seite beschreibt nur das Vorgehen und die Stellen, an denen man sich vertut.

## Vorgehen

1. *eCom \\ Einstellungen* öffnen.
2. Einstellung ändern.
3. Speichern.
4. Daten bereitstellen.

Eine Änderung wirkt frühestens nach dem nächsten Abholintervall des Shops, also nach 15 oder 30 Minuten.

## Einstellungen, die nur zusammen mit einer anderen Stelle wirken

Das ist die häufigste Fehlerquelle: die Einstellung ist gesetzt, aber die zweite Stelle fehlt.

<table id="bkmrk-einstellung-braucht-"><thead><tr><th>Einstellung</th><th>Braucht zusätzlich</th></tr></thead><tbody><tr><td>Gutscheineingabe</td><td>einen angelegten Gutschein unter *eCom \\ Gutscheinverwaltung*</td></tr><tr><td>Frachtkosten Artikel</td><td>Frachtkosten und Frachtfreigrenze als Mandantenwerte **mit eCom-Kennzeichen**</td></tr><tr><td>Mindestbestellwert aus Debitor anwenden</td><td>gelieferte Debitor-Daten; sonst gilt der Mandantenwert</td></tr><tr><td>Default-Sprache</td><td>Artikeltexte und Warengruppentexte in der gewählten Kultur</td></tr><tr><td>Noch kein Kunde, Haken entfernt</td><td>den Textbaustein *Noch kein Zugang – Hinweis* unter *eCom \\ Texte*</td></tr></tbody></table>

## Shop-Farben über CSS ändern

Die Farbgebung liegt als Freitext im Feld **CSS**. Die Farben stehen als CSS-Variablen in HSL-Notation.

Für eine Umstellung auf Ihre Hausfarbe genügen in der Regel zwei Werte:

1. `--primary` auf Ihre Hausfarbe setzen — dunkle Ausprägung.
2. `--primary-soft` auf denselben Farbwinkel setzen, aber sehr hell.

Die HSL-Notation lautet `hsl(Farbwinkel Sättigung Helligkeit)`. Für heller oder dunkler in derselben Farbe ändern Sie nur den **letzten** Wert. Variablen mit `var(--primary)` übernehmen den Wert der Hauptfarbe automatisch.

> **Achtung:** Zu jeder Farbe gehört eine `-foreground`-Farbe, also die Schrift darauf. Achten Sie auf ausreichenden Kontrast, sonst wird Text im Shop unlesbar.

### Der Seitenhintergrund

Früher erzeugte der Shop aus `--primary` einen **Hintergrundfarbverlauf**. Der ließ sich nur abschalten, indem man seine beiden Endpunkte `--verlauf-warm` und `--verlauf-kalt` von Hand auf dieselbe Farbe setzte.

Dafür gibt es eine eigene Variable. Beide Endpunkte zeigen auf `--shop-hintergrund`, und die wiederum auf `--primary-soft`:

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

```

Weil beide Endpunkte **denselben** Wert haben, ist im Auslieferungszustand **kein Verlauf mehr zu sehen** — der Hintergrund ist einfarbig. Und weil der Wert an `--primary-soft` hängt, passt er sich der Hausfarbe von allein an: Wer `--primary-soft` umstellt, bekommt den passenden Hintergrund dazu.

**Einen anderen Hintergrund setzen.** Dafür genügt jetzt **eine** Zeile statt zweier:

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

```

**Einen Verlauf haben wollen.** Setzen Sie `--verlauf-warm` und `--verlauf-kalt` einzeln auf zwei **verschiedene** Farben und lassen Sie `--shop-hintergrund` unberührt.

> **Hinweis zur Farbwahl:** Eine kräftige Hauptfarbe wirkt großflächig deutlich stärker als auf einer Schaltfläche. Weil der Hintergrund an `--primary-soft` hängt — also der **hellen**Ausprägung — fällt das weniger ins Gewicht als früher. Sehen Sie sich das Ergebnis trotzdem am fertigen Shop an, bevor Sie die Farbe festschreiben.

### Der Auslieferungszustand und ein Gegenbeispiel

Der Shop wird in **Orange** ausgeliefert. Daneben steht hier eine blaue Palette als Beispiel für eine Umstellung — beide bauen auf **einem** Farbwinkel auf:

<table id="bkmrk-variable-orange-%28aus"><thead><tr><th>Variable</th><th>Orange (Auslieferung)</th><th>Blau (Beispiel)</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>wie <code>&#45;&#45;primary</code></td><td>wie <code>&#45;&#45;primary</code></td></tr><tr><td><code>&#45;&#45;ring</code></td><td>wie <code>&#45;&#45;primary</code></td><td>wie <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>frei wählbar</td></tr><tr><td><code>&#45;&#45;verlauf&#45;warm</code>, <code>&#45;&#45;verlauf&#45;kalt</code></td><td>beide <code>var&#40;&#45;&#45;shop&#45;hintergrund&#41;</code></td><td>beide <code>hsl&#40;0 0&#37; 100&#37;&#41;</code> — weiß, also kein sichtbarer Verlauf</td></tr></tbody></table>

Von `--primary` zu `--primary-soft` bleiben Farbwinkel und Sättigung **gleich**; nur die **Helligkeit** springt — beim Orange von 49 auf 94 Prozent, beim Blau von 25 auf 94. Genau so ist die Notation gedacht: eine Farbe, zwei Helligkeiten.

`--secondary` weicht in beiden Fällen leicht ab — ein paar Grad im Farbwinkel und eine hellere Stufe. Das genügt, damit sich zweitrangige Elemente absetzen, ohne eine zweite Farbe einzuführen.

> **Hinweis:** `--accent` und `--ring` übernehmen die Hauptfarbe. Wer sie nicht ausdrücklich anders haben will, muss sie gar nicht setzen. In der Praxis sind es also **drei** Werte: `--primary`, `--primary-soft` und `--secondary`.

Die vollständige Variablenliste steht in der Leistungsbeschreibung.