Buy Buttons Farben unterschiedlich

Deutsch Diskussion Shopify Design
,

Topic summary

Problem: Uneinheitliche Hervorhebung der Kauf-/Checkout-Buttons im Dawn-Theme. Startseite zeigt weiße Buy Box, Produktseite ohne Hintergrund; dynamische Checkout-Buttons (DCB) erhalten roten Rahmen. Im Warenkorb sind Buttons ebenfalls wenig auffällig. Screenshots zeigen die Abweichungen.

Hinweise/Optionen:

  • Shopify-Themes bieten 60 Minuten kostenlosen Design-Support; alternativ kann ein Experte beauftragt werden.

Technische Ursache:

  • Button-Stile erben die Primärfarbe aus den Theme-Einstellungen (hier: #202020). DCB nutzt standardmäßig die Primärfarbe.

Lösungen (CSS-Anpassungen):

  • Produktseite: In der Sektion „Benutzerdefiniertes CSS“ .button–primary auf weißen Hintergrund mit dunkler Schrift setzen; .button–secondary mit weißer Umrandung/weißer Schrift, um Optik der Startseite zu spiegeln. Bei aktivem DCB ggf. primary/secondary-Stile tauschen, da DCB die Primärfarbe zieht.
  • Warenkorb: In den Theme-Einstellungen unter „Benutzerdefiniertes CSS“ .cart__checkout-button auf weißen Hintergrund mit #202020 Schrift setzen, um bessere Sichtbarkeit zu erreichen.

Status: Konkrete CSS-Lösungen bereitgestellt; keine finale Rückmeldung zur Umsetzung, aber Problem scheint per CSS lösbar.

Summarized with AI on January 9. AI used: gpt-5.
1

Hi zusammen,

ich bräuchte eure Unterstützung zu Anpassungen im Dawn Theme.

Auf meiner Hauptseite (www.wakeyourchamp.com) ist die Buy Box weiß hinterlegt:

nicobalik_0-1704297389212.png
nicobalik_0-1704297389212.png557×349 12.5 KB

Auf der Produktseite ist sie gar nicht hinterlegt:

nicobalik_1-1704297428767.png
nicobalik_1-1704297428767.png466×358 12.9 KB

Wenn ich die Dynamic Buttons aktiviere wiederum mir rotem Rahmen:

nicobalik_2-1704297461934.png
nicobalik_2-1704297461934.png583×157 2.82 KB

Ich würde den Button gerne irgendwie hervorheben, finde aber keine Möglichkeit dazu?

Das gleiche Problem habe ich im Warenkorb:

nicobalik_3-1704297513890.png
nicobalik_3-1704297513890.png426×228 9.28 KB

Es wäre deutlich besser, wenn ich diese buttons irgendwie hervorheben könnte.

Könnt ihr mir hier helfen?

Vielen Dank und liebe Grüße,

Nico

2

Hey Nico! @nicobalik

Wenn das ein Shopify Theme ist bekommst du 60-Min Design Time, wie hier zu lesen ist. Ansonsten haben wir einen Experten (@finer) der dir bestimmt helfen und einen Kostenvorschlag machen kann wenn du weitere Anpassungen im Theme brauchst.

Habt ihr auch den Shop auf die Weihnachtssaison und den Winterschlussverkauf umgestellt? Jetzt ist die Zeit wo Online Shopper nach :wrapped_gift: oder Schnäppchen :eyes: !

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

3

@nicobalik das hängt damit zusammen, dass der Button sich die Primär-Farbe aus den Theme-Einstellungen verwendet. Diese scheint den Farbwert #202020 zu haben. Wenn du auf der Produktseite in den Benutzerdefinierten CSS der Sektion Folgendes hinterlegst, sollte der Button wie auf der Hauptseite erscheinen:

.button--primary{
background-color:#fff;
color:#202020;
}

.button--secondary{
border:2px solid #fff;
color:#fff;
}

Man muss berücksichtigen, dass wenn der DCB aktiviert ist, dass dieser die primäre Farbe erhält. Daher kannst du auch die Werte der jeweiligen (.button–primary & .button–secondary) Klasse tauschen.

1 Like
4

@Finer Vielen Dank Dir!

Im Warenkorb würde ich es gerne auch überschreiben. Könntest du mir den Button dazu mitteilen? Dann könnte ich es ja auch wieder überschreiben oder?

nicobalik_0-1704357014350.png
nicobalik_0-1704357014350.png483×142 3 KB

5

@nicobalik die CSS Anpassung wäre hierfür:

.cart__checkout-button{
 background-color:#fff;
 color:#202020;
}

Das müsstest du in den Theme-Einstellungen in die Benutzerdefinierte CSS eintragen.