So aktualisieren Sie Farben und Schriftarten in Shopify (2026)

Wichtigste Erkenntnisse

• 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 verwenden Farbschemata, die du pro Abschnitt zuweisen kannst, was dir mehr Kontrolle über den visuellen Rhythmus gibt.
• Für Farben und Schriftarten, die in den Theme-Einstellungen nicht verfügbar sind, übernimmt benutzerdefiniertes CSS oder Fudge die Anpassung.

Die Aktualisierung von Markenfarben und Schriftarten gehört zu den ersten Dingen, die die meisten Händler tun, wenn sie einen Shopify-Store einrichten oder überarbeiten. Beides befindet sich am selben Ort – im Panel 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.9 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

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

• E-Mail-Benachrichtigungen - Shopify Admin → Einstellungen → Benachrichtigungen verwendet separate Branding-Einstellungen, unabhängig von deinem Theme
• Checkout - Shopify Admin → Einstellungen → Checkout → Checkout anpassen hat ein eigenes Branding-Panel
• Onlineshop → Konfigurationen - steuert Metadaten; zwar kein Styling, aber einen Blick wert

Der Theme Editor steuert nur deine Storefront. Das Branding für Checkout und E-Mails wird separat konfiguriert.

Verwandt: Fudge Store Editor.

Verwandt: Dein Shopify-Theme bearbeiten.

Verwandt: Schriftfarbe in Shopify ändern.

Verwandt: Linkfarbe in Shopify ändern.

Verwandt: Markenfarben in Shopify aktualisieren.

Fudge für einen kompletten Marken-Refresh nutzen

Wenn du eine neue Farbpalette und Typografie auf dein gesamtes Theme anwenden möchtest – einschließlich Elementen, die der Theme Editor nicht anzeigt –, beschreibe die gesamte Änderung einfach für Fudge:

“Wende unsere neue Marke an: Primärfarbe #1A1A2E, Akzentfarbe #E63946, Hintergrund #FAFAFA. Überschriften in Canela Display, Fließtext in Inter. Wende dies konsistent auf Buttons, Hover-Zustände, Abschnittshintergründe und Badges an.”

Fudge generiert die kompletten CSS-Updates als Entwurf. Du überprüfst alles, bevor es live geht.

FAQ