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.
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.
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
Klicken Sie in den Theme-Einstellungen auf Typografie. Sie sehen dort Schriftwähler für:
- Überschriften – H1 bis H3 in Ihrem gesamten Store
- Fließtext – Absätze, Beschriftungen, Produktbeschreibungen
Klicken Sie neben der jeweiligen Schriftrolle auf Ändern. Die Schriftarten-Bibliothek von Shopify öffnet sich und zeigt Google Fonts, System-Schriftarten sowie von Shopify kuratierte Favoriten.
Suchen oder browsen Sie nach Namen, klicken Sie für eine Vorschau und dann auf Auswählen. Speichern Sie die Änderungen ab.
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.
So überschreiben Sie spezifische Farben und Schriftarten mit CSS
Wenn eine Farbe oder Schriftart nicht in den Theme-Einstellungen verfügbar ist, verwenden Sie benutzerdefiniertes CSS.
Gehen Sie zu Theme-Einstellungen → scrollen Sie zu Benutzerdefiniertes CSS. Fügen Sie Ihre Overrides hinzu:
/* Benutzerdefinierte Farbe 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;
}Finden Sie die richtige CSS-Klasse, indem Sie mit der rechten Maustaste auf ein Element in Ihrem Live-Store klicken → Untersuchen (Inspect).
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.
Markenänderungen konsistent umsetzen
Wenn Sie Farben und Schriftarten aktualisieren, prüfen Sie auch diese Stellen, um Konsistenz zu gewährleisten:
- E-Mail-Benachrichtigungen – Shopify Admin → Einstellungen → Benachrichtigungen verwendet separate Branding-Einstellungen, die unabhängig von Ihrem Theme sind.
- Checkout – Shopify Admin → Einstellungen → Checkout → Checkout anpassen hat sein eigenes Branding-Panel.
- Onlineshop → Konfiguration – steuert Metadaten; zwar kein Styling, aber einen Blick wert.
Der Theme-Editor steuert ausschließlich Ihre Storefront. Das Branding für Checkout und E-Mails wird separat konfiguriert.
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.
