How can I increase the swatch variant box size in my online store?

Store Design
21

@adurma

it’s my pleasure to help us

22

Hi Guys

I’m having the same problem with our theme Avenue on this page:

https://47tedmx2x6p1c5q2-57125896385.shopifypreview.com

Could you help with the CSS of just increasing the size of the color swatch. Maybe to 50-60px?

Many thanks,

Veronica

23

@Illuminated

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

can you please give product url if swatch color i have check but i can’t see any product

24

Hi

Thanks so much for getting back to me,

Please see link here: https://0orejpqouo4wxuhc-57125896385.shopifypreview.com/collections/kids-t-shirts/products/kids-glow-in-the-dark-t-shirt?variant=39935513329857

We’re trying to increase the size of just the color variant swatch. Not the sizing.

Many thanks,

Troy

25

@Illuminated

thanks for detail

can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.min.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
.swatch .swatch-element label:not(.error) {
height: 60px;
    line-height: 60px;
min-width: 60px;
}
26

Hi

Thanks for your quick reply. I just added the code, but it didn’t change anything.

Please have a look at the page.

Not sure how it might work.

Many thanks,

Troy

1 Like
27

@Illuminated

oh sorry i can not see above code can you please add?

28

Hi Ketan

I added the code you mentioned:

.swatch .swatch-element label:not(.error) {
height: 60px;
    line-height: 60px;
min-width: 60px;
}

Added it to css-variables.liquid folder

But this hasn’t changes the colour swatch on our product page here: https://apqf64elqegg00dt-57125896385.shopifypreview.com

We would like the images to be 50-60px big.

Can you help?

Many thanks,

Troy

29

@Illuminated

can you please share prduct url?

30

Hi Ketan

Product URL: https://apqf64elqegg00dt-57125896385.shopifypreview.com/collections/kids-t-shirts/products/kids-glow-in-the-dark-t-shirt?variant=39935513329857

Many thanks,

Troy

1 Like
31

@Illuminated

great thanks

sorry bt i can’t see above code can you please add min and let me know

32

Hi Ketan

I’m a bit confused now?

You sent me a piece of code, I added this, but it didn’t increase the size of the Color variant.

This is the page: https://www.illuminatedapparel.us/collections/kids-t-shirts/products/kids-glow-in-the-dark-t-shirt?variant=39935513329857

The code you told me to add was:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.min.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second

.swatch .swatch-element label:not(.error) { height: 60px; line-height: 60px; min-width: 60px; }

I added this code and it didn’t increase the swatch size.

Any ideas, what I can try?

Many thanks,

Troy

1 Like
33

@Illuminated

yes i have checked its working now

34

Hi, I am using the broadcast theme and am not seeing the right area in assets to add this code to.

35

@webmaster123

yes, please provide store url

36

https://roxbury-pet.myshopify.com
password: robertson

Thank you so much!!!