Hi all,
Hope you all have a great time. I have a question regarding how a template got rendered. We have an agency done our theme template and now after the handover, we having issues on certain stuff as we constantly changing the pages to keep to promotions and updates. Also, this is our first time using Shopify and we (me included) still learning the quirks of using Shopify.
The agency opted into using a hybrid approach where the theme mixes the classic and shopify 2.0 practices (yes, we have classic liquid and JSON liquid to render pages). And, we have interactive JS bundles (read: Vue) to render complex components on our website.
My question is as the title, the JS file is rendered on the head of the site, thus it is in the theme.liquid to be loaded across the site. But we now trying to improve our website performance and the JS bundle is very big to be rendered thus tanking our speed score. I was trying to async it on our test theme template but instead it broke our interactive components. After much fumbling with the code, I hit a wall on to why it still not rendered it properly.
As i checked the page via Shopify Liquid Debugger Extension, I saw that the code in the template liquid render first before the theme liquid render. The screenshot of our product page is as below,
We need the JS bundle to load first before the script inside the respective section in the template load as it depends on that JS bundle.
Is this normal to all? Is there any tips you guys can give me on how to resolve this where the theme liquid render first? I tried DOMContentLoaded event on the script on our section to let the theme.liquid render first but it’s to no avail as we have a 20% chance it won’t render properly.
Thank you so much for reading my post on this.