Change the appearance of the color swatches (Turbo Theme)

Store Design
1

Hello to the entire Shopify community!

I have set up the color swatches on my site with the turbo theme. I made it visible on the product pages but also on the collection pages.
However, this appears as a large colored square. Is it possible to have circles and smaller?
If anyone has a solution to this problem, I would be very grateful!

Here is the link of my shopify (it’s a preview): https://q8oqlrz4gwpj4k8v-1196425333.shopifypreview.com

Thanks in advance to all!
MC

2 
.swatch-element.color.swatch-element label {
    width: 25px;
    border-radius: 33px;
    height: 34px;
}
.swatch-element.color, .swatch-element.color label {
    border-radius: 20px;
}
.collection_swatches .swatch span{
    border-radius: 20px;
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->style.scss.liquid

1 Like
3

Thank you for your reply. This applied perfectly to the product pages, but not to the collection pages.

Screenshot below.

Sans titre.png
Sans titre.png1308×586 537 KB

On the collection pages I would like it to be smaller if possible.

Thank you so much in advance,

4 
.collection_swatches .swatch span {
    border-radius: 16px;
    height: 24px;
    width: 6px;
    min-width: 24px;
}
1 Like