Shopify-Themes, Liquid, Logos und ähnliche Themen
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
Gelöst! Zur Lösung
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.
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.
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024