Links

Farben konfigurieren

In diesem Artikel erfährst du, wie du die Farben in deinem Shop konfigurierst.
Farben kannst du in verschiedenen Bereichen konfigurieren:
  • Theme-Konfiguration
  • Erlebniswelten
  • jegliche HTML-Elemente (Inline-Styles)
  • Shopware Core (sehr wenige, nicht für die Gestaltung relevant)
Nachfolgend zeigen wir dir wie du die Hauptfarben in der Theme-Konfiguration an deine Wünsche anpassen kannst, stellen dir das Farbkonfigurationsfeld vor und zeigen dir mögliche Konfigurationswerte.

Beispiel

Wahrscheinlich möchtest du als erstes die Primärfarbe an dein Corporate-Design anpassen.
  1. 1.
    Öffne die Administration deines Shops
  2. 2.
    Wechsel über die Hauptnavigation in die "Theme-Verwaltung" (1) (2) ("Inahlt" => "Themes")
    • Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
  3. 3.
    Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen
  4. 4.
    Wechsel in den Tab "Layout" (3)
  5. 5.
    Öffne den Bereich "Hauptfarben" (4)
  6. 6.
    Als "Primärfarbe" (5) wählen wir den Wert #0e8ed3
  7. 7.
    Im Feld Primärfarbe (hell) wählen wir die Nuance #6ac5f5
  8. 8.
    Als Primärfarbe (dunkel) wählen wir #0c7ebb
  9. 9.
    Speicher die Theme-Konfiguration
  10. 10.
    Wechsel in die Storefront und lade die Seite einmal neu
Du hast nun erfolgreich die Primärfarbe geändert.

Screenshots

ThemeWare® Hauptfarben
TemeWare® Strong - Orange
ThemeWare® Strong - Blau
Hinweis: Die Farbe vom Logo oder Design-Elementen in Bannern der Erlebniswelt ändert sich dadurch nicht. Dies sind Grafiken die nicht vom Browser umgefärbt werden können. Du kannst aber alle Grafiken im PSD-Format über die ThemeWare® Utilities herunterladen und diese beliebig anpassen.

Farbkonfigurationsfelder

In der ThemeWare® Konfiguration findest du diverse Farbkonfigurationsfelder bzw. Farbfelder. Im Tab "Layout" findest du beispielsweise den Bereich "Hauptfarben". Hier konfigurierst du die wichtigsten Farben für deinen Shop.
Ein Farbkonfigurationsfeld erkennst du immer an einem kleinen, meist bunten Rechteck, links neben dem Eingabefeld. Diese Rechteck ist eine Vorschau der konfigurierten Farbe.

Hexadezimalwerte

Im Eingabefeld siehst du dann den entsprechenden Farbcode. In der Regel findest du dort einen Code nach dem Muster #123456. Die ist ein Hexadezimalwert einer Farbe (z.B.: #ff0000).
Schwarz als Hexadezimalwert
Hinweis: Achte darauf den korrekten Farbcode zu nutzen um Fehler bei der Kompilierung zu vermeiden.

RGBA-Werte

Wir empfehlen dir mit Hexadezimalwerten zu arbeiten. Du kannst aber auch mit RGBA-Werten (z.B. rgba(255, 0, 0, 0.5)) arbeiten. Über RGBA-Werte (RGB-Farbmodell + Alpha-Kanal) kannst du sehr leicht Transparenzen definieren.
Transparenter RGBA-Wert

Farbwähler

Wenn du auf die Farbvorschau klickst, öffnet sich der "Farbwähler" auch "Color Picker" genannt.
Shopware Farbwähler
Nutze einfach den Farbwähler um einen fehlerfreien Farbcode zu generieren.
Tipp: Einsteigern empfehlen wir mit dem Farbwähler zu arbeiten. Dieser generiert automatisch den richtigen Farbcode für die gewünschte Farbe.

Sonderfall: Der Farbwert "transparent"

Du wirst bei der Farb-Konfiguration in ThemeWare® gelegentlich den Wert transparent finden. Dieser steht für eine durchsichtige bzw. unsichtbare Farbe.
Eine Transparenz erreichst du im Idealfall über einen RGBA-Wert (z.B. rgba(0, 0, 0, 0) oder rgba(255, 255, 255, 0)), in ThemeWare® hat der Wert transparent in manchen Konfigurationsfeldern aber eine besondere Funktion. "Transparent" wird genutzt um gleichzeitig noch andere Elemente (z.B. Rahmen um Elemente) zu entfernen.
Sonderfall "transparent"
Tipp: Wir empfehlen dir den Wert rgba(0, 0, 0, 0) für Transparenzen bzw. eine durchsichtige bzw. unsichtbare Farbe zu nutzen.

Für erfahrene Anwender

Zusätzlich zu diesen Farbwerten kannst du auch Variablen oder SCSS-Funktionen verwenden.
Variablen bzw. Theme-Variablen sind die technischen Bezeichnungen für ein Konfigurationsfeld (z.B. $sw-color-brand-primary für die Primärfarbe). Beim kompilieren wird diese Variable von Shopware durch den Wert des entsprechenden Konfigurationsfeldes ersetzt.
Theme-Variablen können dir dabei helfen, dass du häufig verwendete Farben nicht jedes mal neu eingeben musst bzw. dass du viele Farbfelder mit der entsprechenden Variable auf einen Rutsch ändern kannst.
Mit einfachen SCSS-Funktionen kannst du Farbwerte darüber hinaus modifizieren (z.B. abdunkeln, aufhellen etc.).
Beides empfehlen wir nur erfahrenen Anwendern, da diese schnell zu Fehlern führen können.
Mehr Informationen zum Thema "Theme-Variablen" und "SCSS-Funktionen" findest du im Bereich "Anleitungen" im Bereich "Individuelle Anpassungen".
Tipp: Zum Generieren von Farbnuancen hell und dunkel kannst du auch einfach das Online-Tool Sass Color Generator nutzen.

Grundkonfiguration

Das Design deines Shops wird maßgeblich durch die Primärfarbe und die Sekundärfarbe bestimmt.
Zusätzlich bietet ThemeWare® die auch die Nuancen hell und dunkel dieser beiden Farben an.
Zum Generieren von Farbnuancen hell und dunkel empfehlen wir dir das Online-Tool Sass Color Generator. Damit kannst du dir ganz einfach Nuancen für eine Grundfarbe generieren lassen.
Wenn du diese Farben eingestellt hast, bis du mit der Farbkonfiguration deines Themes schon sehr weit. Dennoch solltest du dir die anderen Bereiche anschauen.

Fehlerhafte Eingaben

Wenn du einen ungültigen Farbwert eingibst und im Theme-Manager speicherst, kommt es zu einer Fehlermeldung.
Angenommen du gibst bei der Primärfarbe aus versehen eine zweite Raute ein (#f2832e#), erscheint beim Speichern der Konfiguration die folgende Fehlermeldung:
Error: Request failed with status code 400
Kompletten Fehler anzeigen (für erfahrene Anwender)
Da wir wissen, dass wir gerade die Primärfarbe geändert haben, ist es naheliegend, dass wir dort wohl etwas falsch gemacht haben. Also korrigieren wir den Wert direkt.
Du wirst nun feststellen, dass obwohl du den Wert korrigiert hast, beim Speichern erneut diese Fehlermeldung erscheint. Wichtig ist hierbei zu wissen, dass der Theme-Manager jetzt sozusagen "kaputt" ist. Egal was du eingibst, der falsche Wert hat sich quasi festgefressen.
Leider können wir dieses verhalten nicht ändern, aber wir gehen davon aus, dass Shopware dies mit einem künftigen Update verbessert.
Um das Problem zu lösen, musst du die Seite einmal neu laden (z.B. mit F5). Danach navigierst du wieder zum "fehlerhaften" Konfigurationsfeld – dort ist tatsächlich noch der falsche Wert gespeichert – korrigierst den Wert und speicherst die Änderung nochmals.
Nun funktioniert das speichern und damit die Kompilierung des Themes wieder.