How can I increase the size of color swatches in the Canopy theme?

Store Design
, , , ,
1

Hello! I am currently working on my company’s new website, we sell Wigs and Beauty Accessories so our Colour Tiles are SUPER important so that customers can see the wig colour accurately. The default size of the Canopy Theme swatches are EXTREMELY small and we really need them to be much bigger.

I have basic HTML knowledge so I can definitely change it myself, I just don’t want to mess up any other code lines while I’m at it. I believe I should be able to change the swatch dimensions on the styles.css.liquid asset but I don’t know which line directly correlates to these small circles:

Small default swatches
Small default swatches854×714 49.8 KB

Any help is greatly appreciated, thanks so much in advance! :slightly_smiling_face:

2

Hi,

Can you share your store url

3

Sure, here is the Preview. I managed to make the circles bigger, but now it looks strange if I make it any bigger since it’s constrained to the width of the block, is there any way to make the width of the swatch section wider to the right?

4

Hello! Just wanted to see if you’re able to help me out with my new question below, thank you so much in advance!