Solved

Blurry Image on Dawn Theme Collage

dylan123
Tourist
8 1 1

Hi, I currently have the Dawn Theme's Media Collage on my homepage. I'm using 1 product block and 2 image blocks.

 

The image blocks are high quality, but for some reason, the product block is making my product image blurry. When you click into the product, the image is high quality, so not really sure why its changing on the collage.

 

Grateful for any support on fixing this issue 🙂

 

Thanks in advance!

Accepted Solution (1)
dylan123
Tourist
8 1 1

This is an accepted solution.

Not sure if this will affect speed or if any issues will arise later, but It seems like I was able to figure It out for now. Collage is now crisp.

Removed all the if statements except for one in each section, so that any width over 165 corrects to 2048px.

  • Before

Screen Shot 2022-09-07 at 8.42.47 PM.png

  • After

Screen Shot 2022-09-07 at 8.43.29 PM.png

 

View solution in original post

Replies 15 (15)

suyash1
Shopify Partner
9078 1129 1479

@dylan123 - can you please share the page link where you have this issue?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
dylan123
Tourist
8 1 1

Hi! its laurelway.us

suyash1
Shopify Partner
9078 1129 1479

@dylan123 - I can see that your original image is 360x360 and it is been stretched and hence it is blurred, I recommend to use higher quality image with 1000x1000 dimensions

 

https://cdn.shopify.com/s/files/1/0618/1001/6413/products/Purple_Green_Tie_Dye_Crewneck_1copy.jpg?v=...

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
dylan123
Tourist
8 1 1

The image i'm using is 2048 × 2048!

suyash1
Shopify Partner
9078 1129 1479

@dylan123 - please open page in customize settings and check i0f there is any setting then which is reducing image dimensions, because as you can see in above link, that is the image which is been used and it is 360x360 resulting in blurry images

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
dylan123
Tourist
8 1 1

The image is pulling straight from a product on my site because its a product block. And the product image uploaded is 2048x2048. Attached a photo.

The settings in customize settings are pretty limited so I don't see anything that would be downsizing the image. Attached a photo for this as well!

suyash1
Shopify Partner
9078 1129 1479

@dylan123 - any setting where it can be set for desktop view or mobile view , something like that?

Because I think this collage is mobile specific, on mobile will look good and not that good on desktop

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
dylan123
Tourist
8 1 1

I mean, I'm able to view the customization screen as mobile, but I honestly doubt the collage is mobile specific as there's no way to hide It on desktop. Plus, the image is still being blurred on mobile 😞

 

I believe something in the code is causing the image to be downsized above certain dimensions

suyash1
Shopify Partner
9078 1129 1479

@dylan123 - check collage section settings, check if any code you see which is downgrading the images

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
dylan123
Tourist
8 1 1

I've been trying to, but I don't really know how to read code, which is why I'm posting here to get some help! 🙂

suyash1
Shopify Partner
9078 1129 1479

@dylan123 - can you add me to your site? I can try to check it, I can send collab request

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
dylan123
Tourist
8 1 1

This is an accepted solution.

Not sure if this will affect speed or if any issues will arise later, but It seems like I was able to figure It out for now. Collage is now crisp.

Removed all the if statements except for one in each section, so that any width over 165 corrects to 2048px.

  • Before

Screen Shot 2022-09-07 at 8.42.47 PM.png

  • After

Screen Shot 2022-09-07 at 8.43.29 PM.png

 

camillelinh
Visitor
2 0 0

Hi @dylan123 ,
In what section of the code is this? Is it collage.liquid?

And since then, did any issues arised?

Thanks!

LitCommerce
Astronaut
2860 684 732

Hi @dylan123,

Please send me the code of product-card.liquid file, I will check it for you

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
dylan123
Tourist
8 1 1

Thank you @LitCommerce! Please see my solution below.

I think I figured It out by not letting Shopify compress my images, but would love to hear your thoughts. 

Do you think my solution could cause any issues to arise in the future?