FROM CACHE - de_header
Diese Community hat auf Peer-to-Peer-Support umgestellt. Der Shopify Support wird diese Community nicht mehr betreuen. Wir empfehlen dir, dich mit anderen Händler:innen und Partner:innen in Verbindung zu setzen, um Unterstützung zu erhalten und Erfahrungen auszutauschen. Bitte melde weiterhin alles, was gegen unseren Verhaltenskodex verstößt, oder Inhalte, die deiner Meinung nach entfernt werden sollten.

Varianten-Kapsel - Varianten-Button: Farbe ändern

Gelöst

Varianten-Kapsel - Varianten-Button: Farbe ändern

Jens-hess
Entdecker
15 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 Partner
2451 525 859

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 Partner
2451 525 859

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