Farben Ihres Shops ändern

Die optische Gestaltung Ihres Shops ist entscheidend für die Entwicklung Ihrer Brand Identity, auf Deutsch “Markenidentität". In diesem Beitrag erklären wir, wie Sie die Farben Ihres Shops ändern können und beschreiben die verschiedenen Einstellungsmöglichkeiten, damit Sie einen optisch ansprechenden Shop gestalten können.

Vorsicht

Die Farbeinstellungen werden nur auf die aktuell ausgewählte Design-Vorlage angewendet. Wenn Sie die Design-Vorlage ändern, werden die von Ihnen gewählten Farben nicht mehr verwendet. Wenn Sie wieder zu der zuvor gewählten Design-Vorlage wechseln, werden Ihre vorherigen Farbeinstellungen erneut auf Ihren Shop angewendet. Beachten Sie, dass es nicht möglich ist, eine Design-Vorlage auf ihre ursprünglichen Farben zurückzusetzen!

So ändern Sie Farben

  1. Navigieren Sie im Hauptmenü des Administrationsbereichs zu Editor.
  2. Wählen Sie in der Fußleiste ThemeCustomizationIcon.png.
  3. Wählen Sie die gewünschte Farbe aus der Farbpalette oder geben Sie einen Hex-Farbcode ein (z. B. #123456). Eine Vorschau Ihrer Änderungen wird direkt auf der Seite im Hintergrund sichtbar. Weitere Informationen finden Sie unter Erfahren Sie mehr über die Farbeinstellungen.
  4. Wählen Sie Speichern.

Sie haben die Farben Ihres Shops geändert.

Farben in Ihrem Shop

Abhängig von der von Ihnen gewählten Design-Vorlage können Sie unterschiedliche Farbeinstellungen vornehmen. Daher sind einige der folgenden Optionen in Ihrem Editor möglicherweise nicht verfügbar. Beachten Sie auch, dass die verschiedenen Optionen je nach Design-Vorlage eine etwas andere Auswirkung auf verschiedene Teile Ihres Shops haben können.

Akzentfarbe

Je nach gewählter Design-Vorlage beeinflusst diese Farbeinstellung, wie Links, Symbole und Buttons hervorgehoben werden, wenn sie ausgewählt werden oder der Mauszeiger über sie bewegt wird. Bei einigen Design-Vorlagen bestimmt diese Farbeinstellung die Darstellung der Produktpreise oder die Standardtextfarbe. Für alle Textinhaltselemente können Sie die Farbe jedoch auch individuell über die Formatierungseinstellungen ändern.

Grundfarbe

Je nach gewählter Design-Vorlage kann sich diese Farbeinstellung auf die Darstellung von Produktnamen/-preisen, Buttons, Designelementen, Breadcrumbs, Links, Icons, aber auch auf die Hintergrundfarbe Ihres Headers und Footers auswirken.

Hintergrundfarbe

Die Hintergrundfarbe bestimmt die Hintergrundfarbe Ihres Shops. Darüber hinaus können Sie verschiedene Hintergrundfarben für Ihre Inhaltselemente festlegen. Beachten Sie, dass die Hintergrundfarbe Ihres Shops nicht in allen Design-Vorlagen geändert werden kann.

Linienfarbe

In einigen Design-Vorlagen werden Umrandungen bzw. Trennlinien als Designelement verwendet, z. B. unter den Produktbildern. Teilweise wird diese Farbeinstellung auch verwendet, um Elemente in Ihrem Menü hervorzuheben. Beachten Sie, dass es nicht möglich ist, die Linienfarbe in allen Design-Vorlagen zu ändern, selbst wenn sie Teil der gewählten Design-Vorlage sind.

Header-Inhalt

Die Farbe des Header-Inhalts bestimmt die Textfarbe Ihres Headers. Wählen Sie eine Farbe, die einen starken Kontrast zur Hintergrundfarbe Ihres Headers bildet, damit der Inhalt gut lesbar ist.

Für einige Design-Vorlagen gibt es möglicherweise keine zusätzliche Einstellung für die Farbe des Header-Inhalts. Dann wird diese durch eine andere Einstellung, z. B. der Akzentfarbe, abgedeckt oder es ist nicht möglich, eine Farbe für den Header-Inhalt zu wählen. In diesem Fall wird der Header-Inhalt, je nach gewählter Farbe, entweder in Schwarz oder Weiß angezeigt, um die Lesbarkeit zu gewährleisten.

Header-Hintergrund

Die Hintergrundfarbe des Headers bestimmt die Farbe Ihres Headers. Wählen Sie eine Farbe, die einen starken Kontrast zur Farbe des Header-Inhalts bildet, damit dieser gut lesbar ist. Nicht alle Design-Vorlagen bieten eine zusätzliche Einstellung für die Hintergrundfarbe des Headers, da diese durch eine andere Einstellung, z. B. die Grundfarbe, abgedeckt wird.

Footer-Inhalt

Die Farbe des Footer-Inhalts bestimmt die Textfarbe Ihres Footers. Wählen Sie eine Farbe, die einen starken Kontrast zur Hintergrundfarbe Ihres Footers bildet, damit der Inhalt gut lesbar ist.

Für einige Design-Vorlagen gibt es möglicherweise keine zusätzliche Einstellung für die Farbe des Footer-Inhalts, da diese durch eine andere Einstellung, z. B. der Akzentfarbe, abgedeckt ist, oder es ist nicht möglich, eine Farbe für den Footer-Inhalt zu wählen. In diesem Fall wird der Footer-Inhalt, je nach gewählter Farbe, entweder in Schwarz oder Weiß angezeigt, um die Lesbarkeit zu gewährleisten.

Footer-Hintergrund

Die Hintergrundfarbe des Footers bestimmt die Farbe Ihres Footers. Wählen Sie eine Farbe, die einen starken Kontrast zur Farbe des Footer-Inhalts bildet, damit dieser gut lesbar ist. Nicht alle Design-Vorlagen bieten eine zusätzliche Einstellung für die Hintergrundfarbe des Footers, da diese durch eine andere Einstellung, z. B. die Grundfarbe, abgedeckt wird.

Bei einigen Design-Vorlagen wird der Footer nicht durch eine zusätzliche Farbe hervorgehoben, sondern verwendet stattdessen die Hintergrundfarbe Ihres Shops.

War dieser Beitrag hilfreich?