Changing colour swatch sizes

[RVWebsitehelp]

Hi,

I am trying to change the shape of my colour swatches from circles to square/rectangle . I have a paid Vision theme made by fuel themes (they cannot help apparently) Is this possible? Many thanks

[Moeed]

Hey @RVWebsitehelp

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[RVWebsitehelp]

https://www.lazyluresfishing.com/

[RVWebsitehelp]

https://www.lazyluresfishing.com/

[Moeed]

Hey @RVWebsitehelp

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[RVWebsitehelp]

They are still round on the product page, this is the issue I am trying to sort. Shall I remove the previous piece of code I have just inserted? I await your next steps. Many thanks

[Moeed]

Can you send me the link of that exact product?

[RVWebsitehelp]

https://www.lazyluresfishing.com/collections/soft-plastics/products/arctic-assassin-12cm-20g

[steve_michael2]

Hi @RVWebsitehelp

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.variations .product-form__input--color input[type=radio]+label:after {
    border-radius: 0 !important;
 ]
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[RVWebsitehelp]

Thanks but this hasn’t helped either

[steve_michael2]

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.variations .product-form__input--color input[type=radio]+label {
    border-radius: 0% !important;
}

.variations .product-form__input--color input[type=radio]+label:after{
 border-radius: 0% !important;
}

result

[RVWebsitehelp]

Okay great. That looks much better but for some reason it’s still not showing on my end? Can you show me the exact location where I have to paste this please?

[steve_michael2]

Search theme.css/base.css

.variations .product-form__input--color input[type=radio]+label {
    border-radius: 0% !important;
}

.variations .product-form__input--color input[type=radio]+label:after{
 border-radius: 0% !important;
}

[RVWebsitehelp]

I don’t seem to have base.css have you created this?

[steve_michael2]

Find theme.css

[RVWebsitehelp]

I have tried searching for theme.css but nothing shows. The only thing I am getting is theme.liquid. Sorry I am not very good at this

[steve_michael2]

In theme.liquid, paste the below code before

[ZestardTech]

Hello @RVWebsitehelp

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

.variations .product-form__input--color input[type=radio]+label {
border-radius: 0% !important;
}

.variations .product-form__input--color input[type=radio]+label:after{
border-radius: 0% !important;
}

[RVWebsitehelp]

Amazing. Thank you very much

[Easify-Jolie]

Hi @RVWebsitehelp

I recommend Easify Product Options for this! It’s a straightforward way to customize your swatches, and it simplifies the process by not requiring any coding. Here’s how it can help you:

• This is the result

• This is app setting: Color Swatch in Easify Product Options allow you to set Swatch Shape and Column Width. All of these features are free!

I hope this answer helps solve the problem. If you need further assistance, feel free to reach out to Easify anytime!