We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Re: Variant Image Swatch Resolution

Variant Image Swatch Resolution

CustomHatsCanad
Tourist
6 0 1

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

Replies 7 (7)

Guleria
Shopify Partner
4299 825 1189

Hello @CustomHatsCanad ,

 

swatch-image.png

 

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

 

Thanks

- Elevate Your Store with Expert Shopify Services. Email: guleriathakur43@gmail.com - Need a quick fix or a tailored customization? I’ve got you covered.
- Looking to enhance your pages? Try GEMPAGES- a powerful drag & drop page builder.
- Let’s make your store stand out. Get in touch today!
- My Apps: Productify Groups – Smart product grouping made easy.
CustomHatsCanad
Tourist
6 0 1

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

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

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

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

CustomHatsCanad
Tourist
6 0 1

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. 

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

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

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

CustomHatsCanad
Tourist
6 0 1

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? 

satykumar36
Shopify Partner
3 0 0

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