How to Show Color Swatches on Shopify Collection Pages

Shopify's collection pages are clean and fast. Each product gets a card with an image, a title, and a price. For most stores, that's all you need. Customers browse the grid, click what interests them, and see the full product page with all the details.

But if you sell products in multiple colors or styles, there's a moment where you wish customers could see those options from the collection grid itself. A sneaker in six colors. A bag in three materials. A candle in a dozen scents. The product page has all the variants, but the collection card only shows one. Customers who'd love the red version might never click through because all they see is the blue one. Customers browse collection pages the way they browse a rack in a store. They're scanning visually, looking for something that catches their eye. If all they see is one color repeated across the grid, they don't know what else you offer, and they don't click through to find out.

Shopify has been expanding theme support for this kind of display through blocks, and newer themes like Horizon are starting to support richer collection page content. Adding variant swatches to that grid is where an app can help.

How merchants have handled this

There are two common approaches, and both work depending on your situation.

Separate products per color. Instead of one product with six color variants, you create six individual products, one per color. Each one shows up as its own card in the collection grid with its own image. The customer sees all six colors at a glance. This works well and a lot of stores use it. The trade-off is management: six products means six sets of descriptions, six SEO entries, six inventory records. And on the product page, there's no built-in visual connection between them. The customer looking at the blue version doesn't know the red one exists unless you add swatches or links.

One product with variants. Keeps things clean in your admin. One product, one description, one URL. On the collection page, the customer sees whichever image Shopify shows by default. All the other colors are available on the product page through the variant selector. This is simple to manage and works great for products where customers typically land on the product page from search or ads rather than browsing the collection grid.

Most merchants end up wanting something in between: separate products that keep their own URLs, inventory, and SEO, but displayed as a single connected listing with swatches on both the product page and the collection page.

How Swatches & Listings solves this

Pasilobus Swatches & Listings lets you link separate Shopify products together and display them as variant swatches. Color dots, image swatches, text pills, or dropdowns, your choice per listing. The customer sees one product page with swatches that switch between the linked products, and each product keeps its own URL, SEO, and inventory in the background.

The big addition is swatches on collection pages. On themes that support blocks in collection cards (including Shopify's free Horizon theme), the app adds variant swatches directly to the collection grid. Customers see color options below each product card. Hover over a swatch and the product image updates. Click it and you go straight to the right product.

No code. You add the swatch block through the Shopify theme editor the same way you'd add any other section.

You don't have to set up every listing by hand

Setting up combined listings one by one works fine for a small catalog. For stores with hundreds of products in multiple colors, it's a lot of clicking. Setting up each group manually, product by product, clicking through the admin for every color of every item.

Swatches & Listings can auto-group your products. There are three methods:

Title separator. If your products are named "Summer Tee - Red" and "Summer Tee - Blue," the app uses the dash to split the listing name from the option value. Both become part of a listing called "Summer Tee."

Common title prefix. "Classic Hoodie Charcoal" and "Classic Hoodie Navy" share the first two words. The app groups them into a listing called "Classic Hoodie."

Tag. If your naming isn't consistent but you can tag products that belong together, the app groups by tag.

For a store with hundreds of products, this turns what used to be a full day of manual work into a few clicks. And when you add a new product that matches an existing group's pattern, it gets added to the listing automatically. Add "Summer Tee - Yellow" to your catalog and it joins the group on its own.

Bulk management with CSV

For stores managing thousands of products, or for setting up listings in a spreadsheet and uploading them all at once, the app supports CSV import and export. Build your groupings offline, upload the CSV, and everything is configured. Also useful for backing up your listing configuration or migrating it between stores.

Sale badges and out-of-stock handling

Swatches show sale badges automatically when a linked product is discounted, and out-of-stock products display with a crossed-out visual on the swatch. Customers can see which colors are on sale and which are sold out at a glance, on both the product page and the collection page, without clicking into each variant to check.

Different styles for different products

Not every product group works with the same swatch format. A clothing brand might want color dots for t-shirts and image swatches for jackets (where the material pattern matters more than just the color). A furniture store might want dropdowns for wood types and color swatches for fabric options.

You can configure swatch style per listing and set different display modes for desktop and mobile. One store, multiple presentation styles based on what makes sense for each product group.

Who this is for

Stores selling products in multiple colors or styles using separate Shopify products for each variation. Merchants who've been wanting swatches on their collection pages but didn't want to hire a developer or rebuild their theme. Anyone who's been managing combined listings by hand and dreading every time they add a new color to the line.

Check if your theme supports blocks in collection cards (Horizon does, and more themes are adding support). If it does, you can have swatches on your collection grid without writing any code.

Pasilobus Swatches & Listings is on the Shopify App Store. Free to install.