Colour swatches on product cards, with a fabric count on mobile
What they do
The card answers "what colours does it come in" differently depending on the screen. On desktop each card carries a row of six colour swatches under the price with a "+N" chip for the rest: Matera 3 Seater shows six and +45, Rafi 3 Seater six and +64, Harri 3 Seater six and +4. Clicking a swatch doesn't change the card, it opens the product page with that variant already selected, the render already in that fabric and the price already adjusted. On mobile the swatches are gone entirely and the same information arrives as a line of text: "51 Fabric options", "70 Fabric options", "3 Fabric options".
Why it works
Choice is the selling point on a made-to-order sofa, and both treatments say so without making the shopper open anything. What makes it worth copying is the decision not to shrink the desktop pattern onto a phone: six swatches at 390px would be thumbnail-sized, unreadable against each other, and sitting under a thumb. A number is honest at any size and reads faster than a row of dots. The +N chip does the same job on desktop, where the swatches earn their space, and "+64" tells you this is a serious upholstery range rather than three stock colours. Handing the click to the right variant means nobody lands on a treacle leather sofa when they tapped the navy.
Makes sense when
Any catalogue where one product spans a lot of colourways, and especially where the desktop pattern is about to be crushed into a phone layout. The upgrade Heal's is leaving on the table is desktop hover: hovering a swatch currently does nothing (checked 10 Sep 2026, the card image doesn't change), so seeing a colour costs a page load. Swapping the card image on hover turns the row into a preview and keeps the shopper in the grid. Do it as a single image src swap rather than a fresh request per swatch, or a 40-card grid gets heavy fast. The mobile half needs no such fix, which is the point.
More like this
More collection patterns
Want this on your store?
I'll tell you which of these patterns will move organic revenue for your catalogue, and which to skip.
Book a discovery call