Erfolgreich
Farbeinstellungen
Legen Sie die globale Farbpalette des Themes für Hintergründe, Text, Schaltflächen, Banner, Karten und Farbfelder fest.
Die Farbeinstellungen steuern die gemeinsam genutzte Palette, die im gesamten Theme verwendet wird. Da sich diese Entscheidungen auf mehrere Vorlagen, Inhaltsbereiche, Karten, Formulare und interaktive Zustände zugleich auswirken können, ist es hilfreich, sie als abgestimmtes System festzulegen, statt Farben jeweils nur in einem Bereich anzupassen. Für weiteren Einrichtungskontext siehe Shopify-Dokumentation zum Anpassen von Themes
Beginnen Sie mit der Auswahl Ihrer Hauptflächen und Textfarben und bauen Sie dann darauf aufbauend Stile für Schaltflächen, Banner und Karten auf. Hinweise zur Barrierefreiheit finden Sie in der Company XYZ-Dokumentation zu Hinweisen zur Barrierefreiheit bei Farbeinstellungen.
Hintergründe
Abschnitt betitelt „Hintergründe“Hintergrundfarben bilden die Basisflächen für das Theme. Die Hintergrundfarbe des Body legt die gesamte Seitenwirkung fest, während der alternative Hintergrund hilft, Inhaltsbereiche voneinander zu trennen, ohne schwerere Rahmen oder stärkere visuelle Effekte zu benötigen.
Verläufe können Tiefe verleihen, sollten aber den Text nicht schwerer lesbar machen. Prüfen Sie Überschriften, Absatztext und Karten überall dort, wo der Verlauf erscheinen kann, damit der gesamte Farbbereich nutzbar bleibt.
Hintergrundänderungen wirken global. Eine Farbe, die in einem Bereich edel wirkt, kann in anderen Vorlagen oder Inhaltsabschnitten den Textkontrast verringern.
Texteinstellungen prägen das zentrale Leseerlebnis im gesamten Theme. Verwenden Sie Farben für Überschriften und Fließtext, die zusammenpassen, aber klar unterscheidbar sind, und wählen Sie dann Linkfarben, die sich leicht als interaktiv erkennen lassen.
Hover-Farben sollten eine klare Reaktion erzeugen, ohne Links im umgebenden Text verschwinden zu lassen. Wenn Standard- und Hover-Zustände zu ähnlich aussehen, merken Kundinnen und Kunden möglicherweise nicht, dass ein Link anklickbar ist.
Primäre Schaltflächen
Abschnitt betitelt „Primäre Schaltflächen“Farben für primäre Schaltflächen sollten die Hauptaktion in der Oberfläche hervorheben. Diese sind typischerweise die stärksten Aktionsstile im Theme, daher sollten Hintergrund, Rahmen und Text zusammenarbeiten, damit sie auf jeder Fläche sichtbar bleiben, auf der sie erscheinen.
Hover-Stile sollten sich wie ein klarer Interaktionszustand anfühlen, nicht wie ein völlig anderer Schaltflächenstil. Kleine, gezielte Änderungen wirken meist eleganter als dramatische Anpassungen.
Sekundäre Schaltflächen
Abschnitt betitelt „Sekundäre Schaltflächen“Sekundäre Schaltflächen unterstützen nachrangige Aktionen und sollten deutlich weniger prominent wirken als primäre Schaltflächen. Sie sollten dennoch bewusst gestaltet und nutzbar wirken, besonders wenn sie neben stärkeren Handlungsaufforderungen angezeigt werden.
Ein guter sekundärer Stil schafft Hierarchie, ohne deaktiviert zu wirken. Prüfen Sie Stellen, an denen beide Schaltflächentypen zusammen erscheinen, um sicherzustellen, dass die Hauptaktion weiterhin klar erkennbar bleibt.
Bannereinstellungen steuern große werbliche und bildgestützte Inhaltsbereiche, einschließlich Hintergrund, Rahmen, Überschrift, Symbol, Text und Overlay-Darstellung. Diese Entscheidungen haben eine starke visuelle Wirkung, da Banner häufig Text mit Medien kombinieren und an prominenten Positionen erscheinen.
Bannertext kann auf die Bannertextfarbe zurückfallen, wenn keine spezifischeren Textfarben festgelegt sind. Daher lohnt es sich, Banner mit unterschiedlichen Inhaltskombinationen zu prüfen. Overlay-Farbe, Verlauf und Deckkraft helfen, die Lesbarkeit über Bildern hinweg zu erhalten und dennoch das Medium durchscheinen zu lassen.
Legen Sie Banner-Overlays anhand der tatsächlichen Bilder fest, die Sie verwenden. Ein Overlay, das auf einem dunklen Bild gut funktioniert, kann auf einem hellen oder unruhigen Bild zu schwach sein.
Karteneinstellungen definieren kleinere Inhaltsflächen, die in Rastern und unterstützenden Inhaltsbereichen verwendet werden. Verwenden Sie sie, um gruppierte Inhalte vom umliegenden Seitenhintergrund zu trennen und gleichzeitig die Gesamtpalette stimmig zu halten.
Wenn Karten auf alternativen Hintergründen erscheinen, stellen Sie sicher, dass Kartenhintergrund und Rahmen weiterhin genügend visuelle Abgrenzung erzeugen. Kartenüberschrift- und Textfarben sollten in dichten Layouts gut erfassbar bleiben.
Symbole
Abschnitt betitelt „Symbole“Symbolfarben beeinflussen kleine visuelle Hinweise in Navigation, Aktionen und unterstützenden UI-Elementen. Hover- und Inaktiv-Zustände helfen dabei, Interaktion und Hierarchie zu vermitteln, ohne sich nur auf Textbeschriftungen zu stützen.
Halten Sie inaktive Symbole dezent, aber dennoch erkennbar. Wenn sie zu schwach dargestellt werden, können nützliche Bedienelemente unzugänglich wirken oder ganz übersehen werden.
Eingabefelder
Abschnitt betitelt „Eingabefelder“Eingabefarben prägen, wie Formulare in Such- und kundenorientierten Formularbereichen wirken. Platzhaltertext sollte dezenter sein als eingegebener Text, aber dennoch gut genug lesbar, um Nutzerinnen und Nutzer vor dem Tippen zu orientieren.
Feldhintergründe und Rahmen sollten Eingabefelder klar vom Seiteninhalt abheben. Wenn sie mit dem umliegenden Layout verschmelzen, können Formulare schwerer nutzbar wirken.
Verschiedenes
Abschnitt betitelt „Verschiedenes“Diese Einstellungen decken gemeinsam genutzte Oberflächendetails ab, die an vielen Stellen erscheinen. Die Rahmenfarbe hilft, Strukturen zu definieren, die Seiten-Overlay-Farbe beeinflusst Vollseiten-Overlay-Zustände wie aktive Menü-, Suche- oder Mini-Cart-Ansichten, und die Farbe für Sale-Preise hebt reduzierte Preise hervor.
Gehen Sie hier sparsam vor. Rahmen sollten Inhalte ordnen, ohne visuelle Unruhe zu erzeugen, Overlays sollten die Seite abdunkeln, ohne die Lesbarkeit im Vordergrund zu beeinträchtigen, und Sale-Preise sollten hervorstechen, ohne mit Ihren Aktionsfarben zu kollidieren.
Farbfelder
Abschnitt betitelt „Farbfelder“Benutzerdefinierte Farbfelder ermöglichen es Ihnen, Optionsnamen bestimmten Farbwerten zuzuordnen, damit Variant-Farbfelder genauer und konsistenter erscheinen. Dies ist besonders nützlich, wenn Standard-Optionsnamen nicht die gewünschte Farbfeldfarbe erzeugen.
Geben Sie Farbfeld-Definitionen im erwarteten kommagetrennten Format ein, damit Optionswerte korrekt erkannt werden können. Hinweise zur Formatierung und weitere Details zu Varianten finden Sie in der Company XYZ-Dokumentation zu Produktvarianten.
Nutzungshinweise
Abschnitt betitelt „Nutzungshinweise“- Flächen zuerst festlegen. Wählen Sie Body- und Alternativhintergründe, bevor Sie Text, Schaltflächen und Karten anpassen, damit Kontrastentscheidungen konsistent bleiben.
- Kontrast überall prüfen. Prüfen Sie Text, Links, Schaltflächen und Formularfelder auf jedem wichtigen Hintergrund, um Lesbarkeitsprobleme frühzeitig zu erkennen.
- Schaltflächenhierarchie klar halten. Machen Sie primäre Schaltflächen deutlich stärker als sekundäre, damit die Hauptaktion immer leicht zu erkennen ist.
- Banner mit echten Medien testen. Prüfen Sie Bannertext und Overlay-Deckkraft erneut mit den tatsächlichen Bildern, die Sie verwenden möchten, nicht mit Platzhaltergrafiken.
- Globale Nebeneffekte überprüfen. Nachdem Sie gemeinsam genutzte Farben wie Rahmen, Overlays oder Symbole geändert haben, scannen Sie wichtige Vorlagen, um sicherzustellen, dass das Update weiterhin im gesamten Theme funktioniert.
- Beide Viewports prüfen. Farbsteuerungen für Desktop und Mobilgeräte können Layout, Ausrichtung, Sichtbarkeit und Medieneffekt unterschiedlich beeinflussen. Prüfen Sie daher nach Änderungen beide Größen.
- Overrides gezielt einsetzen. Leere Werte oder Werte im Standardstil erhalten in der Regel das Fallback-Styling, während explizite Farben, Verläufe oder Medienauswahlen den Abschnitt eigenständiger machen.
- Medienlastige Bereiche erneut prüfen. Wenn Desktop- und Mobilmedien getrennt konfiguriert werden, bestätigen Sie Zuschnitt, Laden, Fallback-Darstellung und Textlesbarkeit für jede Version.