Adding Jquery to a shopify theme

Adding Jquery to a shopify theme

Jquery is a helper library for javascript that has many builtin functions that would be quite verbose to code in standard javascript. The jQuery motto of "write less, do more" tells you all you need to know about it. If you search online there are plenty of arguments between developers about the pro's and con's of using a library like jQuery and a quick google search with give you plenty of reading on the topic. As someone who has taught classes on Javascript and jQuery I am currently a bit in the pro jQuery camp. Anything that makes life easier 🙂 

 

You can find many code snippets that you can add to your site to add more functionality but some of these snippets will require jQuery to make the snippet work correctly. Some theme's don't have jQuery added. There are a few different ways of adding it but this is probably the easiest way to do so if you are not a developer. 

 

IMPORTANT: This involves editing the theme files for your site. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is recommended. If you are not comfortable editing the themes files we can do this for you. Just use the Contact Us page or Live Chat.

  1. From your Shopify admin, click Online Store, then click Themes :
    Click Online Store then Themes
  2. Find the theme you want to edit, click the ... button, then click Edit HTML/CSS:
    Click Edit HTML CSS button
  3. Add link to jquery to your theme.liquid
    • On the Edit HTML/CSS page in your shop admin, click on theme.liquid under Layouts to open the layout in the online code editor. Scroll through the file untile you find the closing head </head> tag add the following code:
      
         
             <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
          </head>
      
    • Click Save.
  4.  And you are finished
Loading Facebook Comments ...