Product page images blurry on initial page load

ben_langly
New Member
6 0 0

We're experiencing blurry product images on inital page load.  Problem is resolved when user refreshes page.  But that doesn't mitigate the poor initial experience.

Any thoughts / ideas on what is causing this and how it may be resolved?

 

Blurry image on page load example:

Shopify product images blurry on page load - example.jpg

 

Refresh the page and images nice an crisp example:

Shopify product images refresh and non blurry - example.jpg

e.g. https://www.langly.co/products/simple-camera-back-pack?variant=22095565636 

 

Cheers.

Replies 9 (9)

LitExtension
Shopify Partner
4860 1001 1132

Hi @ben_langly,

I checked and error due to lazyload of product image. You just need to remove lazyload, it will work fine.
Please send me the code of sections/product-template.liquid file. I will check and guide it for you.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
ben_langly
New Member
6 0 0

Hi @LitExtension thanks for your thoughts on this.  I've attached an extract of the code in a txt file.

Regards, Ben.

LitExtension
Shopify Partner
4860 1001 1132

Hi @ben_langly,

It has already been rendered to the product file so can you send me more code of snippets/product.liquid .

I will check it.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
ben_langly
New Member
6 0 0

Hi @LitExtension find attached, hopefully this is what you need.  Cheers, Ben.

LitExtension
Shopify Partner
4860 1001 1132

Hi @ben_langly,

Sorry, it still goes to a file named: 'media-grid'. https://i.imgur.com/d9i7h0r.png

So can you send me more code of snippets/media-grid.liquid

I will check it.

 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
ben_langly
New Member
6 0 0

Sure thing, please find attached.  Cheers.

LitExtension
Shopify Partner
4860 1001 1132

Hi @ben_langly,

Please change the code: https://i.imgur.com/q0DPX0o.png 

Code:

<img class="{{ image_gallery_class }} "
					src="{{ media | img_url: image_zoom_size }}"
					{% if image_gallery == 'lightbox' %}
						data-lightbox
						{% if main_slide %}
							data-mfp-src="{{ media | img_url: image_zoom_size }}"
						{% endif %}
					{% elsif image_gallery == 'zoom' %}
						data-zoom="{{ media | img_url: image_zoom_size }}"
						{% if main_slide %}
							data-lightbox-mb
							data-mfp-src="{{ media | img_url: image_zoom_size }}"
						{% endif %}
					{% endif %}
					alt="{{ media.alt | escape }}">

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
ben_langly
New Member
6 0 0

@LitExtension 

Thanks for sharing, have replaced the code in a test theme, this fixes the blurry image issue but the add to cart function on the product page doesn't seem to be working in the test theme now.

Video recording here https://watch.screencastify.com/v/JOaG3iFu4RKogylb9jjy

Preview link here https://i0x58ucipxm8hlnc-1503760.shopifypreview.com version langly/feature/v1.4-nav-and-video (image fix)

Regards, Ben.

LitExtension
Shopify Partner
4860 1001 1132

Hi @ben_langly,

I checked and add to cart may be broken by klaviyo app, you can turn it off and check again.

And code image doesn't affect add to cart, just hope you are clear on this.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify