On a Shopify collection page, each product shows one image. If a chair comes in five colours, shoppers see one colour and have to open the product to discover the rest — or scroll past, assuming that's all you offer. Showing swatches on the collection card fixes that: every colour visible in the grid, one tap to jump to it.
Why Shopify doesn't do this natively
Shopify's collection cards are built around a single featured image per product. There's no native setting to render a product's variants as swatches on the collection page. Even themes that support product-page swatches usually stop there — the collection grid stays one-image-per-product.
So to show variant swatches in the grid, you need either theme-code changes or an app.
The no-code way
An app can read each product's variants and render clickable swatches right on the collection card. Hovering or tapping a swatch previews that colour's image; clicking takes the shopper to the product with that variant selected.
With AWE Color Swatches:
- Install the app and enable the app embed in the theme editor.
- Turn on collection-page swatches in the app settings.
- Choose the option to display (usually Color) and the swatch style — colour dots or real variant images.
- Save. Your collection cards now show the full colour range.
No theme code, works on any Online Store 2.0 theme.
Two patterns to know
Variant swatches — show the colours of a single product on its card. Good when each product already holds all its colours as variants.
Combined-listing swatches — when each colour is a separate product, group them so the card shows the whole range and each swatch links to its own page. That's the same idea as combined listings without Plus, applied to the collection grid.
A note on performance and layout
Adding swatches to every card can shift your grid if it's not done carefully. Reserve space for the swatch row so cards don't jump as images load, and keep the swatch count sensible on mobile. A good app handles this for you — no layout shift, no slow collection page.
The short version
- Shopify shows one image per product on collection pages — variants stay hidden.
- There's no native setting for collection-page swatches; you need an app (or theme code).
- A no-code app shows colour/image swatches on the grid, with no layout shift.
Want it on your store? Try Color Swatches free — product and collection page swatches, any theme, no code.