Farbschemata: Wechseln Sie zwischen mehreren Farbpaletten

Ein Farbschema ist eine vorgefertigte Farbpalette für Ihren Webshop. Anstatt einzelne Farben Feld für Feld einzugeben, wählen Sie einfach ein Schema aus, klicken auf „Speichern“ – und schon erhält der gesamte Shop ein neues Erscheinungsbild. Schaltflächen, Kopfzeile, Menü, Fußzeile und die USP-Leiste werden einheitlich angepasst, sodass die Farben auch danach noch harmonisch zusammenpassen.

Farben gehören zu den kostengünstigsten Elementen, die du anpassen kannst. Du kannst dem Shop zu Weihnachten einen saisonalen Look verleihen, einen gedeckteren Stil ausprobieren oder den Shop an dein Logo anpassen, ohne einen Entwickler beauftragen zu müssen. Und wenn du es dir anders überlegst, klickst du einfach wieder auf das alte Farbschema.

Wo findest du Farbschemata?

Du findest die Seite unter „Shop“, „Design“, „Farbschemata“, direkt unter „Theme-Einstellungen“ im Design-Menü.

Die Seite öffnet sich mit der Überschrift „Farbschema auswählen“ und einer Galerie mit Karten. Jede Karte zeigt eine Reihe von Farbmuster, den Namen des Schemas und eine kurze Beschreibung. Weiter unten befindet sich der Abschnitt „Farben“ mit den einzelnen Farbfeldern, und ganz unten gibt es eine „Speichern“-Schaltfläche, die beim Scrollen mitläuft.

Kannst du den Menüpunkt nicht finden? Dann verfügt dein Theme nicht über Farbschemata

Das ist das Wichtigste, was du wissen musst, bevor du vergeblich suchst: Farbschemata erscheinen nur dann im Menü, wenn das Theme, mit dem dein Shop derzeit läuft, über integrierte Farbschemata verfügt. Ist dies nicht der Fall, gibt es den Menüpunkt gar nicht, und wenn du direkt zur Adresse gehst, wirst du zu den Theme-Einstellungen weitergeleitet.

Technisch gesehen muss das Theme eine Datei namens „color_scheme.json“ in seinem Stammverzeichnis enthalten, also an derselben Stelle wie die übrige Konfigurationsdatei des Themes, „theme_settings.json“. Ist die Datei nicht vorhanden oder fehlt die Liste der Farbschemata, gibt es keinen Menüpunkt.

Unter den integrierten Themes von Shoporama verfügen „Montana“ und „MontanaB2B“ über Farbschemata. Wenn du ein anderes Theme verwendest, zum Beispiel „Delaware“, oder ein Theme, das ein Entwickler für dich erstellt hat, legst du die Farben stattdessen einzeln unter „Theme-Einstellungen“ fest. Wenn Sie Farbschemata in Ihrem eigenen Theme haben möchten, kann Ihr Entwickler die Datei hinzufügen.

So wechselst du das Farbschema

1. Gehe zu „Shop“, „Design“, „Farbschemata“.
2. Sehen Sie sich die Galerie an. Das aktuell ausgewählte Schema ist durch einen blauen Rahmen um die Karte gekennzeichnet.
3. Klicke auf die Karte, die du verwenden möchtest. Die Farbfelder weiter unten werden sofort mit den Farben des Farbschemas gefüllt, sodass du die genauen Farbcodes sehen kannst, bevor du speicherst.
4. Wenn du eine einzelne Farbe anpassen möchtest, tu dies jetzt (siehe nächster Abschnitt).
5. Klicke unten auf „Speichern “. Mit Cmd+S auf dem Mac oder Strg+S unter Windows erreichst du dasselbe.

Im Shop passiert nichts, bevor du auf „Speichern“ klickst, sodass du in aller Ruhe zwischen den Farbschemata hin- und herklicken kannst. Sobald du gespeichert hast, wird der Cache des Shops automatisch geleert. Wenn du immer noch die alten Farben siehst, führe einen Hard-Reload durch (Cmd+Shift+R oder Strg+F5), da der Browser die alte Version möglicherweise noch einen Moment lang beibehält.

Was beinhaltet ein Farbschema?

Ein Schema besteht aus einem Namen, einer kurzen Beschreibung des Stils und einer Farbe für jede der Farbrollen, mit denen das Thema arbeitet. Die Farbmuster auf der Karte zeigen sie alle an, und wenn Sie mit der Maus über ein Muster fahren, sehen Sie, welche Rolle es ausfüllt.

In Montana gibt es acht Farbschemata: „Standard“, „Warm“, „Kühl“, „Natur“, „Elegant“, „Rose“, „Luxus“ und „Sand“. Die Farben sind in drei Gruppen unterteilt:

• Grundfarben: Primärfarbe (Text, Überschriften und dunkle Elemente), Aktionsfarbe (Schaltflächen, Links und Call-to-Action) sowie Hintergrundfarbe.
• Kopfzeile & Navigation: Hintergrundfarbe der Kopfzeile, Textfarbe der Kopfzeile und Hintergrundfarbe des Menüs.
• Fußzeile & USP: Hintergrundfarbe der Fußzeile, Textfarbe der Fußzeile, Hintergrundfarbe des USP und Textfarbe des USP.

Ein Farbschema steuert ausschließlich die Farben. Schriftart, Eckenabrundung, Abstand zwischen den Abschnitten, Logo und Favicon gehören zu den Theme-Einstellungen und bleiben beim Wechsel des Farbschemas unverändert.

Farben selbst feinabstimmen

Unter „Farben“ wird jede Farbe in einem eigenen Feld mit zwei Optionen angezeigt: einem Farbwähler, auf den du klicken und in den du zeigen kannst, und einem kleinen Textfeld für den hexadezimalen Farbcode, also den, der so aussieht wie #2563eb. Die beiden Felder folgen aufeinander, nutze also das, womit du am besten zurechtkommst. Hat das Theme eine Standardfarbe für das Feld definiert, befindet sich rechts ein kleines Kreis-Pfeil-Symbol, das die Farbe auf diesen Wert zurücksetzt. Das Symbol ändert nur die Farbe des Feldes; denk also daran, anschließend auf „Speichern“ zu klicken.

Ein Detail, das du wissen solltest: Wenn du ein Schema auswählst und anschließend eine einzelne Farbe änderst, bleibt die Karte weiterhin markiert. Die Markierung zeigt also an, welches Schema du zuletzt als Ausgangspunkt verwendet hast, und nicht, dass die Farben mit dem Schema identisch sind. Wenn du zum reinen Schema zurückkehren möchtest, klicke einfach erneut auf die Karte.

So hängt das mit den Design-Einstellungen zusammen

Beide Seiten arbeiten mit denselben Farben. Die Seite „Farbschema“ ist eine Verknüpfung, die nur die Farben anzeigt und sie alle auf einmal festlegt, während „Shop“, „Design“ und „Design-Einstellungen“ alles andere enthalten: Texte, Bilder, Funktionen und die übrigen Designoptionen. In Montana findest du die Farben im Abschnitt „Design & Farben“.

Wenn du eine Farbe an einer Stelle änderst, siehst du sie auch an der anderen Stelle, und der zuletzt gespeicherte Wert ist der gültige. Wenn du das Farbschema wechselst, überschreibst du nur die Farben, die in diesem Schema enthalten sind.

So hängt das mit deinem eigenen Stylesheet zusammen

Wenn du oder dein Entwickler unter „Shop“, „Design“, „Stylesheet“ eigenes CSS eingefügt hast, wird dieses nach dem CSS des Themes geladen. Dein eigener Code hat daher Vorrang vor dem Theme. Das ist praktisch, wenn du etwas Bestimmtes anpassen möchtest, ist aber auch die typische Erklärung dafür, wenn du das Farbschema wechselst und feststellst, dass die Schaltflächen oder die Kopfzeile die alte Farbe beibehalten: An einer Stelle in deinem eigenen Stylesheet ist die Farbe fest vorgegeben. Entferne dort die festgelegte Farbe, damit das Element die Farbe wieder aus dem Theme übernimmt.

Tipps, bevor du auf „Speichern“ klickst

• Überprüfe den Kontrast. Die Farben in den integrierten Schemata sind so zusammengestellt, dass der Text gut lesbar ist. Wenn du die Farben selbst kombinierst, achte darauf, dass heller Text nicht auf hellem Hintergrund erscheint. Das beeinträchtigt sowohl die Konversionsrate als auch die Barrierefreiheit.
• Gehe den Warenkorb und den Bezahlvorgang durch. Die Aktionsfarbe wird für „In den Warenkorb“ und die Bezahlschaltflächen verwendet; klicke daher anschließend einmal den gesamten Weg durch, auch auf dem Handy.
• Denk an deine Bilder. Kopfzeile, Fußzeile und Menü sind im Farbschema enthalten, Banner und Kampagnengrafiken jedoch nicht. Wenn du Grafiken hast, in denen die alte Farbe integriert ist, müssen diese überarbeitet werden.
• Notieren Sie sich die alten Farbcodes. Falls Sie die Farben im Laufe der Zeit selbst angepasst haben, kopieren Sie die Codes an einen sicheren Ort, bevor Sie ein neues Farbschema auswählen. Es gibt auf der Seite keine „Rückgängig“-Schaltfläche und keinen Verlauf.

Wenn du ganz neu bist, triffst du die Farbschemata übrigens bereits im Einrichtungsassistenten an. Nach dem Schritt, in dem du ein Theme auswählst, folgt direkt der Schritt „Farben“ mit derselben Galerie. Wenn du ein Theme ohne Farbschemata wählst, wird dieser Schritt übersprungen.

Für technisch Versierte

Dieser Abschnitt ist nur relevant, wenn du dein eigenes Theme erstellst oder pflegst.

Damit die Farbschemata im Menü angezeigt werden, muss das Theme eine Datei „color_scheme.json“ in seinem Stammverzeichnis enthalten. Die Datei muss gültiges JSON sein und eine Liste mit Schemata enthalten. Fehlt die Datei oder der Schlüssel, wird der Menüpunkt nicht angezeigt, und die Seite leitet den Benutzer zu den Theme-Einstellungen weiter.

{
  "groups": [
    {
      "label": "Grundfarben",
      "fields": ["theme.primary", "theme.action", "theme.background"]
    }
  ],
  "schemes": [
    {
      "id": "default",
      "name": "Standard",
      "description": "Kurze Beschreibung des Schemas.",
      "colors": {
        "theme.primary": "#111827",
        "theme.action": "#2563eb",
        "theme.background": "#ffffff"
      }
    }
  ]
}

Die Schlüssel haben die Form „Abschnitt.Feld“ und müssen den Feldern vom Typ „color“ in der Datei „theme_settings.json“ des Themes entsprechen. Von dort werden auch der Name jedes Feldes und der Wert hinter dem Symbol „Zurücksetzen“ abgerufen, sodass ein Feld ohne entsprechende Definition mit seinem Rohschlüssel und ohne Möglichkeit zum Zurücksetzen angezeigt wird. „groups“ steuert, wie die Felder in Spalten gruppiert werden, und „schemes“ steuert die Karten in der Galerie, wobei die Farbmuster anhand der „colors“ des Schemas gezeichnet werden.

Wenn der Benutzer speichert, werden die Farben als ganz normale Theme-Einstellungen geschrieben, während die ID des Schemas separat gespeichert wird – ausschließlich, damit beim nächsten Mal die richtige Karte markiert werden kann. Dein Theme muss sich daher nur mit den Theme-Einstellungen befassen, nicht mit der Schema-ID. Montana wandelt diese in CSS-Variablen in :root um, darunter --color-primary und --color-action. Dieses Muster lohnt es sich zu übernehmen, denn so wirkt sich ein Schemawechsel überall aus, ohne dass Änderungen am HTML-Code selbst erforderlich sind. Wenn du auf Dateien im Theme verlinken möchtest, lies den Abschnitt „Verlinkung auf Stylesheet usw.“

Häufig gestellte Fragen

Ich kann „Farbschemata“ im Menü überhaupt nicht finden. Muss ich das kaufen?

Nein, das kostet nichts. Der Punkt wird nur angezeigt, wenn dein aktuelles Theme integrierte Farbschemata hat, und das ist bei weitem nicht bei allen Themes der Fall. Wenn du ein Theme ohne Farbpaletten verwendest, legst du die Farben stattdessen unter „Shop“, „Design“, „Theme-Einstellungen“ fest. Welches Theme dein Shop verwendet, kannst du unter „Shop“, „Design“, „Theme“ sehen.

Wie kann ich sehen, welches Farbschema gerade ausgewählt ist?

Das ausgewählte Farbschema ist durch einen blauen Rahmen um die Karte gekennzeichnet. Wenn du anschließend eine Farbe manuell angepasst hast, bleibt die Karte weiterhin markiert, sodass sie anzeigt, von welcher Farbe du ausgegangen bist. Wenn du das ursprüngliche Farbschema wiederherstellen möchtest, klicke erneut auf die Karte und speichere die Änderung.

Muss ich mich mit CSS auskennen, um das hier zu nutzen?

Nein. Du klickst auf eine Karte und drückst auf „Speichern“. Wenn du Feinabstimmungen vornehmen möchtest, kannst du den Farbwähler verwenden und die gewünschte Farbe auswählen, ohne auch nur einen einzigen Farbcode zu kennen. Das Textfeld daneben ist nur für diejenigen gedacht, denen ein Code zur Verfügung gestellt wurde.

Kann ich den Vorgang rückgängig machen, wenn mir das Ergebnis nicht gefällt?

Es gibt keine „Rückgängig“-Schaltfläche, aber du kannst jederzeit auf das alte Schema klicken und es erneut speichern. Wenn du selbst an einzelnen Farben herumgetüftelt hast, kopiere die Codes zuerst, da sie überschrieben werden, wenn du ein neues Schema auswählst. Das Kreispfeil-Symbol neben jedem Feld setzt die Farbe auf den Standard des Themes zurück, sofern das Theme einen solchen definiert hat.

Gilt das Schema für alle meine Webshops?

Nein. Die Auswahl gilt für den jeweiligen Webshop. Wenn du also mehrere Shops hast, wählst du für jeden einzelnen ein Farbschema aus. Das ist praktisch, wenn du mehrere Marken auf derselben Plattform betreibst und diese optisch voneinander trennen möchtest.

Kann ich ein Weihnachtsfarbschema planen, das danach automatisch wieder zurückgesetzt wird?

Nicht bei den Farbschemata selbst. Das Wechseln des Farbschemas erfolgt manuell. Wenn du etwas benötigst, das an bestimmten Daten aktiviert und deaktiviert wird, kannst du dir unter „Shop“, „Design“, „Stylesheet“ die Stylesheet-Varianten ansehen, die zeitgesteuert und gegeneinander getestet werden können.

Verändert ein neues Farbschema meine Rechnungen und Bestellbestätigungen?

Die druckfreundliche Rechnung hat ihr eigenes festes Erscheinungsbild und wird davon nicht beeinflusst. In Montana verwenden einige der E-Mail-Vorlagen deine Primärfarbe für die Schaltflächen, sodass diese teilweise mit angepasst werden. Schicke dir selbst eine Test-E-Mail, wenn es wichtig ist, dass alles zusammenpasst.

Ich habe die Änderungen gespeichert, aber der Shop sieht unverändert aus. Was soll ich tun?

Versuche zunächst, die Seite im Browser neu zu laden, da möglicherweise noch die alte Version der Seite im Cache gespeichert ist. Wenn bei einem bestimmten Element immer noch nichts passiert, liegt das in der Regel an eigenem CSS unter „Design“, „Stylesheet“, das die Farbe festlegt.

Was passiert mit meinen Farben, wenn ich anschließend das Theme wechsle?

Die Farben sind als Theme-Einstellungen gespeichert, und ein neues Theme kann andere Felder verwenden. Wechsle daher zuerst das Theme und gehe anschließend die Farbschemata oder Theme-Einstellungen durch. Verfügt das neue Theme über keine Farbschemata, verschwindet der Menüpunkt wieder.

Wenn du Fragen hast oder die Farben nicht richtig angezeigt werden, kannst du gerne eine E-Mail an support@shoporama.dk schreiben.