how to add jquery to shopify

hey everybody my name's sam webb,and this is shopify dev tips since this,is the first video of this series,i just want to give a quick explanation,about the purpose of it,i get a number of requests sometimes on,my videos sometimes in the emails,from people wanting me to cover specific,topics some of these requests are,important enough to have their own video,but they're not large enough to go with,to go into my shopify theme build series,because,that's kind of a bit more of a long form,about building the entire site,and so i made this series to cover some,of those smaller things and then just,anything else,that is a bit smaller and will be a bit,shorter so,by its very nature these videos would be,a lot shorter i'm thinking,sub five minutes for most maybe a little,bit more if it's a little bit more,complex,but the idea is never to go above 10,minutes but,with a target of five minutes so today,in preparation,actually for another video i want to go,over how to add jquery to the site,jquery is probably one of the most used,javascript libraries,and because of that you'll see a lot of,storefronts using it,so to start we just go to jquery's,website and i already have it pulled up,here,so we're at jquery and it's just,jquery.com,and then you'll go to download which is,here and if you scroll all the way down,to the bottom,you have the cdn method i'm going over,two methods,right there's first this easier method,which is the cdn method,and this method is what you would use uh,if you are if you weren't using,a workflow like workshop the advanced,workshop,if you were just uh working with a,client you're building a site and you,weren't using this workflow,and you didn't have imports and exports,this is the method i would suggest that,you go with,so we just grab this link here for the,version three of jquery go into my code,here,i'm just going to want to post it above,where i start using javascript,which is right here so if we go back to,the front end of the site,i hit inspect here refresh the page,you'll see that i can do jquery and it,shows up,so that's one method you can use if we,go back into the code,and i hop into my my javascript,right and i say uh window.div,equals jquery,and save that,rest of page if i look at div and you,see that,div is a jquery object of all the divs,on the page right so,it'll work perfectly fine you can use it,i could use the dollar sign here if i,wanted to let's change that and put a,right just so we know that it's it's not,like leftover from before,if i refresh this and i do div again,you see that now it's all the a tags on,the site so this is a perfectly,valid method of adding jquery right you,just add it,above all your javascript and then,within here you'll be able to use it,wherever you want option two is to not,add jquery as,a global object or a window object and,instead add it within,your javascript right using this import,syntax like we're doing with uh with,this example,folder file or like we're doing with the,theme card so let's start by,getting rid of this line here,and we'll go back to the jquery website,and scroll,let's see where is it at,right here so we've the same thing right,we've got yarn add jquery,and then we can use it right so let's go,back here close that and yarn add,jquery so let's do import,jquery all right and then,dollar sign div or dollar sign,let's say section right to give us,another one,and window.section equals that,the section and then section is,the sections that are on the page and,that's it that's how you add jquery to,your site,if you have any questions leave them in,the comments below if you found this,video useful make sure you like,subscribe and hit that notification bell,and i'll see you next time,you

Congratulation! You bave finally finished reading how to add jquery to shopify and believe you bave enougb understending how to add jquery to shopify

Come on and read the rest of the article!