Das Wichtigste auf einen Blick
- Die globale Textfarbe wird im Theme-Editor unter Theme-Einstellungen > Farben festgelegt.
- Die meisten Themes haben ein Farbfeld für „Text“, das die Basis-Schriftfarbe auf der gesamten Website steuert.
- Farbanpassungen pro Abschnitt sind in einigen Themes über die Abschnittseinstellungen verfügbar.
- Benutzerdefinierte Farben für bestimmte Elemente erfordern CSS im Assets-Ordner Ihres Themes.
- Fudge kann gezielte Farbänderungen anhand einer einfachen Beschreibung auf Englisch anwenden.
Das Ändern der Schriftfarbe in Shopify erfolgt hauptsächlich über die Farbeinstellungen des Theme-Editors. Für alles, was über die globale Palette hinausgeht, benötigen Sie CSS. Hier erfahren Sie, wie Sie beides umsetzen.
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 individuelle Farbschemata pro Sektion, die die globale Textfarbe überschreiben. In modernen Themes (Dawn, Sense, Refresh) kann jede Sektion ihr eigenes Schema festlegen – ändere also das jeweilige Schema der Sektion oder aktualisiere jedes Farbschema, das verwendet wird.
Die Schriftfarbe steuert den Body- und den Überschriften-Text. Die Linkfarbe steuert Anker-Tags (<a>) und wird separat eingestellt – meist unter Theme-Einstellungen → Farben bei „Link“ oder „Akzent“. Wenn du das eine änderst, hat das keinen Einfluss auf das andere. Wenn deine Links die Body-Textfarbe übernehmen, liegt das daran, dass das Theme dies bewusst so eingestellt hat.
Ja. Wähle im Rich-Text-Editor für Seiten oder Produktbeschreibungen den Text aus und nutze das Textfarben-Tool in der Toolbar – das wendet Inline-Styles nur auf diesen konkreten Text an. Für eine elementgenaue Steuerung innerhalb von Theme-Sektionen beschreibst du einfach, was du möchtest, an Fudge („mach die 'New Arrival'-Überschrift auf der Startseite rot“). Fudge verpackt den Text in eine Klasse und schreibt das passende CSS für dich. Manuell: Packe den Text in ein <span class="..."> und sprich ihn per CSS an.
CSS-Spezifität (Specificity). Theme-Styles verwenden oft spezifischere Selektoren als eine einfache p { color: ... }-Regel. Du musst die Spezifität des Themes entweder erreichen oder übertreffen (z. B. .product-description p { color: ... }) oder !important sehr sparsam einsetzen. Prüfe das in deinen Browser-DevTools – das Styles-Panel zeigt dir, welche Regel gewinnt und warum.
Nicht direkt. Aber ein zu geringer Kontrast zwischen Text und Hintergrund verschlechtert deine Accessibility-Werte (Barrierefreiheit gemäß WCAG), die Google als weiches Ranking-Signal heranzieht. Ziele auf ein Kontrastverhältnis von mindestens 4,5:1 für normalen Body-Text ab. Nutze ein Contrast-Checker-Tool, bevor du mutige Farbänderungen veröffentlichst.
