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

[michellelholm]

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!

[Sweet_Savior_3]

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?

[michellelholm]

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.

[lizziebemis]

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

[Sweet_Savior_3]

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

[TechSolvo]

You can find a working code for color swatches (dawn V13) here https://youtu.be/95MglAWtQeU. 

[Gotyour]

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

[lizziebemis]

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

[TechSolvo]

Officially it's not been added to dawn theme yet but you can add by following my above tutorial and code link is also added in description.

[MattBailey]

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

[lizziebemis]

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~

[Gotyour]

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. 

[MRamzan]

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

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

[TheTeeSis]

thanks

[tim-harding]

Thank you!

[Axelinho]

Hi MRamzan,

Is this compatible with the newest Dawn? 15.1.0

[MRamzan]

Here is the latest video:

[EliskaM]

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 🙂
E.

[MRamzan]

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.

[BridgetBoyer]

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? 

[uncommonclothco]

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 

[made4Uo]

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

[pooshda]

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.

[Nikunj28]

While I was able to add color variants successfully in the Shopify product page, the theme still does not show the swatches and it asks to enable in "product options". Not sure how to navigate this..would you know?

[gr_trading]

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.

[made4Uo]

For future readers, there's already color swatches included in the updated Dawn theme or other Shopify free themes. You can read more information here.

[ed_meehan]

The feature is not available unless you request access. Pretty lame considering they say it is available on the theme page.

[uncommonclothco]

That's not true, you can integrate color swatches just as I mentioned with the theme right out of the box: https://community.shopify.com/c/shopify-design/how-can-i-add-color-swatches-to-product-pages-in-the-...

[ed_meehan]

Yes you are correct. I was just very frustrated yesterday because none of the official Shopify documentation shows the correct way to do it. I could see the variant value object reference in the theme, but no real solution.

I gave your comment a extra thumbs up in hopes of helping someone else frustrated with this process.

I just get so frustrated with Shopify documentation.

[gr_trading]

Hi @ed_meehan ,

Please refer to the below video to see how you can use default SWATCH feature in DAWN.

Hope this will helps...

[littleCaptain]

I made it work in newest Dawn theme 15, but only for categories that have "color" metafield, e.g. clothings. The challenge I am facing now is: How can I add a second variant layer with also this color metafield? Right now, only one variant layer can connect to the color-metafield.

How can I use this feature for a product that has two color options?

[Nikunj28]

I am stuck at the first layer. How were you able to do it?  If you could share the details it would be really helpful

[littleCaptain]

I needed to change my product category to a category that has a color option as default, e.g. "clothings". A product in "clothing" can add the metafield "color" as variant. So, first change category to clothing, then add a variant, then connect the variant to the category-metafield "color". Then I picked the colors and it worked. 

[littleCaptain]

Temporary solution: I changed my category to a "furniture electronics" that allow 2 color attributes I can use. In addition to the normal "color" attribute, there is a second "color top layer" attribute.

So, for now my I have to delcare my product a furniture until shopify allows using these swatches in a more dev-friendly way.