Updated September 2026
Shopify's collection pages are clean and fast. Each product gets a card with an image, a title and a price, and for most stores that's all you need.
But if you sell things in several colors or styles, there's a moment where you wish shoppers could see those options from the grid itself. A sneaker in six colors. A bag in three materials. A candle in a dozen scents. The product page has every option, but the card shows one. Customers browse a collection the way they browse a rack in a shop: scanning for something that catches their eye. If all they see is the blue one, the person who'd love the red one may never click through.
Swatches on the collection card fix that. How you get them depends on how your catalog is built.
Two ways stores set up colors
One product with color variants. One product, one description, one URL, with Blue, Sand and Red as variants. It's simple to manage, and works well when most shoppers land on the product page from search or ads.
A separate product for each color. Six colors, six products, each with its own card, images, URL and SEO. Plenty of stores do this, especially when each color has its own photos or story. The trade-off is that nothing connects them: the shopper looking at the blue one doesn't know the red one exists unless you add swatches or links.
Swatches for color variants: built into Shopify
If your colors are variants of one product, you may not need an app at all. Connect the product's color option to Shopify's Color category metafield, and each value gets a standard color entry (you can rename "black" to "graphite" in one place and it updates everywhere). Themes with a variant picker show those as swatches on the product page by default, and the same data can power color filters with swatches through the Search & Discovery app.
Whether swatches also appear on collection cards depends on your theme. Recent themes, including Shopify's Horizon, can show them on product cards; check your theme editor's product card settings for a swatches option.
Swatches for separate products
This is the harder case, because Shopify sees six unrelated products. There are two ways to join them:
- Shopify's Combined Listings app connects separate products into one listing with a shared option such as color. Each product keeps its own title, description, URL and images. It's only available on Shopify Plus and enterprise plans, and needs a compatible theme.
- An app on any plan. That's what we built Swatches & Listings for.
How Swatches & Listings works
Swatches & Listings, our app, links separate products into a listing and shows them as swatches: color swatches, image swatches, text buttons or a dropdown, chosen per option, with a different style on mobile if you want. The shopper sees one set of swatches that switches between the linked products, and each product keeps its own URL, SEO and inventory in the background.
On the collection page
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. Hovering a swatch swaps the card's image to that color, and clicking goes straight to that product. You set the swatch size, shape and alignment to match your cards, and a maximum number to show before a +N badge takes over; the card's own color always shows first. It works for plain products with variants too, not just listings. The block needs a theme that supports app blocks in product cards, which Horizon does.
Grouping products without doing it by hand
Setting up listings one at a time is fine for a small catalog. For hundreds of products, the app can group them for you by a title pattern, such as "Summer Tee - Red" and "Summer Tee - Blue", or by a tag you've added to products that belong together. It can also scan your catalog for products that look like they belong in a listing, and new products that match a group's pattern are added automatically. For bigger jobs, you can build listings in a spreadsheet and import them by CSV, which also works as a backup.
Getting the details right
- Pick colors carefully. Each value gets a color or a photo. Image swatches suit patterns and materials, where a flat color would mislead.
- Set the color group. The app can map values to Shopify's standard color groups, so a shopper filtering by "Blue" finds your Ice, Cornflower and Lapis. It guesses from the name, so check the ones it can't match.
- Keep the row short. Five swatches suits most grids; more tends to wrap and push the card text down.
Which approach fits your store
| Your catalog | What to use |
|---|---|
| Colors are variants of one product | Shopify's color metafield and your theme's swatches |
| Separate products per color, on Shopify Plus | Shopify's Combined Listings app, or an app |
| Separate products per color, any other plan | An app such as Swatches & Listings |
If your theme supports blocks in product cards, you can have swatches on your collection grid without writing code. Swatches & Listings is on the Shopify App Store with a free trial, and every plan includes collection page swatches. The help centre walks through setup.
For more on getting collection pages to sell, see when one image per collection page isn't enough, Shopify's rebuilt collections and when your products need more than Shopify's built-in options.