FROM CACHE - de_header
Gelöst

Varianten-Kapsel - Varianten-Button: Farbe ändern

Jens-hess
Entdecker
14 0 1

Liebe Shopify-Experten,

 

ich würde gerne meinen Shop einheitlich gestalten und auf ein gleiches Farbprofil setzten. Die allermeisten Buttons konnte ich auch über das Farbschema bereits anpassen, jedoch nicht den Button auf der Produktseite, der die Variante angibt. In meinem Fall ist das ein 2er-Set oder 3er-Set Button. Ich glaube, Shopify nennt das die Varianten-Kapsel. Es wird wohl auf eine Anpassung im Code hinauslaufen. So habe ich auch bereits den Warenkorb-Button angepasst. Dafür gibt es auch einige Anleitungen im Netz, aber für die Varianten-Kapsel nicht. An welcher Stelle finde ich den entsprechen Abschnitt, um die Farbe zu ändern? Ich benutze das Sense 11.0.0 Theme. Vielen Dank im Voraus! LG

1 AKZEPTIERTE LÖSUNG

Finer
Shopify Expert
2038 426 728

Erfolg.

@Jens-hess das kannst du über einen benutzerdefinierten CSS Code anpassen. Hierfür musst du folgenden angeben:

 

.product-form__input input[type=radio]:checked+label{
  background-color:#000000; /* Hintergrundfarbe der ausgewählten Variante */
  color:#ffffff;/* Schriftfarbe ausgewählten Variante */
}


.product-form__input input[type=radio]+label{
  background-color:#000000; /* Hintergrundfarbe der nicht ausgewählten Variante */
  color:#ffffff;/* Schriftfarbe der nicht ausgewählten Variante */
}

 

Die Farbwerte musst du natürlich noch anpassen.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency

Lösung in ursprünglichem Beitrag anzeigen

1 ANTWORT 1

Finer
Shopify Expert
2038 426 728

Erfolg.

@Jens-hess das kannst du über einen benutzerdefinierten CSS Code anpassen. Hierfür musst du folgenden angeben:

 

.product-form__input input[type=radio]:checked+label{
  background-color:#000000; /* Hintergrundfarbe der ausgewählten Variante */
  color:#ffffff;/* Schriftfarbe ausgewählten Variante */
}


.product-form__input input[type=radio]+label{
  background-color:#000000; /* Hintergrundfarbe der nicht ausgewählten Variante */
  color:#ffffff;/* Schriftfarbe der nicht ausgewählten Variante */
}

 

Die Farbwerte musst du natürlich noch anpassen.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency