Make variant icons bigger in product page

[CPHAGEN_Nordic]

Hello everyone,

I am looking for a solution to a little design problem I have on my webshop (www.cphagen.com) with theme Cascade.

I would love the icons/preview of the variants, to be a much bigger on the product page.

Now, I think they are 42x42 but I would prefer 55x55 or even 60x60.

Can any of you experts help me with this?

Thanks in advance!

[niraj_patel]

Hello @CPHAGEN_Nordic

You can add code by following these steps to make swatch image larger

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.swatch-image div:first-child{ width:60px !important; height:60px !important; }

[PageFly-Richard]

Hi @CPHAGEN_Nordic ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.min.css->paste below code at the bottom of the file:

.swatch-view-item .swatch-image .star-set-image {
    width: 55px !important;
    height: 55px !important;
}

NOTE: You can change value 55px to fit your website

I hope it would help you
Best regards,

Richard | PageFly

[CPHAGEN_Nordic]

Thank you very much for this quick and effective solution!
I have used this one and I am very satisfied with the results.

[CPHAGEN_Nordic]

Thank you!