Shopify Question posted in
The Shopify help center can be found here.

How to defer javascript files in theme.liquid in Shopify

i have checked my website performance in https://gtmetrix.com/.And it says that i need to defer my javascript files. My theme.liquid file is like this:enter image description here

As you can see i have two js files at head section, when i am trying to put that files at the bottom after tag my product page functionality not working, i have used jquery in script tag in my product page, in that scipt tag i am using also some liquid code. So what can i do , why product page functionality not working when i am puting jquery and slick-carousel at the bottom of my page (also i have tried to put defer keyword in jquery and slick-carousel script tags) sorry for my english. Thanks

Tags:

2

Answers


  1. 0
    1. Move the scripts from the <head> to the bottom of the page, before the app.js.
    2. Move your inline scripts from the product page somewhere in between the jQuery script and the closing </body> tag.
    Login or Signup to reply.
  2. 0

    According to the second Vladimir’s suggestion, I propose to wrap inline script from the product page in the condition:
    {% if template contains ‘product’ %}
    … inline script from product page
    {% endif %}

    This allow you to add inline script only on the product page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search