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

michellelholm
Excursionist
24 0 3

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!

Screen Shot 2024-02-16 at 11.40.39 PM.png

Replies 12 (12)

Sweet_Savior_3
Shopify Partner
1054 84 93

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?
Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
michellelholm
Excursionist
24 0 3
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
Shopify Partner
3 0 3

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
Shopify Partner
1054 84 93

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

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
TechSolvo
Shopify Partner
5 0 0

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

Yasir
Gotyour
Tourist
10 0 1
I have the Dawn 13.0.1 theme. There is no "color swatch" option in the
settings.
lizziebemis
Shopify Partner
3 0 3
Exactly! The functionality has only been released to a limited number of people. They released the documentation BEFORE they released the functionality.
TechSolvo
Shopify Partner
5 0 0

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.

Yasir
MattBailey
Tourist
3 0 0

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

lizziebemis
Shopify Partner
3 0 3

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
Tourist
10 0 1

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
Shopify Partner
126 1 20

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

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

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112