Shopify themes, liquid, logos, and UX
When viewing my website on a Chromebook (ASUS Chromebook Flip C302, fully updated), none of the images on the page will load.
When looking in Chrome Console on the Chromebook, I'm getting four errors:
Uncaught ReferenceError: jQuery is not defined Uncaught ReferenceError: _ is not defined Uncaught ReferenceError: $ is not defined Uncaught t {_isScalar: false, _subscribe: ƒ}
However, when viewing the site on my other devices (Mac desktop, Android phone), there are no issues at all. Also, when using the Device Toolbar in Console (on Chromebook), most device preview options will make the images render again, and the errors go away.
On my desktop Mac, the site loads perfectly. However, if I use the Device Toolbar and set it to Nest Hub Max (1280 x 800 px), the site breaks just like on my Chromebook, jQuery doesn't load for some reason (same errors) and no images are loaded.
Reading up on the errors, it seems that they could all be related to jQuery not loading, or not loading fast enough. I think all images on the site are lazyloaded, so makes sense that they wouldn't work without jQuery.
I've tried moving jQuery immediately below <head>, which changes nothing.
I've tested the site in different browsers and configurations on lambdatest.com, and was able to reproduce the errors and non-loading of images (although I don't remember the exact settings and have now run out of free testing sessions).
Being able to reproduce the error both on desktop and on lambdatest.com, I'm fairly confident the problem is not with my specific Chromebook. In addition, no clearing of caches, going Incognito, or anything else I could think of made the images load (or made jQuery fire correctly) on the Chromebook (save for using Device Toolbar to switch to different emulated screen resolutions).
The issues seems to be somehow related to screen resolution/size. My chromebook runs at 1920 x 1080 px. When using Device Toolbar in Chrome Console, issues seem to be located around 1280 x 800 px.
I've compared the output source code from both states (working and non-working), and the only difference I can see is stuff that looks to be related to jQuery not having loaded in the non-working version.
I can't figure out how screen resolution could affect the loading of jQuery. Are the responsive breakpoints not only in CSS? Could CSS affect loading of jQuery?
I am, of course, worried that some customers are getting this broken version of the site, and this being a Shopify site, I am unsure about how to catch this sort of error (no access to logs, right?).
Any suggestions as to the cause, a remedy, or any other information would be greatly appreciated!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025