So aktualisieren Sie Farben und Schriftarten in Shopify (2026)

Das Wichtigste in Kürze

• Sowohl Farben als auch Schriftarten werden im Theme-Editor unter Theme-Einstellungen gesteuert – für Standardänderungen ist kein Code erforderlich.
• Farben findest du unter Theme-Einstellungen → Farben. Schriftarten unter Theme-Einstellungen → Typografie.
• Moderne Themes nutzen Farbschemata, die du pro Abschnitt zuweisen kannst. Das gibt dir mehr Kontrolle über den visuellen Rhythmus.
• Für Farben und Schriftarten, die nicht in den Theme-Einstellungen anpassbar sind, übernehmen Custom CSS oder Fudge das Override.

Das Aktualisieren der Markenfarben und Schriftarten ist eines der ersten Dinge, die die meisten Händler tun, wenn sie einen Shopify-Store einrichten oder überarbeiten. Beides befindet sich am selben Ort – im Bereich Theme-Einstellungen des Theme-Editors.

Warum Sie uns vertrauen können

Jacques hat über 15 Jahre Erfahrung in der Shopify-Entwicklung. Wir haben Fudge entwickelt – einen KI-Storefront-Editor, der von hunderten Shopify-Stores genutzt wird und eine Bewertung von 4.8 im Shopify App Store hat.

Wo man Farb- und Schriftarten-Einstellungen in Shopify findet

Schritt 1. Gehe zu Onlineshop → Themes → Anpassen.

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

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

• Farben (oder “Farbschemata”) - für die Einstellungen deiner Markenpalette
• Typografie (oder “Schriftarten”) - für die Einstellungen von Schriftart und -größe

Diese beiden Bereiche steuern das globale Erscheinungsbild deiner gesamten Storefront.

So ändern Sie die Farben in Shopify

Klicken Sie in den Theme-Einstellungen auf Farben. Dort finden Sie Farbwähler für:

• Hintergrundfarben – Seiten- und Abschnittshintergründe
• Textfarben – Überschriften und Fließtext
• Button-Farben – Füllungen und Text für primäre und sekundäre Buttons
• Rahmen- und Akzentfarben – Trennlinien, Eingabeumrandungen, Badges

Klicken Sie auf ein Farbfeld und geben Sie Ihren Hex-Code ein (z. B. #1A1A2E). Die Änderungen werden global für Ihren gesamten Store angewendet.

Verwandt: Fudge Store Editor.

Farbschemata (moderne Themes). Themes wie Dawn und Horizon verwenden benannte Farbschemata anstelle einzelner globaler Farben. Jedes Schema ist ein abgestimmtes Set aus Hintergrund-, Text- und Button-Farben. Sie definieren die Schemata in den Theme-Einstellungen und weisen sie dann einzelnen Abschnitten zu. So können Sie zwischen hellen und dunklen Abschnitten abwechseln, ohne die Farben für jedes Element einzeln festlegen zu müssen.

So ändern Sie die Schriftarten in Shopify

Klicke in den Theme-Einstellungen auf Typografie. Du siehst Font-Picker für:

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

Klicke neben einer der Schriftrollen auf Ändern. Die Schriftbibliothek von Shopify öffnet sich und zeigt Google Fonts, Systemschriftarten und von Shopify kuratierte Auswahlmöglichkeiten.

Durchsuche die Liste oder nutze die Suche, klicke für eine Vorschau und klicke dann auf Auswählen. Speichere deine Änderungen, wenn du fertig bist.

Passend dazu: Schriftgröße der Überschriften in Shopify ändern.

So ändern Sie die Schriftfarben in Shopify

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

Suchen Sie unter Theme-Einstellungen → Farben nach dem Feld für die Textfarbe. Dies steuert die Fließtextfarbe global. Die Farbe der Überschriften kann ein separates Feld sein – suchen Sie im selben Panel nach „Überschriftenfarbe“ oder „Überschriftentext“.

Für individuelle Overrides pro Abschnitt klicken Sie im Theme-Editor auf den jeweiligen Abschnitt → suchen Sie in den Abschnitts-Einstellungen nach einem Farbschema-Wähler. Wenn Sie den Abschnitt auf ein anderes Farbschema umstellen, ändern sich Hintergrund- und Textfarbe gemeinsam.

Verwandt: Change Heading Font Size in Shopify.

Verwandt: Change Font Color in Shopify.

So überschreiben Sie spezifische Farben und Schriftarten mit CSS

Wenn eine Farbe oder Schriftart in den Theme-Einstellungen nicht verfügbar ist, nutze Custom CSS.

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

/* Custom heading font color */
h1,
h2,
h3 {
    color: #1a1a2e;
}

/* Custom link color */
a {
    color: #e63946;
}

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

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

Verwandt: Schriftarten in Shopify aktualisieren.

Weitere Details findest du in unserem Guide zum Aktualisieren von Markenfarben in Shopify.

So verwenden Sie eigene Schriftarten, die nicht in der Shopify-Bibliothek sind

Für gekaufte oder eigene Markenschriftarten müssen die Schriftdateien in die Assets Ihres Themes hochgeladen werden:

1. Laden Sie .woff2- und .woff-Dateien über Onlineshop → Themes → Aktionen → Code bearbeiten → Ordner „Assets“ hoch.
2. Fügen Sie eine @font-face-Regel in Ihr CSS ein.
3. Weisen Sie die Schriftart den Überschriften und Fließtext-Elementen zu.

Dies erfordert CSS-Kenntnisse. Die Alternative ist, es Fudge zu beschreiben: „Implementiere unsere Markenschriftart [Name] für Überschriften und [Name] für Fließtext. Die Dateien sind im Assets-Ordner hochgeladen.“ Fudge erstellt die Deklarationen und wendet sie als Entwurf an.

Verwandt: Update Fonts in Shopify.

Markenänderungen konsistent umsetzen

Überprüfe beim Aktualisieren von Farben und Schriften diese Bereiche, um sicherzustellen, dass die Änderungen konsistent sind:

• E-Mail-Benachrichtigungen - Shopify Admin → Einstellungen → Benachrichtigungen nutzt separate Branding-Einstellungen unabhängig von deinem Theme
• Checkout - Shopify Admin → Einstellungen → Checkout → Checkout anpassen hat einen eigenen Branding-Bereich
• Onlineshop → Konfiguration - steuert Metadaten; zwar kein Styling, aber einen Blick wert

Der Theme-Editor steuert ausschließlich dein Storefront-Design. Checkout- und E-Mail-Branding werden separat konfiguriert.

Passend dazu: Fudge Store Editor.

Passend dazu: Dein Shopify-Theme bearbeiten.

Passend dazu: Schriftfarbe in Shopify ändern.

Passend dazu: Linkfarbe in Shopify ändern.

Passend dazu: Markenfarben in Shopify aktualisieren.

Fudge für einen kompletten Marken-Refresh nutzen

Wenn du eine neue Farbpalette und ein neues Typografie-System für dein gesamtes Theme übernehmen willst – einschließlich der Elemente, die der Theme Editor nicht anzeigt –, beschreibe die komplette Änderung einfach für Fudge:

„Wende unser neues Branding an: Primärfarbe #1A1A2E, Akzentfarbe #E63946, Hintergrund #FAFAFA. Überschriften in Canela Display, Fließtext in Inter. Konsistent auf Buttons, Hover-States, Abschnitts-Hintergründe und Badges anwenden.“

Fudge generiert die kompletten CSS-Updates als Entwurf. Du kannst alles überprüfen, bevor irgendetwas live geht.

FAQ