How to add color swatches to Shopify's Dawn 14.0 theme

I want my multi-color products to be able to switch according to the image display, but there is no swatch option in my dawn template, can you help me to solve it?

My current situation:

What I want to:

My website is: https://www.lilyband.com/products/four-leaf-diamond-apple-watch-band?_pos=1&_psq=four&_ss=e&_v=1.0

Thx for the help!

Hi @scarlett996 ,

Yes, we can add the color swatches in the dawn theme.

For this we do need to map the color name with the image and add the image as background image for that color.

Let me know if you need any assistance.

Thank you

HI @LuffyOnePiece

I don’t really understand what you mean by map color, do we need to add code?

Best

Scarlett

Its been a while since I looked at Dawn theme, but I’m pretty sure it supports color swatches right out of the box. You create swatches when you create the variants in the admin/product section. In admin, as you add your variants to your product you should notice to the left of each variant a image box where you can upload a image. That is the image for your swatch. Here is a screenshot…

Hi @scarlett996,

I hope you’re doing well. You can add multiple color variants with an image swatch by using the Inkybay Product Personalizer App.

With the Product Option feature, you can easily create multiple color options and display them as drop-down options, radio buttons, swatches, checkboxes, etc. Each variant can have its own image or swatch. When customers select a specific option, the corresponding image will show up automatically.

Inkybay also lets you create different product options like text fields, file attachment options, single/multiple choice options, etc. Also, you can set extra pricing for each option.

No coding is required, and a simple setup. The best part of Inkybay is that it offers a free 21-day trial and 24/7 live support, so you can explore it without any cost and see how it works for your product.

Hi @scarlett996 :raising_hands:

Sorry for getting back to you a bit late — hopefully you’ve already found some progress with your store in the meantime.:blush:

Making the product images respond dynamically to color selections is definitely possible, and you can create this type of experience quite smoothly with Easify Product Options.:smiling_face_with_three_hearts:

I’ve created a similar demo to help you better visualize how it works:

  • This is the result:

  • This is the app setting:

Inside the app, you can first build your color choices using the Color Swatches option type so customers can pick colors visually instead of using the standard Dawn dropdown selector.

To connect each color with its own preview images, you can then add a Design Layer option and upload separate image assets for every color variation.

After that, simply enable the Product Personalizer feature so the preview section can update live directly on the product page whenever customers switch between colors.

The final step is to open Advanced Settings and enable Conditional Logic. This allows you to create rules that control which image layer appears for each selected color. For example, choosing Black can automatically display only the Black product images, while selecting White will instantly swap the preview to the White version instead.

This usually creates a much more polished shopping experience because customers can immediately see the visual changes on the product itself rather than only changing the variant name or dropdown selection.

The setup process is also quite straightforward and beginner-friendly, so you can achieve this kind of color-based image switching without editing theme files or building custom code from scratch.:pink_heart: