Change the Size of the Box of the Color Swatch

[Apo94]

Hello,

I would like to know how I can change the size of the box where the color swatch is displayed. I added some custom colors, but now I need the box where the color is displayed to be bigger, so that the customer can see the color design better. How can I do this? 

[Finer]

@Apo94 can you provide a link to your store or tell us if the color swatches are provided by your theme or via app?

[Apo94]

Thats the site, https://742163.myshopify.com/ and the password is 123

The theme is pipeline. I would like to change the size of the color swatch boxes. 

[Finer · Accepted solution]

@Apo94 in the theme's css file, you can add the following CSS at the bottom and modify the values.

/* Change these values for the color swatch size */
.form__selectors .swatch__button label {
    width: 34px;
    height: 34px;
}

/* Change these values for the white border of the current selected variant */
.form__selectors .swatch__button input:checked~label:after {
    top: 3px;
    left: 3px;
    width: 28px;
    height: 28px;
}

[Apo94]

Thanks, this helped. However, is it possible to create a zoom effect when being with the cursor on top of the color?