Die wichtigsten Punkte
- Die globale Textfarbe wird im Theme-Editor > Theme-Einstellungen > Farben festgelegt.
- Die meisten Themes haben ein Farbfeld für „Text“, das die grundlegende Schriftfarbe für die gesamte Website steuert.
- In einigen Themes kannst du Farben für einzelne Abschnitte in den Abschnitts-Einstellungen anpassen.
- Benutzerdefinierte Farben für bestimmte Elemente erfordern CSS im Assets-Ordner deines Themes.
- Fudge kann gezielte Farbänderungen anhand einer einfachen Textbeschreibung anwenden.
Die Schriftfarbe in Shopify änderst du meistens über die Farbeinstellungen im Theme-Editor. Für alles, was über die globale Farbpalette hinausgeht, brauchst du CSS. Hier erfährst du, wie beides funktioniert.
Warum Sie uns vertrauen können
Wir haben hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer Bewertung von 4.9 im Shopify App Store.
Methode 1 – Globale Textfarbe im Theme-Editor ändern
Dies ändert die Standard-Textfarbe in deinem gesamten Shop.
Schritt 1. Gehe zu Onlineshop > Themes > Anpassen.
Schritt 2. Scrolle in der linken Seitenleiste ganz nach unten und klicke auf Theme-Einstellungen.
Schritt 3. Öffne den Bereich Farben.
Schritt 4. Suche das Farbfeld für Text (manchmal als “Fließtext” oder “Vordergrund” bezeichnet). Klicke darauf, um die Farbauswahl zu öffnen.
Schritt 5. Gib einen Hex-Code ein, verwende die Farbauswahl oder schiebe die Regler, um die gewünschte Farbe festzulegen.
Schritt 6. Klicke auf Speichern.
Dies aktualisiert die Standard-Textfarbe überall dort, wo dein Theme die --color-foreground-Variable oder eine ähnliche CSS-Variable verwendet.
Verwandt: Fudge Store Editor.
Siehe auch: Schriftgröße von Überschriften in Shopify ändern.
Verwandt: Link-Farbe in Shopify ändern.
Methode 2 – Textfarbe für bestimmte Abschnitte ändern
Viele moderne Shopify-Themes ermöglichen es Ihnen, ein Farbschema pro Abschnitt festzulegen – heller Hintergrund mit dunklem Text, dunkler Hintergrund mit hellem Text und so weiter.
Schritt 1. Öffnen Sie den Theme-Editor und navigieren Sie zu dem Abschnitt, den Sie anpassen möchten.
Schritt 2. Klicken Sie in der linken Seitenleiste auf den Abschnitt, um dessen Einstellungen zu öffnen.
Schritt 3. Suchen Sie nach dem Dropdown-Menü Farbschema. Wählen Sie ein Schema mit dem benötigten Textkontrast aus.
Schritt 4. Speichern.
Nicht alle Themes verfügen über Farbschemata pro Abschnitt. Wenn Sie diese Option nicht sehen, wendet Ihr Theme eine globale Textfarbe an.
Methode 3 – Schriftfarbe mit CSS ändern
Für präzise Kontrolle – eine bestimmte Überschriftenfarbe, ein farbiger Call-Out-Block, Textfarbe bei einem einzelnen Element – brauchst du CSS.
Schritt 1. Dupliziere zuerst dein Theme. Gehe zu Onlineshop > Themes > Aktionen > Duplizieren.
Schritt 2. Gehe bei deinem aktiven Theme auf Aktionen > Code bearbeiten.
Schritt 3. Öffne Assets > base.css (oder das Haupt-Stylesheet deines Themes).
Schritt 4. Füge unten in der Datei eine CSS-Regel hinzu. Zum Beispiel:
/* Ändere den gesamten Absatztext in ein dunkles Grau */
p {
color: #333333;
}
/* Ändere H2-Überschriften in eine Markenfarbe */
h2 {
color: #1a4b8c;
}
/* Ändere den Text innerhalb eines bestimmten Abschnitts */
.section-announcement-bar {
color: #ffffff;
}Schritt 5. Klicke auf Speichern.
So finden Sie den richtigen CSS-Selector
Mache einen Rechtsklick auf das Element in deinem Browser, wähle Untersuchen und schaue dir die Klassennamen des Elements im HTML-Bereich an. Verwende diese Klassen als deine CSS-Selektoren.
Verwandt: Farben und Schriftarten in Shopify aktualisieren.
Schriftfarbe im Shopify Seiten-Editor ändern
Wenn Sie eine eigenständige Seite bearbeiten (Onlineshop > Seiten), enthält der Rich-Text-Editor ein Textfarben-Tool in der Toolbar. Markieren Sie den Text, den Sie einfärben möchten, klicken Sie auf das Farbsymbol und wählen Sie Ihre Farbe.
Dies wendet Inline-Styling auf diesen spezifischen Text an. Es hat keine Auswirkungen auf anderen Text auf Ihrer Website.
Fudge für Schriftfarben-Änderungen nutzen
Wenn die Farbeinstellungen des Theme-Editors nicht ausreichen, kann Fudge gezielte Farbänderungen vornehmen, ohne dass Sie CSS schreiben müssen. Beschreiben Sie einfach, was Sie möchten:
„Change the heading color on the product pages to our brand blue, #1a4b8c.“
„Make the announcement bar text white.“
Fudge schreibt das CSS, wendet es als Entwurf auf Ihr Theme an und Sie überprüfen es vor der Veröffentlichung.
Kurzübersicht
| Ziel | Methode |
|---|---|
| Gesamte Fließtextfarbe ändern | Theme-Einstellungen > Farben > Text |
| Farbe pro Abschnitt ändern | Abschnittseinstellungen > Farbschema |
| Farbe eines bestimmten Elements ändern | CSS in assets/base.css |
| Bestimmten Text auf einer Seite einfärben | Seiten-Editor > Textfarben-Tool |
Wie ändere ich die Schriftart (Typeface) in Shopify?
Das Ändern der Schriftfamilie – also der Schriftart selbst, nicht ihrer Farbe – erfolgt unter Theme-Einstellungen → Typografie, nicht unter Farben. Dort finden Sie separate Auswahlmöglichkeiten für die Überschriften- und die Fließtext-Schriftart. Eine vollständige Anleitung finden Sie unter So aktualisieren Sie Schriftarten in Shopify.
Wie füge ich eine neue Farbe zu meinem Shopify-Theme hinzu?
Wenn du Farben neu auswählst, statt eine bestehende Palette anzuwenden, generiert unser kostenloser AI Shopify Store Builder eine komplette Farbpalette und Typografie-Kombination basierend auf dem, was du verkaufst.
Gehe zu Theme-Einstellungen → Farben (oder Farbschemata in modernen Themes wie Dawn). Klicke auf ein beliebiges Farbfeld, um die Farbauswahl zu öffnen, und gib deinen Hex-Code ein. Für Farben, die im Theme-Editor nicht zugänglich sind – wie Icon-Farben oder Hover-States – musst du diese per CSS hinzufügen. In unserem Guide zum Aktualisieren von Markenfarben in Shopify findest du den kompletten Ablauf.
FAQ
Dafür gibt es zwei häufige Ursachen: Du hast ein Theme im Entwurfsmodus bearbeitet, aber das Live-Theme ist unverändert, oder dein Theme verwendet Farbschemata pro Abschnitt, die die globale Textfarbe überschreiben. In modernen Themes (Dawn, Sense, Refresh) kann jeder Abschnitt sein eigenes Schema zugewiesen bekommen – ändere das Schema des Abschnitts oder aktualisiere jedes verwendete Schema.
Die Schriftfarbe steuert den Fließtext und die Überschriften. Die Linkfarbe steuert Anchor-Tags (<a>) und wird separat festgelegt – meist unter Theme-Einstellungen → Farben bei "Link" oder "Akzent". Das Ändern der einen Farbe beeinflusst die andere nicht; wenn deine Links die Textfarbe übernehmen, liegt das daran, dass das Theme absichtlich so konfiguriert wurde.
Ja. Markiere im Rich-Text-Editor für Seiten oder Produktbeschreibungen den Text und nutze das Textfarben-Tool in der Symbolleiste – dadurch werden Inline-Styles nur für diesen Text angewendet. Für die elementgenaue Steuerung innerhalb von Theme-Abschnitten beschreibst du einfach Fudge, was du möchtest ("mache die 'New Arrival'-Überschrift auf der Startseite rot"). Fudge packt den Text in eine Klasse und schreibt das CSS. Manuell: Packe den Text in ein <span class="..."> und sprich es per CSS an.
CSS-Spezifität. Theme-Styles verwenden oft spezifischere Selektoren als eine allgemeine p { color: ... }-Regel. Passe die Spezifität des Themes an oder übertreffe sie (z. B. .product-description p { color: ... }) oder verwende !important sehr sparsam. Überprüfe die DevTools deines Browsers – das Styles-Panel zeigt, welche Regel gewinnt und warum.
Nicht direkt. Aber ein geringer Kontrast zwischen Text und Hintergrund verschlechtert den Accessibility-Score (WCAG), den Google als weiches Ranking-Signal nutzt. Ziele auf einen Kontrast von mindestens 4,5:1 für Fließtext ab. Verwende ein Contrast-Checker-Tool, bevor du drastische Farbänderungen veröffentlichst.
