Das Wichtigste auf einen Blick
- Markenfarben finden Sie im Theme-Editor unter Theme-Einstellungen → Farben. Änderungen hier gelten global für Ihren gesamten Store.
- Moderne Shopify-Themes (Dawn, Horizon) nutzen Farbschemata – benannte Paletten, die Sie pro Abschnitt zuweisen können, um mehr Flexibilität zu erhalten.
- Für Farben, die Ihr Theme nicht in den Einstellungen anzeigt, sind CSS Custom Properties oder ein direkter Code-Override erforderlich.
- Fudge kann eine benutzerdefinierte Farbpalette auf Ihr gesamtes Theme anwenden, ohne dass Sie CSS schreiben müssen.
Egal, ob Sie Ihr Branding auffrischen oder zum ersten Mal live gehen: Das Aktualisieren von Farben in Shopify ist größtenteils eine No-Code-Aufgabe. Hier erfahren Sie, wo Sie die Steuerelemente finden und wie Sie das Beste aus ihnen herausholen.
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-Storefront-Editor, der von Hunderten von Shopify-Stores genutzt wird und im Shopify App Store mit 5,0 Sternen bewertet wurde.
Wo man Markenfarben in Shopify aktualisiert
Schritt 1. Gehen Sie zu Onlineshop → Themes → Anpassen.
Schritt 2. Scrollen Sie in der linken Seitenleiste ganz nach unten und klicken Sie auf Theme-Einstellungen.
Schritt 3. Klicken Sie auf Farben (einige Themes nennen diesen Bereich „Farbschemata“ oder „Palette“).
Schritt 4. Sie sehen Farbwähler für Elemente wie:
- Hintergrundfarbe
- Textfarbe
- Schaltflächenfarbe und Schaltflächen-Textfarbe
- Rahmenfarbe
- Linkfarbe
- Farbe für Sale-Badges
Schritt 5. Klicken Sie auf ein Farbfeld, um den Farbwähler zu öffnen. Geben Sie direkt einen Hex-Code ein (z. B. #E63946) oder wählen Sie eine Farbe visuell aus.
Schritt 6. Speichern Sie Ihre Änderungen. Die Anpassungen werden sofort auf allen Seiten übernommen.
Wie ändere ich die Markenfarben bei Shopify?
Geben Sie Ihre exakten Marken-Hex-Codes in die Farbwähler-Felder ein. Der Farbwähler von Shopify akzeptiert:
- Hex-Codes –
#FF5733 - RGB-Werte –
rgb(255, 87, 51) - HSL-Werte – über den visuellen Schieberegler
Nutzen Sie Hex-Codes für höchste Genauigkeit. Ihre Brand Guidelines sollten die exakten Hex-Werte für Primär-, Sekundär- und Akzentfarben festlegen.
Wie Farbschemata in modernen Shopify-Themes funktionieren
Themes wie Dawn und Horizon verwenden ein Farbschema-System anstelle einzelner globaler Farbwerte.
Ein Farbschema ist ein benanntes Set aus Hintergrund-, Text- und Buttonfarben – zum Beispiel: „Schema 1 = weißer Hintergrund mit dunklem Text“, „Schema 2 = dunkler Hintergrund mit hellem Text“.
Jedem Abschnitt kann ein anderes Farbschema zugewiesen werden. So können Sie die visuelle Gewichtung auf der Seite variieren, ohne Farben einzeln einstellen zu müssen.
So bearbeiten Sie ein Farbschema: Theme-Einstellungen → Farbschemata → Klicken Sie auf das Schema, das Sie bearbeiten möchten → Aktualisieren Sie die Farbwerte.
So weisen Sie einem Abschnitt ein Schema zu: Klicken Sie im Theme-Editor auf den Abschnitt → Suchen Sie in den Einstellungen nach dem Dropdown-Menü Farbschema.
Wo navigiert man in Shopify hin, um die Markenfarben zu aktualisieren?
Der vollständige Pfad lautet: Onlineshop → Themes → Anpassen → Theme-Einstellungen → Farben.
Einige Themes bieten auch Farbeinstellungen auf Abschnittsebene an. Klicken Sie auf einen beliebigen Abschnitt → Suchen Sie im Einstellungsbereich nach einer Option für „Farbschema“ oder „Hintergrundfarbe“. Farben auf Abschnittsebene überschreiben die globalen Standardeinstellungen nur für diesen spezifischen Abschnitt.
So überschreiben Sie Farben mit CSS (Code Overrides)
Wenn eine Farbe nicht in den Theme-Einstellungen verfügbar ist – wie z. B. eine spezifische Icon-Farbe, ein Hover-Zustand oder ein Element einer Drittanbieter-App – können Sie diese mit individuellem CSS überschreiben.
Gehen Sie zu Theme-Einstellungen → scrollen Sie zu Benutzerdefiniertes CSS → fügen Sie Ihren Override hinzu:
.your-element-class {
color: #E63946;
background-color: #FFFFFF;
}Um die richtige CSS-Klasse zu finden: Klicken Sie mit der rechten Maustaste auf das Element in Ihrem Live-Store → Untersuchen (Inspect) → prüfen Sie die Klassen-Attribute des Elements.
So wenden Sie mit Fudge eine komplette Marken-Farbpalette an
Wenn Sie ein Rebranding durchführen und eine neue Farbpalette konsistent auf Buttons, Überschriften, Banner, Badges und Hover-Zustände anwenden möchten – und nicht nur auf die Farben, die Ihr Theme in den Einstellungen anbietet – beschreiben Sie dies Fudge:
„Aktualisiere den Store auf unsere Markenfarben: Primärfarbe #1A1A2E, Akzentfarbe #E63946, Hintergrund #FAFAFA und Button-Text weiß. Wende dies konsistent auf Buttons, Links und Abschnittshintergründe an.“
Fudge erstellt die Änderungen als Entwurf. Sie prüfen alles, bevor es live geht.
Tipps zur Auswahl von Shopify-Markenfarben
- Halten Sie es einfach. Zwei bis drei Kernfarben reichen meist aus. Eine Primärfarbe für CTAs und Überschriften, eine Sekundärfarbe für Akzente und eine neutrale Farbe für Hintergründe.
- Kontrast prüfen. Text benötigt ausreichend Kontrast zum Hintergrund, um lesbar und barrierefrei zu sein. Nutzen Sie ein Tool wie den WebAIM Contrast Checker zur Überprüfung.
- In der mobilen Vorschau testen. Farbentscheidungen, die auf einem breiten Desktop-Layout ausgewogen wirken, können auf einem kleinen Smartphone-Display erdrückend sein. Prüfen Sie immer beide Ansichten.
