I was able to increase the size of my variant image swatches, but now the pictures are fuzzy/pixelated. Any idea on how to increase the resolution of my variant image swatch pictures? Thank you in advanced https://customhatscanada.ca/products/flexfit-110c [Screenshot 2024-10-14 192831.png]

You will need to edit code of variant image swatches to update image size

This didn’t fix the resolution. I can already make them bigger, but the pictures are fuzzy when they blow up to a bigger size

I can change the size, but when I do make them bigger, the picture is pixilated. It doesn’t change the resolution when they enlarge.

You changed the width of the wrapper, not the image width. [Screenshot 2024-10-16 at 09.05.29.png]

Maybe I’m not changing it in the right file. I couldn’t find that exact line in the code. Do you know where this piece of code would live?

Go to edit code >> snippets/swatch.liquid Find line : assign image_url = swatch.image | image_url: width: 50 remove : “:width:50” or replace with: assign image_url = swatch.image | image_url

Variant Image Swatch Resolution

Shopify Discussion

Guleria October 15, 2024, 3:16am 2

Hello @CustomHatsCanad ,

Find the highlighted code in theme files and change width=50 with the desired size.

Thanks

Topic		Replies	Views
Swatch Image Size Store Design customizations	2	170	October 14, 2024
How can I resize and enlarge swatch images for better visibility? Store Design design , customizations , collection-page , landing-page , css , third-party-themes , shopify-themes , troubleshooting , product-page	6	159	April 3, 2026
Make Variant Image Swatch Larger (Symmetry theme Store Design customizations , css , product-page	4	626	November 15, 2024
Make variant icons bigger in product page Store Design design , customizations , third-party-themes , shopify-themes	4	129	March 10, 2023
Coding help! Make variants swatches bigger Store Design liquid , design , css , html , product-page	2	73	May 7, 2025

Variant Image Swatch Resolution

Related topics