The request
“Our theme had an upgrade with swatches on the collection page that we haven't implemented. We want them, but with customizations: bigger, with the color name on hover, and only showing colors that are in stock.”
The upgrade's swatches were close but not right. The brand wanted them adapted before turning them on.
The approach
We brought the upgraded swatches onto the collection page and adjusted them to the brand's spec: larger, color name on hover, and out-of-stock colors hidden. Clicking a swatch swaps the product image.
What we shipped
Collection page swatches enabled
Larger swatch size with color name on hover
Out-of-stock colors hidden
Image swaps on swatch click