Das Wichtigste auf einen Blick

Sowohl Farben als auch Schriftarten werden im Theme-Editor unter Theme-Einstellungen gesteuert – für Standardänderungen ist kein Code erforderlich.

Farben finden Sie unter Theme-Einstellungen → Farben. Schriftarten finden Sie unter Theme-Einstellungen → Typografie.

Moderne Themes verwenden Farbschemata, die Sie pro Abschnitt zuweisen können, was Ihnen mehr Kontrolle über den visuellen Rhythmus gibt.

Für Farben und Schriftarten, die nicht in den Theme-Einstellungen verfügbar sind, können benutzerdefiniertes CSS oder Fudge das Override übernehmen.

Das Aktualisieren von 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 Panel Theme-Einstellungen des Theme-Editors.

Warum Sie uns vertrauen können

Jacques verfügt über mehr als 15 Jahre Erfahrung in der Shopify-Entwicklung. Wir haben Fudge entwickelt – einen KI-basierten Storefront-Editor, der von Hunderten von Shopify-Stores genutzt wird und im Shopify App Store mit 5,0 Sternen bewertet wurde.

Wo man Farb- und Schriftarten-Einstellungen in Shopify findet

Schritt 1. Gehen Sie zu Onlineshop → Themes → Anpassen.

Schritt 2. Scrollen Sie in der linken Seitenleiste nach unten und klicken Sie auf Theme-Einstellungen.

Schritt 3. Sie sehen nach Kategorien gruppierte Einstellungen. Suchen Sie nach:

Farben (oder „Farbschemata“) – für die Einstellungen der Markenpalette
Typografie (oder „Schriftarten“) – für Schriftfamilien- und Größeneinstellungen

Diese beiden Abschnitte steuern das globale Erscheinungsbild Ihres gesamten Online-Shops.

Verwandt: Edit Your Shopify Theme.

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 nicht in den Theme-Einstellungen verfügbar ist, kannst du Custom CSS verwenden.

Gehe zu den Theme-Einstellungen → scrolle zu Custom CSS. Füge deine Overrides 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 heraus, indem du mit der rechten Maustaste auf ein Element in deinem Live-Store klickst → Untersuchen.

Du brauchst ein komplettes Marken-Update? Beschreibe Fudge deine Farbpalette und Schriften.

Try Fudge for Free

Passend dazu: Schriftarten in Shopify aktualisieren.

Weitere Details findest du in unserem Guide zum Thema Markenfarben in Shopify aktualisieren.

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:

Laden Sie .woff2- und .woff-Dateien über Onlineshop → Themes → Aktionen → Code bearbeiten → Ordner „Assets“ hoch.
Fügen Sie eine @font-face-Regel in Ihr CSS ein.
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 Sie eine neue Farbpalette und ein neues Typografie-System auf Ihr gesamtes Theme anwenden möchten – einschließlich Elementen, die der Theme-Editor nicht anzeigt –, beschreiben Sie die gewünschte Änderung einfach Fudge:

„Wende unser neues Branding an: Primärfarbe #1A1A2E, Akzent #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 vollständigen CSS-Updates als Entwurf. Sie überprüfen alles, bevor es live geht.

Verwandt: Change Link Color in Shopify.

Verwandt: Update Brand Colors in Shopify.