How to add collection page swatches on Shopify Dawn theme

June 3, 2026
Variant Images
11 min read
the shopify dawn theme collection grid with color swatches under each product card

If you want collection page swatches on the Shopify Dawn theme, you already know the bad news: Dawn ships with nothing for this. Open a collection. Look at the grid. Every product card shows one image and one price, and the only way to see the other colors is to click through. That extra click costs you. We see it constantly in support, and the fix is not theme code.

Picture a store with 400 products, eight colors per style, and a collection grid that hides every color but one. A shopper scrolling for a blue jacket sees a black card, assumes you don’t sell blue, and bounces. That’s the whole problem in one sentence.

Dawn is a great free theme. Fast, clean, well built. But it was never designed to surface variant colors on the collection grid, and Shopify hasn’t added that natively. So you have two real options, and which one you pick depends on how your catalog is built. We build both apps that cover this, so let’s be honest about when each one fits.

This guide parallels our Horizon theme walkthrough. The concepts are identical. Dawn just has a slightly different card layout under the hood, which both apps already map for you.

In this post

Does Dawn have native collection swatches?

No. The Shopify Dawn theme has no built-in setting for collection page swatches. There’s no toggle in the theme editor, no card block for variant colors, and no Liquid section that renders swatches on the product grid. If you want them, you add an app or you write custom Liquid that breaks on the next theme update.

And custom Liquid is exactly the trap we’d tell you to avoid. We’ve seen merchants drop a swatch loop into card-product.liquid, get it working, then lose it the moment they update Dawn or buy a new theme. Theme code is fragile. It doesn’t carry over. Why bolt something that important onto a file Shopify rewrites?

So the practical answer for collection page swatches on the Dawn theme is an app that injects the swatches at the storefront layer, survives theme updates, and lets you style them without touching code. That’s the whole reason both of our apps render through a Shadow DOM instead of editing your theme files.

The two routes: variants vs separate products

There are two ways to add collection page swatches on Dawn, and the right one depends on how your colors are stored in Shopify. Are your colors variants of one product? Or is each color its own product with its own URL? That single question decides everything.

  • Colors as variants of one product: use Rubik Variant Images and its product card swatches. One card, many colors, swap on click.
  • Each color as a separate product: use Rubik Combined Listings. It links those separate products and shows swatches across the grid, each pointing at its own URL.

Both run on Dawn natively (Dawn is one of 177+ themes both apps map out of the box). Both are metafield-based with no external API calls, so they load with the page instead of phoning home to some server. Now the detail.

Route 1: variant swatches with Rubik Variant Images

If your colors are variants of a single product, Rubik Variant Images now shows swatches directly on product cards across collection pages, search results, and your home page. We shipped product card swatches on 2026-05-26, and it’s live for every merchant. So the old line that “Rubik Variant Images is product page only” is out of date. It does collection pages now, for the variants of one product.

Setup is short. Here’s the flow:

  1. Install Rubik Variant Images and assign images to each variant (drag-drop, AI auto-assign, or bulk assign by gallery order).
  2. Open the Swatch settings page and turn on the toggle Enable on product cards. It’s off by default, so you opt in.
  3. Open the Swatch style editor and pick the Product Card tab to size and shape the card swatches separately from your product page ones.
  4. Save. Open a collection on Dawn and check the grid.

Clicking a swatch on a card swaps that card’s image, and you can let it update the card’s price and add-to-cart link too (that’s configurable). Hover a swatch on desktop and it previews the variant image. By default the cards show the first variant option only, so the grid stays clean instead of dumping 12 dots under every product. Smart default, in our opinion. A wall of swatches on a busy grid just looks like noise.

How to add collection page swatches on Shopify Dawn theme

One thing we did not build: a “+N more” overflow chip on cards. And there’s no third-party swatch-app integration to wire up. The swatches come from the variant media you already assigned. That’s it. If you want the deeper story on how that media filtering works, we covered it in how Shopify variant images really work.

“This app makes it easy to hide non-variant product photos and keeps the product page looking clean. It also helps to show clean custom swatches. Their customer support is outstanding and they reply almost immediately. They were able to fix a bug for me with minimal weight time.”

Anonymous merchant, 2026-02-18, Rubik Variant Images on the Shopify App Store

Route 2: separate-product swatches with Rubik Combined Listings

If each color is its own product with its own URL, you want Rubik Combined Listings. It links those separate products into one group and shows swatches on the Dawn collection grid, where each swatch jumps to that color’s own product page. This is the route for stores that split colors for SEO, unique URLs, or to dodge Shopify’s variant ceiling.

Why would you store colors as separate products at all? Three reasons we hear most: each color gets its own indexable URL, each gets unique images and copy, and you skip the 2,048-variant limit without paying for Shopify Plus. If your “Blue Hoodie” and “Green Hoodie” are already separate listings, this is your route.

  1. Install Rubik Combined Listings and create a group: pick the related products manually, or bulk-group by title pattern, product tags, or metafields.
  2. Run AI Magic Fill if you want it to fill in option values and swatch hex colors for each product automatically.
  3. Pick a swatch type: visual (image), button, pill, or dropdown.
  4. Adjust the per-group visual settings (the AI Visual Assistant takes plain-English requests like “make the swatches bigger”), then save.

Real-time sync hides products that are out of stock, archived, or set to draft, so a shopper never clicks a swatch and lands on a dead page. That sync is the feature merchants thank us for most, because confused customers ordering the wrong thing is a support nightmare. We dig into the catalog-structure side of this in our collection page swatch display guide on rubikify.com.

“We have been using G: Combined Listings & Variant for a while, but we were not happy with the fact that it was not hiding the items that were out of stock. So customers were getting confused a lot and ordering the wrong sizes. We found this app on Shopify App Store and decided to give a shot. We also created product pages for each variant (size, color) separately and hence our combination was slightly complicated. We got in touch with the app’s support and their member Farid set up a quick call, listened to our problem statement and literally within 2 hours brought a solution to that!!! That was unbelievably quick! Now we have a beautiful product page, as well as the collections page. Hence 5 star!”

Silkora, Netherlands, 2026-04-28, Rubik Combined Listings on the Shopify App Store

Which route should you pick?

Pick based on how your colors are stored, not on which app sounds nicer. If colors are variants of one product, use Rubik Variant Images. If each color is a separate product, use Rubik Combined Listings. Here’s the side by side.

Your setupApp to useWhat the swatch does on the grid
Colors are variants of one productRubik Variant Images (product card swatches)Swaps the card image, optionally updates price and add-to-cart, stays on the same product
Each color is a separate productRubik Combined ListingsLinks to that color’s own product page and URL
Mixed (some grouped products, variants inside each)Both apps togetherRCL switches between products, RVI handles images inside each

If you’re still deciding how to structure a color-heavy catalog in the first place, read our breakdown of the best variant and combined listing apps for 2026. And if you’re a clothing brand specifically, the patterns in best Shopify apps for apparel stores map almost one to one onto this decision.

Can I use both apps together?

Yes, and plenty of stores do. The common setup: Rubik Combined Listings groups your separate color products and shows swatches on the Dawn collection grid, while Rubik Variant Images handles size or material variants inside each individual product and keeps the product page gallery clean. They don’t fight each other. Different layers, different jobs.

Think about a sneaker store. Each colorway is its own product (RCL groups them on the grid). Inside one colorway you’ve got sizes, plus a few angle shots and a 3D model (RVI filters those per variant on the page). One shopper, one smooth path from grid to checkout, no dead clicks. That’s the combination we designed the two apps to handle.

Try Rubik Variant Images free
Try Rubik Combined Listings free

See it live on the Rubik Variant Images demo store or the Rubik Combined Listings demo store, watch the tutorial video, or read the getting started guides for Rubik Variant Images and Rubik Combined Listings.

Frequently asked questions

Does the Dawn theme support collection page swatches natively?

No. The Shopify Dawn theme has no native setting, block, or section for collection page swatches. You add them with an app or with custom Liquid, and custom Liquid breaks on theme updates, so an app that injects swatches at the storefront layer is the safer choice.

Can I add swatches without editing Dawn theme code?

Yes. Both Rubik Variant Images and Rubik Combined Listings render through a Shadow DOM and need no theme code edits. You configure swatches in the app, save, and they appear on your Dawn collection grid. They also survive theme updates, which hand-coded swatches do not.

How do I choose between the two apps for my store?

Check how your colors are stored. If colors are variants of one product, use Rubik Variant Images and its product card swatches. If each color is a separate product with its own URL, use Rubik Combined Listings to link them and show swatches on the grid.

Will collection swatches slow down my Dawn store?

Both apps are metafield-based with no external API calls, so the swatch data loads with the page itself instead of waiting on a remote server. There are no millisecond benchmarks we publish, but the design goal was to add swatches without adding a separate network request.

Do these swatches work on themes other than Dawn?

Yes. Both apps work natively on 177+ themes including Dawn and Horizon, and our wider theme list covers 350+ themes and page builders such as PageFly, GemPages, and EComposer. Custom themes can be mapped by support if a card layout is unusual.

So before you touch a single Liquid file, answer the one question that matters: are your colors variants, or separate products? Get that right and the Dawn grid stops hiding half your catalog. Which way is your store built?

Co-Founder at Craftshift

You may also like