When I change the colour swatch on my collection page, the image quality for the variant displayed reduces making it blurry

Shopify Discussion
1

When I change the colour swatch on my collection page, the image quality for the variant displayed reduces making it blurry

The main images displayed in the collection page look fine and good quality but when I change the variant, it becomes blurry. I’m not sure how to make it so that the image quality doesnt change and images aren’t stretched or anything. My images are all 1024 x 1024 so the quality should look fine. If anyone can help I’ll really appreciate it.

2

I remember the setup from yesterday. The blur you’re seeing now happens because when you change colors, the theme is loading a smaller version of the image (Shopify automatically resizes images to reduce load time).

The fix is pretty simple, I’ll just adjust the code so it loads the full quality version of each variant image when you switch swatches. That’ll keep everything sharp and consistent.

3

Hi @user2237

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

6

Hi @user2237

This is normally because the theme loads a lower res image for variant previews. In your theme code find your collection product image snippet - search for img_url or image | img_url: and increase the size parameter to a higher number (ex: change img_url: ‘360x’ to ‘1024x1024’ or ‘master’). Save and test again.