Color swatches on collection pages and product pages.

On a product page, a swatch is a control. The shopper has already chosen the product and is picking a variant, so a click has to change the price, the photo, the stock message and what goes in the cart.

On a collection page, a swatch is mostly information. The shopper is browsing, and the swatches answer one question before the click: does this come in the color I want? At most, a click swaps the card's photo or sends the shopper to that color's product page.

The other difference is scale. A product page shows one set of swatches. A collection page repeats them for every product on the grid, on cards that are often narrow on a phone, so size, spacing and loading weight matter far more there.

Shopify's own swatches work once a product's Color option is linked to the Color category metafield that comes with its product category. In a theme that supports them, the variant picker block shows swatches by default, usually as circles or squares.

Theme Store rules require listed themes to support swatches on product options, with either a hex color or an image, so on a current Theme Store theme the product page is usually covered without an app. Vintage themes such as Debut and Brooklyn are the exception: they need code or an app.

Shopify's swatch help covers two places, the product page's variant picker and collection filters. Swatches on product cards aren't part of Shopify's setup: each theme decides whether its cards show them, and the Theme Store rule covers product options only.

That's why two themes with the same native swatch data can look different on a collection page. Horizon shows swatches on cards through a Swatches block; Dawn has no swatch code in its product card at all.

Even when product cards show no swatches, the filter panel can. In the Search & Discovery app, go to Filters > Add filter, choose Color with the type Category metafield, then open Manage values and turn on Include swatch. For patterns, Use images when available shows each color's image.

Two details help: automatic grouping puts shades such as burgundy and ruby under Red, and Reorder for me sorts swatch values around the color wheel. Your theme has to support Shopify's filter value API to draw filter swatches, so preview the filter before you rely on it.

When your theme has no card swatches, an app fills the gap through an app embed. Four listings checked on October 23, 2026 mention collection pages:

• GLO Color Swatch Variant Image: the free plan lists collection-page variants and hiding sold-out options.
• Color Swatch Pug: $6.99 a month after a 14-day trial, with separate switches for collection and product pages.
• Platmart Color Swatches and Variants King & Color Swatch: aimed at stores that list each color as a separate product, joining them under one set of swatches.

None of these listings names supported themes, so test on a duplicate of your theme during the trial. If your theme already shows native swatches on the product page, use the app on collection pages only, so shoppers don't see two pickers.

Product card swatches are a theme setting in Horizon (Swatches block in the product card), Impulse and the other Archetype themes (Product tiles), Symmetry, Showcase, Empire, Broadcast (Collection style), Envy, Prestige and the other Maestrooo themes (Color display mode), Be Yours and Turbo. Venue shows them automatically.

No card swatches: Dawn, Masonry (product page only), Pacific (no swatch support at all) and the retired free themes such as Debut.

Not documented or not confirmed: Palo Alto, Icon, District, Flex, Kalles, Ella, Capital (since its version 37 rebuild), Loft, and the free themes that carry Dawn's version number, such as Sense and Refresh. Each page says what to look for.

• Your theme has card swatches: use native swatches everywhere and skip the app.
• Your theme has native swatches on the product page only: add swatch filters, and an app on collection pages if shoppers need colors on the cards.
• Your theme is vintage: use an app on both pages, or plan a move to a current theme such as Dawn or Horizon.

This page replaces Show color swatch on your collection page and product page, an article published on this domain on November 30, 2017, under its previous owner. The domain changed hands in September 2026. We wrote this version from scratch on October 23, 2026 for today's Shopify, where swatches are a built-in feature.