Wie du Farben und Schriftarten in Shopify aktualisierst (2026)

Das Wichtigste in Kürze

• Sowohl Farben als auch Schriftarten werden im Theme-Editor unter Theme-Einstellungen (Theme settings) gesteuert - für Standardänderungen ist kein Code erforderlich.
• Farben findest du unter Theme-Einstellungen → Farben (Colors). Schriftarten findest du unter Theme-Einstellungen → Typografie (Typography).
• Moderne Themes verwenden Farbschemata, die du pro Abschnitt (Section) zuweisen kannst, was dir mehr Kontrolle über den visuellen Rhythmus gibt.
• Für Farben und Schriftarten, die nicht in den Theme-Einstellungen verfügbar sind, übernimmt benutzerdefiniertes CSS oder Fudge die Überschreibung.

Um Farben und Schriftarten in Shopify zu aktualisieren, gehe zu Onlineshop → Themes → Anpassen → Theme-Einstellungen: Farben findest du unter Farben, Schriftarten unter Typografie.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Erfahrung in der Shopify-Entwicklung. Wir entwickeln Fudge, den KI-Operator für Shopify-Stores, mit einer Bewertung von 4.9 im Shopify App Store.

Wo du die Farb- und Schriftarteinstellungen in Shopify findest

Schritt 1. Gehe zu Onlineshop → Themes → Anpassen (Customize).

Schritt 2. Scrolle in der linken Seitenleiste nach unten und klicke auf Theme-Einstellungen (Theme settings).

Schritt 3. Du siehst Einstellungen, die nach Kategorien gruppiert sind. Suche nach:

• Farben (Colors oder Farbschemata) – für die Einstellungen der Markenpalette
• Typografie (Typography oder Schriftarten) – für die Einstellungen von Schriftfamilie und -größe

Diese beiden Bereiche steuern das globale Erscheinungsbild deiner gesamten Storefront.

Wie du Farben in Shopify änderst

Klicke in den Theme-Einstellungen auf Farben (Colors). Du findest dort Color Picker (Farbauswähler) für:

• Hintergrundfarben (Background colors) – Hintergründe von Seiten und Abschnitten
• Textfarben (Text colors) – Überschriften und Fließtext
• Button-Farben (Button colors) – Füll- und Textfarben für primäre und sekundäre Buttons
• Rahmen- und Akzentfarben (Border and accent colors) – Trennlinien, Eingabefeld-Umrandungen, Badges

Klicke auf ein Farbfeld und gib deinen Hex-Code ein (z. B. #1A1A2E). Änderungen werden global in deinem gesamten Store angewandt.

Farbschemata (moderne Themes). Themes wie Dawn und Horizon verwenden benannte Farbschemata (Color schemes) anstelle einzelner globaler Farben. Jedes Schema ist ein abgestimmtes Set aus Hintergrund-, Text- und Button-Farben. Du definierst die Schemata in den Theme-Einstellungen und weist sie dann einzelnen Abschnitten (Sections) zu. So kannst du helle und dunkle Abschnitte abwechseln, ohne Farben Element für Element festzulegen.

Wie du Schriftarten in Shopify änderst

Klicke in den Theme-Einstellungen auf Typografie. Du siehst die Schriftart-Auswahl für:

• Überschriften (Headings) - H1 bis H3 in deinem gesamten Store
• Fließtext (Body text) - Absätze, Labels, Produktbeschreibungen

Klicke auf Ändern neben der jeweiligen Schriftart. Die Shopify-Schriftartenbibliothek öffnet sich und zeigt Google Fonts, Systemschriftarten und von Shopify kuratierte Schriftarten an.

Durchsuche die Liste oder suche nach dem Namen, klicke zur Vorschau und dann auf Auswählen. Speichere, wenn du fertig bist.

Informationen zu den Überschriftengrößen findest du unter So änderst du die Schriftgröße von Überschriften in Shopify.

Wie du Schriftfarben in Shopify änderst

Schriftfarben sind Teil der Farben-Einstellungen, nicht der Typografie.

Suche in Theme-Einstellungen → Farben nach dem Farbfeld Text. Dieses steuert die Textfarbe des Fließtexts global. Die Textfarbe für Überschriften kann ein separates Feld sein – suche im selben Panel nach „Heading color“ oder „Heading text“.

Für Überschreibungen in einzelnen Abschnitten klickst du auf den Abschnitt im Theme-Editor → suche in den Abschnittseinstellungen nach einem Selektor für Farbschema (Color scheme). Wenn du den Abschnitt auf ein anderes Farbschema umstellst, ändern sich sowohl Hintergrund- als auch Textfarbe zusammen.

Wie du bestimmte Farben und Schriftarten mit CSS überschreibst

Wenn eine Farbe oder Schriftart nicht in den Theme-Einstellungen verfügbar ist, verwende benutzerdefiniertes CSS (Custom CSS).

Gehe zu den Theme-Einstellungen → scrolle zu Custom CSS. Füge deine Überschreibungen hinzu:

/* Benutzerdefinierte Schriftfarbe für Überschriften */
h1,
h2,
h3 {
    color: #1a1a2e;
}

/* Benutzerdefinierte Linkfarbe */
a {
    color: #e63946;
}

/* Benutzerdefinierter Button-Hintergrund */
.btn-primary,
.button--primary {
    background-color: #e63946;
    color: #ffffff;
}

Finde die richtige CSS-Klasse, indem du mit der rechten Maustaste auf ein Element in deinem Live-Store klickst → Untersuchen (Inspect).

Weitere Details zu den einzelnen Themen findest du unter So aktualisierst du Markenfarben in Shopify, So aktualisierst du Schriftarten in Shopify und So änderst du die Linkfarbe in Shopify.

Wie du Custom Fonts anwendest, die nicht in der Shopify-Bibliothek sind

Für gekaufte oder proprietäre Markenschriftarten müssen die Schriftartdateien in deine Theme-Assets hochgeladen werden:

1. Lade die .woff2- und .woff-Dateien in den Ordner “Assets” hoch: Gehe zu Onlineshop → Themes, klicke auf das Drei-Punkte-Menü (…) neben deinem Theme und dann auf Code bearbeiten.
2. Füge eine @font-face-Regel in dein CSS ein.
3. Wende die Schriftart auf Überschriften und Fließtext an.

Das erfordert CSS-Kenntnisse. Die Alternative ist, es Fudge zu beschreiben: “Implementiere unsere Markenschriftart [Schriftname] für Überschriften und [Schriftname] für Fließtext. Die Dateien sind im Assets-Ordner hochgeladen.” Fudge schreibt den Code und wendet ihn als Entwurf an.

Markenänderungen konsistent durchführen

Wenn du Farben und Schriftarten aktualisierst, solltest du diese Stellen überprüfen, um sicherzustellen, dass die Änderungen konsistent sind:

• E-Mail-Benachrichtigungen - Shopify Admin → Einstellungen → Benachrichtigungen verwendet andere Branding-Einstellungen als dein Theme.
• Checkout - Shopify Admin → Einstellungen → Checkout → Anpassen hat einen eigenen Branding-Bereich.

Der Theme-Editor steuert nur dein Storefront. Checkout- und E-Mail-Branding werden separat konfiguriert.

Fudge für einen kompletten Marken-Refresh nutzen

Wenn du eine neue Farbpalette und ein neues Typografiesystem auf dein gesamtes Theme anwenden möchtest – einschließlich der Elemente, die der Theme-Editor nicht anzeigt –, beschreibe die komplette Änderung einfach Fudge, dem KI-Operator für Shopify-Stores:

“Wende unser neues Branding an: Primärfarbe #1A1A2E, Akzent #E63946, Hintergrund #FAFAFA. Überschriften in Canela Display, Fließtext in Inter. Wende das konsistent auf Buttons, Hover-Zustände, Abschnittshintergründe und Badges an.”

Fudge generiert die kompletten CSS-Updates als Entwurf. Du überprüfst alles, bevor etwas live geht. Dein Team kann sehen, wer die Änderung wann veröffentlicht hat, und die vorherigen Styles bleiben erhalten, falls du sie zurücksetzen musst.

FAQ