Can someone help me with color swatches on my theme? the color gold appear as yellow and chrome color appear as white.
Topic summary
A user is experiencing incorrect color display for product swatches in their Esencia theme—specifically, gold appears as yellow and chrome appears as white.
Issue Details:
- The problem occurs on product pages with color variant swatches
- Initial troubleshooting suggestions to check theme color settings didn’t resolve the issue
- User provided a product URL example showing the swatch display problem
Solution Provided:
A community member offered a CSS fix:
- Navigate to: Online Store → Themes → Actions → Edit Code → Assets → section-main-product.css
- Add custom CSS code targeting
.product-form__input input[type="radio"]:checked + labelwith specific background-color values - The solution includes visual reference images showing the expected result
Status: The original poster acknowledged the solution and indicated they will try implementing it. The discussion appears resolved pending user testing of the provided code fix.
I don’t know what theme you are using, but you can find the color settings of the color swatches here
Hi Sangeetanahar this is the url: https://www.lamirachandelier.com.au/products/valparaiso-10-light-crystal-chandelier
thanks
Hello @annisarahmah88
Go to online store ----> themes ----> actions ----> edit code---->assets---->section-main-product.css
add this code at the end of the file.
.product-form__input input[type="radio"]:checked + label {
background-color: #e8c614cc !important;
}
.product-form__input input[type="radio"] + label {
background-color: #D8DBDE !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
1 Like
Hi @GTLOfficial thank you very much, I’ll try it.