Farbschemas
Du kannst verschiedene Farbschemas in deinen Theme-Einstellungen definieren und diese mithilfe einer Farbschema-Auswahl auf verschiedene Abschnitte in deinem Onlineshop anwenden. Ein Farbschema ist ein Satz von Farben. Für dein Theme werden Standard-Farbschemas verwendet, die du jederzeit im Theme-Editor ändern kannst. Du kannst deine Markenfarben hinzufügen, um eine kohärente Anwendung deiner Farbpalette in deinem Onlineshop sicherzustellen.
Auf dieser Seite
Farbschema-Theme-Einstellungen
Farbschemas sind eine Theme-Einstellung, die Elemente und ihre entsprechenden Farben in einer visuell repräsentativen Art gruppiert. Du kannst verschiedenen Elementen verschiedene Farben in einem zusammenhängenden Farbschema zuweisen, das überall in deinem Theme angewendet werden kann, wo eine Farbschema-Auswahl verfügbar ist. Du kannst bis zu 21 Farbschemas haben. Du kannst auch eine Vorschau der Farben in der Schema-Vorschau anzeigen.
| Einstellung | Beschreibung |
|---|---|
| Hintergrund | Die Farbe wird auf den Hintergrund einiger Abschnitte und auf den Hintergrund der Umriss-Schaltfläche angewendet. |
| Hintergrundfarbverlauf | Ein Farbverlauf wird auf den Hintergrund einiger Abschnitte angewendet. Wo möglich, ersetzen die Hintergrundfarbverläufe den Hintergrund. |
| Text | Die Farbe wird auf den Abschnitt oder den Blocktext angewendet. |
| Hintergrund für durchgehende Schaltfläche | Die Farbe wird auf den Hintergrund der primären Schaltfläche angewendet. |
| Beschriftung für durchgehende Schaltfläche | Die Farbe wird auf den Text der primären Schaltfläche angewendet. |
| Umriss-Schaltfläche | Die Farbe wird auf den Text der sekundären Schaltfläche und auf den Rand angewendet. |
| Schatten | Die Farbe wird auf die Schatten angewendet. |
Farbschema verwalten
Das Farbschema und die Farboptionen deines Shops werden in deinen Theme-Einstellungen festgelegt. Verwende für einheitliche Farben die Farbauswahl, um eine neue Farbe auszuwählen, oder gib den Wert der Farbe in das Textfeld ein. Das Farbfeld akzeptiert die folgenden Farbnamen und Werte:
- Farbnamen wie
red,blackoderblue - RGB-Farbcodes
- hexadezimale Farbwerte
Schritte:
- Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
- Klicke neben dem Theme, das du anpassen möchtest, auf Anpassen.
- Klicke auf das Zahnradsymbol und anschließend auf Farben.
- Klicke im Abschnitt Schemas auf ein vorhandenes Schema oder klicke auf Schema hinzufügen, um ein neues Schema hinzuzufügen.
- Klicke auf das Farbfeld für die Farbe des Inhaltstyps, die du ändern möchtest.
- Gib einen hexadezimalen Farbcode ein oder wähle eine Farbe in der Farbauswahl aus, um eine Farbe festzulegen. Lösche den Hex-Codewert aus dem Textfeld, um die Farbe als transparent festzulegen.
- Klicke auf Speichern.
Dein Farbschema anwenden
Nachdem du dein Farbschema in deinen Theme-Einstellungen definiert hast, kannst du mithilfe der Farbschema-Auswahl in den Abschnitten und Blöcken deines Themes ein Farbschema zuweisen. Die Farbschema-Auswahl ist nur in bestimmten Abschnitten und Blöcken sowie in den allgemeinen Theme-Einstellungen verfügbar.
Farbverläufe
In einigen Themes kannst du Farbverläufe für visuell interessante Hintergrundoptionen einrichten. Die Einstellung color_background wird verwendet, um die CSS-Hintergrund-Eigenschaft anzupassen.
Mit der Farbverlaufsauswahl kannst du die Farben, den Verlaufsstil, den Winkel, die Position und die Deckkraft des Farbverlaufs auswählen. Die in der Farbverlaufsauswahl gewählten Optionen werden in Echtzeit im Theme-Editor angezeigt. Du kannst auch mit CSS-Code einen Hintergrund mit Farbverlauf erstellen und die enthaltene Validierungsprüfung nutzen.
Farbverlauf einrichten
- Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
- Klicke neben dem Theme, das du anpassen möchtest, auf Anpassen.
- Klicke auf das Zahnradsymbol und anschließend auf Farben.
- Klicke im Abschnitt Schemas auf ein vorhandenes Schema, das du bearbeiten möchtest.
- Klicke auf die Farbfeld-Option des Farbverlaufs, z. B. auf Hintergrundfarbverlauf.
- Wenn du noch keinen Farbverlauf festgelegt hast, werden dir einige voreingestellte Optionen zur Auswahl angezeigt. Wähle einen beliebigen voreingestellten Farbverlauf aus, um das Optionsfenster zu öffnen.
- Wähle deine Farbverlaufsoptionen aus:
- Wählen zwischen einem linearen und einem radialen Farbverlauf aus. Verwende die Schaltflächen, um deinen bevorzugten Farbverlaufsstil auszuwählen.
- Lege den Winkel deines Farbverlaufs mit den Aufwärts- und Abwärtspfeilen fest. Wenn du auf den Aufwärts- oder Abwärtspfeil klickst, erhöht oder verringert sich der Winkel um 5 Prozent.
- Verwende den Schieberegler, um die Position deines Farbverlaufs auszuwählen, oder gib einen numerischen Wert in das Feld ein.
- Gib einen bestimmten hexadezimalen Farbcode ein oder verwende den Farbschieberegler, um einen Farbton auszuwählen. Kürzlich ausgewählte Farben werden unten im Fenster mit den Farbverlaufsoptionen angezeigt.
- Wenn dein Farbverlauf deckend sein soll, verwende den Schieberegler auf der rechten Seite, um die Transparenz deines Farbverlaufs auszuwählen. Du kannst auch einen Prozentsatz in das Feld neben dem Hex-Farbcode eingeben.
- Klicke auf Speichern.
Farbverläufe mit CSS festlegen
Die meisten Werte der CSS-Eigenschaft background können verwendet werden, um eine Hintergrundfarbe festzulegen. Du kannst dieses Feld für eine gleichmäßige Farbe verwenden (z. B. erzeugen #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) und hsla(0, 0%, 0%, 1) jeweils einen gleichmäßigen schwarzen Hintergrund) oder für einen Farbverlauf (z. B. linear-gradient(red, green), radial-gradient(red, green) oder conic-gradient(red, green)). Farbverläufe können auch wiederholt werden.
Schritte:
- Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
- Klicke neben dem Theme, das du anpassen möchtest, auf Anpassen.
- Klicke auf das Zahnradsymbol und anschließend auf Farben.
- Klicke im Abschnitt Schemas auf ein vorhandenes Schema, das du bearbeiten möchtest.
- Klicke auf den Farbverlauf, den du bearbeiten möchtest.
- Klicke auf den Pfeil neben Farbverlauf und wähle CSS aus.
- Tippe oder füge den Code des Farbverlaufs in das Feld CSS-Code ein. Die Vorschau des Theme-Editors zeigt deinen Farbverlauf an der entsprechenden Stelle an.
- Klicke auf Speichern.
Einen Farbverlauf entfernen
- Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
- Klicke neben dem Theme, das du anpassen möchtest, auf Anpassen.
- Klicke auf das Zahnradsymbol und anschließend auf Farben.
- Klicke im Abschnitt Schemas auf ein vorhandenes Schema, das du bearbeiten möchtest.
- Klicke auf den Farbverlauf, den du entfernen möchtest.
- Klicke auf Farbverlauf entfernen.
- Klicke auf Speichern.