How can I rename 'Color' variant option to 'Material' in Prestige Theme?

[milyz]

You will need first to create variants whose option is "Color". To do that, simply open the product in your Shopify admin, and create a new option called "Color"

Im using the prestige theme and want to know if it's possible to rename the option name for variants. Because on default it's on ''color'' but all the variants on my store are under ''material''..

So I want to switch it out for ''material'' so I dont have to rename all the options in my store and name them ''color''.

Help would be greatly appreciated!

Kind regards,

Milton

[laurenbienendav]

HI! were you able to figure this out?

[scottjcook]

Hi there, did you figure this out if you can rename the color swatch?  If so, any information on how to do so would help.

[Daniel-Anverso]

Go to snippets/product-form

Find this line of code:

{%- assign color_label = 'color,colour,couleur,colore,farbe,색,色,färg,farve,frame color' | split: ',' -%}

and you can add your custom swatch option name like this:
{%- assign color_label = 'new name,color,colour,couleur,colore,farbe,색,色,färg,farve,frame color' | split: ',' -%}

[stephenreed]

I gave this a shot and found that it worked well. By changing the first color label to Material, the product page is showing swatches for our Material variant.

However, we're seeing that the swatch is not displaying on the Collection pages. Does anyone know what code needs to be changed to display the swatches correctly on the Collection page when this change is made to the product-form.liquid?

{%- assign color_label = 'material,colour,couleur,colore,farbe,색,色,färg,farve' | split: ',' -%}

@Daniel-Anverso 

[stephenreed]

Reposting with images

I gave this a shot and found that it worked well. By changing the first color label to Material, the product page is showing swatches for our Material variant.

However, we're seeing that the swatch is not displaying on the Collection pages. Does anyone know what code needs to be changed to display the swatches correctly on the Collection page when this change is made to the product-form.liquid?

{%- assign color_label = 'material,colour,couleur,colore,farbe,색,色,färg,farve' | split: ',' -%}

@Daniel-Anverso 

[stephenreed]

For anyone looking for this, I found the spot. The same code needs to be updated on the product-item.liquid. So you need to make a change like the below in both the product-form and the product-item.

{%- assign color_label = 'material,colour,couleur,colore,farbe,색,色,färg,farve' | split: ',' -%}

[vivianatroya]

Hi! Did you manage to make it work on the individual product page as well? It works for me on collection pages and product lists as shown in your images, but when you go to product page it shows the material options as texts not swatch...

[stephenreed]

I had to update in two spots - when I updated it on both product-form and product-item, it worked as expected in collection pages and on the product. If I recall, when I just did it in one spot, it did the same thing - it only worked on collections and not on the product page.

[timst]

It does not work on my shop. I'm using the Prestige-Version 5.7.1 

[Stefan21]

Hi there,

does anybody know how to change the color swatch icon to a round design?

Thank you!

[Muhammad_Ali_S]

Hi @Stefan21,

Which theme you're using?

[Stefan21]

Hi @Muhammad_Ali_S ,

I am using Prestige

[Muhammad_Ali_S]

@Stefan21,

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss or theme.css and paste this at the bottom of the file.

.ColorSwatch {
  border-radius: 50%;
}

 Please let me know if you need any assistance.

Thanks You!

[Stefan21]

hi @Muhammad_Ali_S ,

thank you very much for the answer!!!!

Is it possible when I select the color that the selection is round and not square as in the photo?

[Muhammad_Ali_S]

@Stefan21,

Add this too.

.ColorSwatch__Radio:checked + .ColorSwatch::after {
    border-radius: 50%;
}

Also, Like the solution, if it works for you.

Thank You!

[kmharris16]

Is there CSS to get the hover shape to be a circle as well? Thank you so much for the previous CSS!

[Muhammad_Ali_S]

@kmharris16,

You're welcome.

Add this at the bottom of your theme.css file. Adjust the 50% value as you want.

[data-tooltip]:hover::before {
    border-radius: 50%;
}

Do let me know if it works for you by leaving a like for me.

[kmharris16]

That didn't seem to work for me 😞 any other ideas?

[Muhammad_Ali_S]

Please share your store URL or add me as a staff so I can check.
Name: Zeian Shahzad

Email: shopify.zeian@gmail.com

[kmharris16]

Sent a staff invite, as it's not implemented in my live theme. It is in copy of the theme, at the top of the theme list! Thank you so much!

[Muhammad_Ali_S]

@kmharris16,

It's working fine. Please check again.

[kmharris16]

I think I understand what happened - I meant this hover box, not the area around the text label!

[Muhammad_Ali_S]

@kmharris16,

Sorry, For that I added this code. Please have a look.

.ColorSwatch:hover::after {
    border-radius: 50%;
}

[kmharris16]

Perfect, that worked thank you so much!!!

[Muhammad_Ali_S]

@kmharris16, You're welcome.

[Raoul2]

i have the same problem with white can you help me too?

[Muhammad_Ali_S]

@Raoul2, Please share your Store URL.

[Hollerbach3D]

Hi Zeian,

I've been following this thread to get my own watches working properly. So far everything you said before worked! However for some reason there's a box around the last color, white. Any idea how to fix it? Picture below.

Also wondering if there's a code to adjust the size of the swatches.

Thanks!

[gettherefaster]

first of all, thank you for this great tutorial. everything looks great. however, I have the same problem with the white color. it is still displayed (only in the mobile version) as a box.

https://ibb.co/G3CMbBn 

here is the website: https://vvolv.de/collections/vaporwave - but you have to open it in the mobile browser to see the problem

[Kathis]

Hi there! I tried to use this code, and almost everything worked fine, however when I'm hovering over it, it is still not round yet. Could you let me know which code to add, so this will be fixed as well?

[Sven5883]

@Muhammad_Ali_S do you might know how to change so that when I hover over color swatch that says 2 or 3 words, not just one. So for example where it says white but to say white gold.

Thank you.

And one more I can't change to say material instead of color I use prestige v2 so it might need another code or something (if you can make a code for material one that will be awesome).

Thank you very much.

[JJsEmporium]

hi mohamed i used the code it worked but the  color swatch in product page is still box shaped not circular

[fatima97]

hey @JJsEmporium and @Kathis 

I tried the above with some modifications to get this :

please follow below:

in Edit code > theme.scss file > paste the below at the end of the code

.ColorSwatch {
  border-radius: 50%;
}
.ColorSwatch:hover::after {
    border-radius: 50%;
}

Now in the same file (theme.scss.liquid) ctrl +f and find 

.ColorSwatch.is-active::after,
.ColorSwatch__Radio:checked + .ColorSwatch::after {
  border: 1px solid currentColor !important;
}

After important just add:

border-radius: 50% !important;

It will look like this then:

.ColorSwatch.is-active::after,
.ColorSwatch__Radio:checked + .ColorSwatch::after {
  border: 1px solid currentColor !important;
  border-radius: 50% !important;
}

Hope this helps! Do let me know if the solution is acceptable. Feel free to contact for further assistance 🙂