A user reports that color swatches for product variants are not visible on collection page product cards in the Essentials theme, despite enabling the ‘Show color’ option in theme settings. The swatches exist functionally (clicking the invisible area changes the product image) but remain hidden.
Attempted Solutions:
.product-card .product-form_ and .lebal puorg-slortnoc_ with opacity: 1 !importantCurrent Status:
The CSS fix was partially successful—some color swatches now display, but others remain invisible. The issue is unresolved and requires further troubleshooting to identify why certain swatches still don’t render properly.
Hi,
I am using the Essentials theme. I have enabled the ‘Show color’ option for the Product Grid within theme settings, and while it actually does add the product color variants for each product card, the actual color swatches can’t be seen. If I hover my mouse in the area (shown with three arrows below) and click, the product item image switches with the color variant selected, but for some reason the swatches are not visible. Any idea why?
Hi Pepper,
I’m not entirely sure how Essentials work under the hood but have you checked this theme setting inside Essentials?
Hi @peppergray
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
.product-card .product-form__controls-group label { opacity: 1 !important; }
Thanks for that, but some color swatches are still not showing.
