How can I display color name above swatch on Dawn 4.0?

[Joan65]

Hello. I am using Dawn 4.0. I have successfully recoded the product pages to show color swatches. However, I need the swatch color name to appear above the swatch when it is clicked on. Any help would be very appreciated.

https://madisonavegifts.com/products/vietri-rustic-garden-medium-cachepot

[LitCommerce]

Hi @Joan65 ,

What do you want it to look like?

[Joan65]

Hi again.

I would like this solution: Color - Cobalt, or whatever color is clicked on to appear above the swatch row.

[Joan65]

[LitCommerce]

Hi @Joan65 ,

Please go to main-product.liquid file, find ‘variant-radios’ and change code here:

Code:

Hope it helps!

[Joan65]

Hi again, sorry, I don’t understand. Which code do I insert into {{ option.name }}: {{ option.selected_value }}

[Joan65]

Hello FieRce,

Thank you for the replies. I do know how to do some coding. I would like it to work just like this example: https://www.horchow.com/p/golden-rabbit-16-piece-swirl-dinnerware-set-cprod163210019?childItemId=NMHEDXU_40&position=22

I just want the color name to appear above where I have shown in picture.

[Joan65]

Hello FieRce,

I made all the code changes, see below.

https://madisonavegifts.com/products/vietri-rustic-garden-medium-cachepot

The color swatches have no color. The first color swatch when clicked on says color:color, above the swatch row.

I do not want the hover to create the black pop up. I just want it to show the text above the swatches to say: Color-White, Color-Cobalt, etc.

Sorry for the confusion.

Would like it to work like the following.

[LitCommerce]

Hi @Joan65 ,

You just need to change the code:

=>

Hope it is clear to you.

[Joan65]

Ok. Please let me know if this is something you can figure out.

Thank you again.