New Shopify Certification now available: Liquid Storefronts for Theme Developers

I Have Color Names But How To Add Color Swatches With Names?

PatrickAyers
Tourist
9 0 5

Hello,


I need some help, I have the SYMMETRY theme and right now it only displays product colors as words. I would like product colors to be displayed as color swatches with the color name when you hover and or select the color. I would love some help on this,  attached below is how the colors currently look.

 

Screen Shot 2023-06-01 at 9.31.31 PM.png

 

I would appreciate any help or advice you can give, I've spent countless hours over the last week trying to find a solution.

Thanks,

Patrick

Replies 3 (3)
made4Uo
Shopify Partner
3787 710 1101

Hi @PatrickAyers 

 

You need to edit the several theme codes for this. This will not be a simple edits. I suggest to hire a developer to help you with this

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
dmwwebartisan
Shopify Partner
12267 2545 3679

@PatrickAyers 

This is code customization work, This will not be a simple edit.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Ogap31
Shopify Partner
14 0 1

Hello @PatrickAyers ! 🙂

 

I had the same problem as you, but now I've figured out how to do it (without going through the code, because the symmetry theme allows it natively).

 

Go to theme customization, then theme settings.

Search for "Swatches". Here, fill in the required information.

You can also activate the display of swatches on collections and product grids.

 

You'll find help at this link: https://cleancanvas.co.uk/support/general/swatches

 

Ogap31_0-1698231526471.png

 

I've attached a screenshot to make things clearer. You'll see that my color variants in swatches are in French, so they must correspond exactly to the names of my color variants.

 

For example, if you have Black-Blue in color, make sure that the variant is named exactly Black-Blue in swatches.

 

Note that the swatch option name must be the name of the option (here, Color) and not the color itself (e.g.: The option is: Color, the variant is: Red).


I hope this helps! 🙂

Hugo