Das Wichtigste in Kürze
- Die globale Textfarbe wird im Theme-Editor > Theme-Einstellungen > Farben festgelegt.
- Die meisten Themes haben ein Farbfeld „Text“, das die grundlegende Schriftfarbe für die gesamte Website steuert.
- Farbüberschreibungen pro Abschnitt sind in einigen Themes über die Abschnittseinstellungen verfügbar.
- Benutzerdefinierte Farben für spezifische Elemente erfordern CSS im Assets-Ordner deines Themes.
- Fudge kann gezielte Farbänderungen basierend auf einer einfachen Textbeschreibung anwenden.
Das Ändern der Schriftfarbe in Shopify erfolgt meist über die Farbeinstellungen im Theme-Editor. Für alles, was über die globale Farbpalette hinausgeht, benötigst du CSS. Hier erfährst du, wie beides funktioniert.
Warum Sie uns vertrauen können
Wir haben hunderte Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer 5.0-Bewertung 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 eine präzise Steuerung – eine spezifische Farbe für Überschriften, ein farbiger Call-out-Block, die Textfarbe eines einzelnen Elements – benötigen Sie CSS.
Schritt 1. Duplizieren Sie zuerst Ihr Theme. Gehen Sie zu Onlineshop > Themes > Aktionen > Duplizieren.
Schritt 2. Gehen Sie bei Ihrem aktiven Theme auf Aktionen > Code bearbeiten.
Schritt 3. Öffnen Sie Assets > base.css (oder das Haupt-Stylesheet Ihres Themes).
Schritt 4. Fügen Sie am Ende der Datei eine CSS-Regel hinzu. Zum Beispiel:
/* Ändert den gesamten Absatztext in ein dunkles Grau */
p { color: #333333; }
/* Ändert H2-Überschriften in eine Markenfarbe */
h2 { color: #1a4b8c; }
/* Ändert den Text innerhalb eines bestimmten Bereichs */
.section-announcement-bar { color: #ffffff; }Schritt 5. Klicken Sie 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 Body-Textfarbe ändern | Theme-Einstellungen > Farben > Text |
| Farbe pro Abschnitt ändern | Abschnittseinstellungen > Farbschema |
| Farbe eines bestimmten Elements ändern | CSS in assets/base.css |
| Spezifischen 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?
Gehe zu Theme-Einstellungen → Farben (oder Farbschemata in modernen Themes wie Dawn). Klicke auf ein beliebiges Farbfeld, um den Color Picker zu öffnen und deinen Hex-Code einzugeben. Für Farben, die im Theme Editor nicht verfügbar sind – wie Icon-Farben oder Hover-States – musst du sie per CSS hinzufügen. In unserem Guide zum Aktualisieren von Markenfarben in Shopify findest du den kompletten Prozess.
FAQ
Zwei häufige Ursachen: Du hast einen Theme-Entwurf 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 festlegen – ändere das Schema des Abschnitts oder aktualisiere jedes Farbschema, das in Verwendung ist.
Die Schriftfarbe steuert den Fließtext und die Überschriften. Die Linkfarbe steuert Anchor-Tags (<a>) und wird separat festgelegt – meist in den Theme-Einstellungen → Farben unter "Link" oder "Akzent" (Accent). Wenn du eine Farbe änderst, hat das keine Auswirkungen auf die andere; wenn deine Links die Textfarbe übernehmen, liegt das daran, dass das Theme dies absichtlich so festgelegt hat.
Ja. Im Rich-Text-Editor für Seiten oder Produktbeschreibungen markierst du den Text und nutzt das Textfarben-Tool in der Werkzeugleiste – das wendet Inline-Styles nur auf diesen konkreten Text an. Für die elementgenaue Kontrolle in Theme-Abschnitten beschreibst du einfach in Fudge, was du willst ("Mach die 'New Arrival'-Überschrift auf der Startseite rot"). Fudge packt den Text in eine Klasse und schreibt das CSS für dich. Manuell: Wickle den Text in ein <span class="..."> und spreche ihn im CSS an.
Wegen der CSS-Spezifität. Theme-Styles verwenden oft spezifischere Selektoren als eine generische p { color: ... }-Regel. Du musst die Spezifität des Themes entweder erreichen oder übertreffen (z. B. .product-description p { color: ... }) oder !important sehr sparsam verwenden. Prüfe deine Browser-DevTools – das Styles-Panel zeigt, welche Regel gewinnt und warum.
Nicht direkt. Aber ein zu geringer Kontrast zwischen Text und Hintergrund verschlechtert deine Accessibility-Scores (WCAG), was Google als weiches Ranking-Signal nutzt. Ziele auf ein Kontrastverhältnis von mindestens 4,5:1 für Fließtext ab. Nutze ein Contrast-Checker-Tool, bevor du auffällige Farbänderungen live nimmst.
