Shopify themes, liquid, logos, and UX
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:
Refresh the page and images nice an crisp example:
e.g. https://www.langly.co/products/simple-camera-back-pack?variant=22095565636
Cheers.
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.
Hi @LitExtension thanks for your thoughts on this. I've attached an extract of the code in a txt file.
Regards, Ben.
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.
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.
Sure thing, please find attached. Cheers.
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!
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.
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.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024