How can I add color swatches to product pages in the Dawn theme?

I am having trouble figuring out how to add color swatches to the product pages. I’ve read many tutorials and most say to go to theme settings and click “product” on the left side. I don’t have that option. I only have “product card” which doesn’t mention anything about a swatch. What am I missing? Also, I would ideally like to use a snip from the actual color of the shirt and not just a hex color. Is that an option in Dawn as well without installing an app? Thanks!

Hello @michellelholm

Here’s how to add color swatches to Shopify’s Dawn theme:

  1. Go to Shopify admin
  2. Click Online Store
  3. Click Themes
  4. Click Customize the Dawn theme
  5. Open the Theme Settings tab
  6. Open the Products section
  7. Set your product variant style to Swatches
  8. Select Show custom swatch images
  9. Click Save to apply the change

Please check the steps and let me know if you still face any issues?

That is the process that I followed, but I do not have “products” in that
dropdown. I have “product card” option but that doesn’t show the color
swatch option.

4 Likes

I am experiencing this same issue. I’ve looked in the theme.liquid file and there seems to be no “product” options. Any thoughts?

3 Likes

It seems that the update is not available still on the stores. So you need to wait or can go by hard coding it.

your answer is literally her exact problem. C’mon man

2 Likes

I spoke with our Shopify rep this week and I have a bit of info, for anyone coming here and getting frustrated with the lack of answers. This set of features is in beta and there’s a list to get early access. However, they haven’t actually released it for early access yet and you have to have a Shopify PLUS store. Here’s the info on the all the updates: https://www.shopify.com/editions/winter2024

Obviously, this information is subject to change at anytime, once they start releasing to the early access people and to the public at large. It seems they released the documentation before they released the actual beta. ~rolling eyes emoji~

2 Likes

This is disappointing. The ability to add a color swatch with a circle of color and a hover over name of the color should have already been a part of a product page. The tutorials on Shopify lack basic usability. YouTube does a better job.

3 Likes

I have the Dawn 13.0.1 theme. There is no “color swatch” option in the
settings.

Exactly! The functionality has only been released to a limited number of people. They released the documentation BEFORE they released the functionality.

1 Like

You can add color swatches in your product page of DAWN theme.

in this video you will find it. Without using any App.

2 Likes

thanks

Hi, I have the same problem. I spoke with Shopify support today and for now this feature is said to be unavailable. There is no known date when it will be available again. If you want, I can send you an article on how to code it - they also sent me directly from Shopify support (I haven’t looked at it yet, so I don’t know how complicated it is). Plus she also sent me some links to apps - but I assume that you won’t want to use another app like me either :slightly_smiling_face:
E.

Hello Eliska. I already solved it in the video. If you are not able to fix it then you can share me your store link. I will look into it. Or add me staff.

Thanks.

I was able to add swatches with the latest DAWN 15 theme. Swatches can only be used with products that have variants connected to category metafields entries for color. I had to first assign an appropriate category for the shopify metadata fields so you can connect color to the color variants you have in place. You can click on the little database icon to connect them after you have the category selected. After this you can set the swatch

Swatch Option Tutorial

4 Likes

I was trying to add the swatch following the instructions here and the color was not connected. Just for other people that encounter this. I was able to resolved it by click the metafield, see image below highlighted in green

1 Like

This helped me so much, I found this a couple days ago and I didn’t understand exactly what I had to do but I just went back in and tried it again and after defining that category you mentioned (I have nothing in there for my 60’ish shirts so far, but I’m brand new and haven’t launched yet) I wasn’t wanting to copy/paste someone else’s code into my site to enable these but I tried following your post again and it worked great.

Thanks for this! I have a feeling I need to go through my currently uploaded 60 products now manually since I didn’t do it from the start but no biggie probably take 20 minutes now that I’m adding the custom color hex’s / names to fill out all my choices.

Thank you!

Hey there!! I was able to add the swatches to the products, thank you so much! What about adding color swatches to he collection page?

1 Like

Hi @michellelholm ,

Yes, if you don’t have settings for color swatches you can build this feature using metaobjects please refer the below video how to create custom color swatches.

Hope this will help to build your own logic.