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: ‘,’ -%}

[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.