How we can include jquery library in front end with APP with theme extension

Shopify Discussion

Topic summary

A developer is building a Shopify public app and needs to include the jQuery library in the frontend using theme extensions. They’ve shared their schema configuration code that includes custom CSS and JavaScript files (front_shop.css and front_shop.js) targeting product and index templates.

Solution Provided:

  • Add a script loader function at the top of the front_shop.js file
  • The function dynamically creates a script tag and appends it to the document head
  • Use the Google CDN jQuery library URL (https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js)
  • Include an onload callback to ensure jQuery loads before executing dependent code

Implementation:
Call include('https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js') to load jQuery, which will then allow jQuery functions to work within the custom JavaScript file.

The discussion appears resolved with a working code solution provided.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hello
I am creating the shopify public app and did some jquery code in the app in front end. I need to include jquery library in the front end via app with the help of theme extensions. Please let me know how i can do this. below is code example i need to include via schema.

{% schema %}
  {
    "name": "Lyfsize",
    "target": "section",
    "stylesheet": "front_shop.css",
    "javascript": "front_shop.js",
    "templates": ["product", "index"],
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Click here"
      },
      {
        "type": "color",
        "id": "text_color",
        "label": "Text Color for anchor tag",
        "default": "#000000"
      },
       {
        "type": "color",
        "id": "form_text_color",
        "label": "Text Color for Form Label",
        "default": "#000000"
      },
      {
        "type": "color",
        "id": "form_button_text_color",
        "label": "Text Color for Submit Button",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "form_button_background_color",
        "label": "Submit Button background color",
        "default": "#000000"
      },
       {
        "type": "checkbox",
       "id": "show_announcement",
       "label": "Show Form",
       "default": false
      }
    ]
  }
{% endschema %}
1 Like
2

At the top of the javascript file you are loading (in your case the front_shop.js), add the following:

function include(filename, onload) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src=filename;
    script.type = 'text/javascript';
    script.onload = script.onreadystatechange = function() {
        if (script.readyState) {
            if (script.readyState === 'complete' || script.readyState === 'loaded') {
                script.onreadystatechange = null;                                                  
                onload();
            }
        } 
        else {
            onload();          
        }
    };
    head.appendChild(script);
}

include('http://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js');

This will load the jquery library and allow you to use jquery functions in your front_shop.js