Change the Size of the Box of the Color Swatch

Shopify Discussion
1

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?

2

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

3

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.

4

@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;
}
5

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