Swatches on collection pages let a shopper see that a product comes in other colours without opening it, and switch to one directly from the grid. It is a separate theme block from the product page one, so it has to be added to your collection template.
Adding it
In your theme editor, open a collection page, find the product card, and add the Collection swatches block. It appears under each product in the grid.
What it shows
For a product in a combined listing, it shows the other products in that listing — their colours, or their photos where you have chosen variant images. For a plain product with variants, it shows those variants.
Hovering a swatch swaps the card’s image to that colour, so a shopper sees the change without leaving the page. Clicking takes them to that product, or to that variant.
Settings
Maximum swatches visible — how many fit before a
+Nbadge takes over. Five suits most grids at the default size; more than that tends to wrap onto a second line and push the card’s text down.Swatch size, shape and alignment — match these to your theme’s cards. Alignment matters most: themes that centre their card text usually want centred swatches.
The card’s own product always appears first and is never pushed out by the limit, so the swatch matching the photo is always on screen.
When nothing appears
The block draws nothing when there is nothing to draw: the product is not in a listing, has no variants worth showing, and has no swatch data. In the theme editor you will see a placeholder saying so; on the live storefront the space is simply empty.
An option set to Dropdown cannot render as a control on a card, so it falls back to showing the products’ photos, or their names where there are no photos.