I am having an issue with my shopify store. My store is almost ready for the time being but I realized that in the product page (with products that have multiple images) sometimes the layout is correct and somethings the layout is all messed up and wonky. In the images you can see how it is SUPPOSED to look like, and how it looks like sometimes. I have to refresh the website MULTIPLE times for it to look normal and this happens with anyone that sees the website. I am not sure what to do and need urgent help!!
Ps: not only does it affect the images of the product, but the images below it that are parts of other collections but in the same “product detail page”.
This happens because somebody tried to optimize the loading of Javascript assets.
In your layouts/theme.liquid there is a code similar to
The async attribute instructs browser to not wait for these Javascript files to load and proceed with loading the rest of the page.
These files are loaded in background and the order of loading is not guaranteed.
This means that potentially, api.jquery.js may load (and execute) before jquery-3.5.0.min.js is loaded and this will cause problems because api requires jquery to work.
And there are other reasons why we do not want jquery to load asynchronously.
The most secure way is to remove async attribute from all lines except the last one (that one is safe to load async).
While it is the safest way, it is a slower one.
So I’d suggest to first try and remove async attribute only from the first line and then try and test if everything works as it should especially via slow connection, like cellular. Try different devices and browsers because it may effect the order in which the async assets are loaded.
Thank you so much, this fixed my problem straight away! Yes when you refresh, it shows the previous issue for a millisecond but immediately corrects itself and looks perfect. I appreciate all your support.
It’s good practice to create a copy of your theme and work on that to preview the changes before applying, especially if you are editing the raw code. Alternatively, you can also use the Shopify theme editor’s versions to revert to previous versions, but it is not recommended if you are making multiple changes.
Now to answer your specific question of layout inconsistency on your Shopify store’s product pages. Based on the information you’ve provided, I conducted a deeper analysis of the issue and identified the root cause. You are using jQuery to manage your store’s javascript and slick library for implementing the slider. It appears that the problem stems from the asynchronous loading of jQuery and the Slick slider script, leading to occasional disruptions in the layout and functionality of the product images and sliders. Additionally, console errors such as “$ is not defined” or “jQuery is not defined” indicate that there are problems with how jQuery is being utilized on your store.
To address this issue, I recommend the following steps:
Consolidate Script Files: Consolidate all the functions related to managing the store’s functionality, especially those involving jQuery and the Slick slider, into a single script file.
Implement Defer Attribute: Once the functions are consolidated, ensure that the script file is called with the “defer” attribute. This ensures that the script is loaded after the HTML content of the page has finished loading, preventing conflicts with other scripts and resources.
Check for Missing jQuery Reference: Ensure that the jQuery library is properly referenced and loaded before any jQuery-dependent functions are executed. This will prevent errors such as “$ is not defined” or “jQuery is not defined” from occurring.
If still the issue persists then a fix would be to remove the async attribute from the jQuery library and defer the attribute from the slick library. This will fix the issue but will reduce your store performance for which you probably need to hire a Shopify developer who can help you in improving your store speed and performance.
