product images on catalog page flickering?

Highlighted
New Member
2 0 0

I just noticed on my catalog page that the product images are flickering in and out, as if loading (and they probably are)

I'm try to troubleshoot this, is this an image size problem, a site speed problem, or an issue with some code that I deleted yesterday (this code was added to put an 'agree to terms' check box ina different section but is the only thing that has changed recently)

 

lunarsplendor.ca

0 Likes
Highlighted
Shopify Expert
884 72 208

The loading animation class on the image container is stuck in loading phase:

loading animation.jpg

My best guess from looking from the outside is that you have some loose javascript somewhere, or deleted some javascript that was set to remove that .grid-link__image--loading CSS class.

I would preview the most recent theme (the one with that code you deleted still in it). Then if it's working, you know it was something in that code you deleted so you can then fix it.

If you don't have the last theme, reminder that you never want to edit your live theme. Read this for theme editing tips to prevent broken live site: https://speedboostr.com/how-to-safely-edit-your-shopify-theme/

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (first performance analysis tool specifically for Shopify sites).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
0 Likes
Highlighted
New Member
2 0 0

Thanks for responding Joel!

I looked back through my versions in my code editing and on every version it appears to be doing this, even with the added code, and before it was edited in the first place.

If it is stuck in loading is there something else I could look into?

 

Thanks!!

0 Likes
Highlighted
Shopify Expert
884 72 208

I'm not sure, would have to read the code to try and figure out what's going on. You could try searching the theme files for that class "grid-link__image--loading" to see if you can narrow down which script is adding the class, then that may give some clues but if you're not familiar with JavaScript it probably won't make sense.

You might try contacting the theme developer or whoever coded the animation feature in. They'll know the logic for the animation showing / hiding and may be able to help out.

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (first performance analysis tool specifically for Shopify sites).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
0 Likes