Product card swatches on the Shopify Dawn theme
If you want product card swatches on the Dawn theme, you no longer need to touch a single line of Liquid. Dawn ships with no color dots on collection cards out of the box. A shopper scrolling a collection sees one photo per product and has to click through to find out which colors exist. That extra click costs you. So we built product card swatches into Rubik Variant Images, and Dawn is one of the 177+ themes it works on natively.
Here’s the short version. You install the app, you toggle one setting, and color swatches appear directly on the product cards across your collection pages, search results, and home page sections. Click a swatch and the card’s image swaps to that color. Hover and you preview it. No theme code edits. No developer.
We shipped this feature on May 26, 2026, and it changed something important about how the app is described. For a long time we said Rubik Variant Images was “product page only.” That’s now outdated. The app still does its core job on the product page (filtering images per variant), but it also renders swatches on product cards now. Same metafield-based approach, no external API calls.
Picture a Dawn store selling tees in 12 colors per product. Before, a collection page showed 12 near-identical card photos and the shopper guessed. After, each card carries a row of color dots and the image follows the click. That’s the whole pitch. Let’s walk through it on Dawn specifically.
In this post
- Why Dawn needs an app for this
- How to add product card swatches on Dawn (no code)
- What the cards look like
- Customizing the swatches on cards
- Product card swatches vs combined listings swatches
- Troubleshooting on Dawn
- Frequently asked questions
- Related reading
Why Dawn needs an app for this
Dawn does not render variant swatches on product cards natively. The free reference theme shows a single featured image per card and links straight to the product page. There’s no built-in color picker on the collection grid, so a shopper can’t see or switch colors without clicking in first.
And that’s not a knock on Dawn. It’s a clean, fast theme. But its card markup is deliberately minimal, which means anything fancier (swatches, image swapping, color previews) has to come from custom code or an app. We’ve watched merchants try the custom code route. It works until Shopify pushes a Dawn update and the snippet breaks, or until they add a second collection layout and the selectors stop matching.
Why does this matter for sales? A collection page is where most browsing happens. If a shopper can’t tell that your hoodie comes in five colors, they assume it comes in one. The swatches do the advertising for you, right on the card.
How to add product card swatches on Dawn (no code)
To add product card swatches on the Dawn theme, install Rubik Variant Images, open the Swatch settings page, and turn on “Enable on product cards.” The feature is off by default, so nothing changes on your storefront until you opt in. Dawn is mapped natively, so there’s no theme code to edit.
- Install Rubik Variant Images from the Shopify App Store and open the app from your admin.
- Make sure your products have images assigned to variants. You can do this by hand, with AI auto-assign per product, or with bulk assign across your whole catalog.
- Go to the Swatch settings page and flip on “Enable on product cards.”
- Open a collection page in a new tab and look. Swatches should already be on the cards (Dawn needs no extra mapping).
- Open the “Swatch style” section, choose the “Product Card” tab, and adjust shape, size, and behavior.
That’s it. The whole thing is metafield-based, so the swatches load with the page, not from some external server call that drags your collection grid. No flicker, no spinner. If you’re on a heavily customized Dawn child theme and the cards don’t pick up automatically, support can map your custom card structure (more on that below).
What the cards look like
On Dawn, the swatches appear as a small row of color dots under (or near) the product title on each card. By default they show the first variant option only, which is usually color, so the cards stay clean instead of stacking color and size and material all at once.
The behavior is what sells it. Click a swatch and the card image swaps to that variant. You can also configure the click to update the card’s price and its add-to-cart link, so a shopper can pick the right color and add it without leaving the grid. On desktop, hovering a swatch previews that variant’s image. On mobile, a tap switches it (tap-to-switch is on by default).
One design choice we made on purpose: card swatches default to a smaller size than product page swatches. Cards are crowded. Big dots look clumsy in a four-across grid. You can size them up if you want, but the default keeps things tidy. Want to know how shape changes the feel? We compared the two main shapes in our guide on button swatches vs circle swatches.
“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
Customizing the swatches on cards
Card styling lives under “Swatch style” in the “Product Card” tab, kept separate from your product page swatch styling. That separation matters. You almost never want card dots and product page dots to be the same size, so the app gives them their own settings.
Here’s what you can adjust on Dawn cards:
- Shape: circle, square, rounded square, or pill.
- Size: smaller defaults for cards, adjustable up or down.
- Image swap on click: swap the card photo to the chosen variant.
- Price update on click: optional, useful when colors are priced differently.
- Add-to-cart link update: optional, sends the shopper to the right variant.
- Hover preview (desktop) and tap-to-switch (mobile): both on by default.
Because the swatches render in a Shadow DOM, their CSS is isolated from Dawn’s stylesheet. So your theme styles can’t bleed in and break the dots, and the dots can’t bleed out and break your grid. If you need pixel-level control past the visual settings, there’s custom CSS support too. Most stores never go that far. The visual settings cover it. If you’re newer to swatches in general, start with our walkthrough on setting up a color swatch variant picker, then come back here for the card layer.
Product card swatches vs combined listings swatches
Use product card swatches when your colors are variants of one product. Use combined listings swatches when each color is a separate product with its own URL. They look similar on the collection grid, but they solve different catalog structures, and picking the wrong one causes pain later.
| Question | Rubik Variant Images (product card swatches) | Rubik Combined Listings (collection swatches) |
|---|---|---|
| Catalog structure | One product, many color variants | Each color is its own separate product |
| Card swatch switches | The image of one product’s card | Between different product pages |
| Each color gets its own URL | No (one product page) | Yes (better SEO) |
| 2,048 variant limit applies | Yes (Shopify limit per product) | No (separate products) |
| Where it runs | Product page plus product cards | Collection pages plus product pages |
And plenty of stores run both. RVI handles the product page image filtering plus card swatches for products that have real variants, while Rubik Combined Listings groups separate color products so each one keeps its own URL. If your colors are already separate products, the card swatch toggle in RVI won’t link them. That’s by design. For a deeper read on the collection grid side, see our collection page color swatches guide and the broader guide to adding color swatches on Shopify. For general store strategy, the team over at Craftshift compared the best Shopify color swatch apps for 2026.
Troubleshooting on Dawn
If swatches don’t show on Dawn cards after you enable them, check three things first: the toggle is actually on, your products have images assigned to variants, and you’re looking at a real collection or search page (not a custom section the app can’t see). Dawn maps natively, so a clean install rarely needs anything else.
A quick checklist when cards stay blank: confirm “Enable on product cards” is on in Swatch settings, confirm the product has variant images (no images means no swatches to show), clear your browser cache, and try an incognito window to rule out a stale cache. If you run a customized Dawn child theme with rebuilt card markup, the default selectors may not match. That’s the one case where you contact support, and they’ll map your custom card structure so the swatches attach correctly.
For product page issues (which are separate from cards), we keep a dedicated fix guide for swatches not working. And if you’re deciding how many photos to load per color before any of this, read how many images per variant on Shopify first. Dawn-specific product page setup is covered in our Dawn theme variant images guide.
See the live demo store, watch the tutorial video, or read the getting started guide. Running separate color products instead? Check the Combined Listings demo and its docs.
Frequently asked questions
Does Dawn support product card swatches without code?
Yes. Dawn is one of the 177+ themes mapped natively in Rubik Variant Images. You install the app, turn on “Enable on product cards” in Swatch settings, and the swatches appear on collection cards. No Liquid edits, no developer.
Can I show only color swatches on the cards, not size?
Yes, and that’s the default. Product card swatches show the first variant option only out of the box, which is usually color, so cards stay clean. You can change which option appears in the Product Card style tab.
Do card swatches slow down my Dawn collection pages?
No. The swatches are metafield-based with no external API calls, so they load with the page itself. There’s no server round trip to fetch swatch data, which means no spinner and no layout shift on the collection grid.
How do I make the card image change when a swatch is clicked?
Image swap on click is part of the product card swatch behavior. When enabled, clicking a swatch swaps the card photo to that variant, and you can also set it to update the card’s price and add-to-cart link. Hover previews the image on desktop.
Will this work if each color is a separate product?
No. Product card swatches in Rubik Variant Images handle the variants of one product. If each color is its own separate product with its own URL, use Rubik Combined Listings to group them and show collection swatches across those products instead.
Related reading
