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 Basis-Textfarbe in Ihrem gesamten Shop.
Schritt 1. Gehen Sie zu Onlineshop > Themes > Anpassen.
Schritt 2. Scrollen Sie in der linken Seitenleiste ganz nach unten und klicken Sie auf Theme-Einstellungen.
Schritt 3. Öffnen Sie den Bereich Farben.
Schritt 4. Suchen Sie das Farbfeld Text (manchmal auch als „Body-Text“ oder „Vordergrund“ bezeichnet). Klicken Sie darauf, um den Color-Picker zu öffnen.
Schritt 5. Geben Sie einen Hex-Code ein, nutzen Sie den Color-Picker oder passen Sie die Schieberegler an, um Ihre gewünschte Farbe festzulegen.
Schritt 6. Klicken Sie auf Speichern.
Dies aktualisiert die Standard-Textfarbe überall dort, wo Ihr Theme die CSS-Variable --color-foreground oder eine ähnliche Variable verwendet.
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
Klicken Sie mit der rechten Maustaste auf das Element in Ihrem Browser, wählen Sie Untersuchen und schauen Sie sich die Klassennamen des Elements im HTML-Panel an. Verwenden Sie diese Klassen als Ihre CSS-Selectoren.
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?
Gehen Sie zu Theme-Einstellungen → Farben (oder Farbschemata in modernen Themes wie Dawn). Klicken Sie auf ein beliebiges Farbfeld, um den Picker zu öffnen, und geben Sie Ihren Hex-Code ein. Farben, die nicht im Theme-Editor verfügbar sind – wie Icon-Farben oder Hover-Zustände – müssen über CSS hinzugefügt werden. In unserem Leitfaden zum Aktualisieren von Markenfarben in Shopify finden Sie den vollständigen Prozess.
