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/

[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 </body> tag

<style>
.product-card .product-card-swatches .product-card-swatch:after {
    border-radius: 0 !important;
}
.product-card .product-card-swatches .product-card-swatch {
    border-radius: 0 !important;
}
</style>

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 </head>

<style>
.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;
}
</style>

[RVWebsitehelp]

Amazing. Thank you very much

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

https://www.lazyluresfishing.com/

[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! 😊