How can I increase the size of my color swatches?

[Claud123]

Hey Guys, My image swatches are too small and I would like them to be bigger. Since they are textures/colors its important that they are big enough to be seen but not so big they ruin the aesthetic. Can anyone help? My theme is pipeline.

Thanks in advance!

[KetanKumar]

@Claud123

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Claud123]

Hello Ketan,

Thank you so much. I will wait patiently. Your help means a-lot!

[KetanKumar]

@Claud123

can you please share store url

[Claud123]

most definitley. URL for one of my products is https://flordcanada.ca/collections/recycled-flooring/products/gatorpro-roll?variant=42570695999714

password is flord123

[KetanKumar]

@Claud123

yes, please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.swatch__button label 
 {
   width: 40px;
   height: 40px;
 }
.swatch__button input:checked~label:after 
 {
   top: -5px;
    left: -5px;
    width: 50px;
    height: 50px;
 }

[Claud123]

thank you so much it worked!!! is there anyway i could make sure they all align

straight. they are a bit crooked by default i think in pipeline.

[KetanKumar]

@Claud123

yes, please add this code also

.product__align-left .swatch__button:first-of-type {
    margin-left: 0;
}

[FLProducts]

Hello ! Any chance you could help with the same issue but on the Shopify CANOPY theme? We sell wigs so the default swatch size is WAY too small to actually see the colour (Preview link: https://www.firstladyproducts.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=121517277278)