How to use jquery in shopify website?

@cali_green 

To use jQuery in a Shopify website, you can follow these steps:

1. Access your Shopify website's code editor: Go to your Shopify admin dashboard, click on Online Store, and then click on Themes. From there, click on Actions and then Edit code.
2. Add the jQuery library: In the code editor, find the theme.liquid file (or another appropriate .liquid file where you want to include jQuery) and add the following code just before the closing tag:

1

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

This code will include the jQuery library in your Shopify website.

1. Write your jQuery scripts: You can now write jQuery scripts in your Shopify theme files. For example, you can create a new .js file in the assets folder (e.g., custom.js) and include the following code at the end of your theme.liquid file just before the closing tag:

1

<script src="{{ 'custom.js' | asset_url }}"></script>

In your custom.js file, you can write jQuery code to manipulate elements on your Shopify website, such as:

1
2
3
4
5
6

$(document).ready(function(){
    // Your jQuery code here
    $('.button').click(function(){
        alert('Button clicked!');
    });
});

1. Test your jQuery scripts: Save your changes and preview your Shopify website to see if your jQuery scripts are working as expected.

By following these steps, you can use jQuery to add interactivity and functionality to your Shopify website.