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.

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:

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

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

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.