how to add product tabs with jquery shopify

bonjour bonjour my name is andrew from,ecom experts dot io and in this,video you're gonna learn to jump into,the code,and add tabs to your product page,now tabs can be very useful if you want,to segment the information nicely and,you know cleanly so it's very clear for,your visitors in different sections,where the information,is we're gonna go from this to this,on the product page so if you stick,around to the very end you're gonna,figure out exactly how,to do that also if you look at the,description there is a link below and,there is a step-by-step,guide on how to actually get there so,you just have to follow the text,all the code is there as well and you,copy paste it i'm gonna actually follow,that exact same guide right now,with you and we're gonna add some tabs,to your product page let's just,jump straight into it so here we are on,our demo shop um,perfect we can go to the camera film and,you can see right here there is no tabs,there is just my product description my,product title and my price and i can add,to cart or buy it now,pretty standard stuff so if we look at,this this is our shopify store in the,back end,obviously this is what you log into,every day hopefully um,and we're going to make those changes,for this we're going to go to the online,store section and here you have all your,themes,whenever you make some custom coding to,your store and i can't,underline this enough because some,comments were like oh i'm stuck i made a,mistake,um you have to have to have to always,create a,duplicate of your store so create a,duplicate that case you have a,backup in case something goes wrong you,can always refer to the duplicate,and actually we're going to do the work,on the duplicate,theme that way if we're doing something,wrong in the code,it doesn't affect our live visitors and,i still we still can continue making,sales and there is no broken experience,so here you go i clicked actions and,duplicate and now i have the copy of the,debut team which is an exact copy the,code is exactly copied,but this is not live okay so we are,going to jump into the code right now,all you have to do is click on actions,right here,and then jump into the code by clicking,edit,code right here and here we are this is,what you should normally be seeing,so we're going to start by adding jquery,jquery,long story short is an external code,library that we're going to get some,information from i'll make another video,about exactly what jquery is,but that's kind of beside the point,right now it's possible that jquery is,already installed,on your shopify store it's a very common,thing to do,so for that we're going to go here in,the layout section you will find,the team.liquid on the team.liquid,you're going to go to your keyboard,and you're going to do command f for mac,or control f for windows and this will,pop up this little search function,that allows me to search for specific,word inside,this file right here and you're going to,type jquery,nothing came up i typed enter nothing,came up that means there is no,jquery installed yet no problem you're,going to look,for the head tag right here we can find,it,head opening tag is right here you're,going to press,enter twice and then you're going to,take the jquery,code line from the documentation in the,link below,and you're going to paste that right,here so again whenever i paste code all,that code is,available to you you just have to go,down into the description,follow the link and you will see all the,step-by-step guide,with the code and there you just copy,paste exactly this line,now what happens if jquery is already,installed and when you did,control find and typed in jquery you did,find jquery just make sure that here you,see the version of jquery it's,1.11.3,or above so if it's 1.12.4,that works if it's uh one point,i don't know 14 that works if it's 1.10,doesn't work so then you just add this,line of code,so i'm cutting a couple of corners here,but that's the gist of it just do that,to keep it simple,okay so once the jquery is added we're,actually kind of done here so we're,going to click on,save right here and make sure the asset,is saved perfect the next step will be,adding some html to your product so,we're going to click on the product,we're going to get out of the team,code right here we're going to click on,product,and we're going to click on the product,that we want to play with,once we're in the product where we want,to add the tabs we're going to click on,the little show,html icon right here then we're going to,copy and paste the code that's provided,to you under the second section,in the documentation link below so i'm,going to remove,all of this and i'm going to,paste my html that is provided to you in,the documentation below,once that is done you can simply click,on save right,here great,now just be wary is that this is live,right now so if someone at this very,moment,comes to your store and goes to the,camera film,product they will see this right here,what we just entered so keep that in,mind if you want to avoid that and,really not affect your life users at all,you can duplicate the product put the,code into it,and then switch the live products,afterwards,now we have added our html to our,product it's time to jump,back into the code so you click on,online store,you go to the copy of your debut team,because that's where we're making all of,our modifications,you go back into edit code and you're,going to look for the product dot liquid,template so that should be under the,template section right here you see the,word,template right here so there should be a,product,dot liquid if there's just too much,there you can just type in,products so right here we have the,product dot liquid,we open it and then we scroll to the,very,bottom of the page we typed in,enter a couple of times the very last,things and we,paste the entire script section that is,provided to you in the link below,so this is what i just pasted again code,is provided to you,in the link below and you click on save,okay,and now we have to add the styling so,now the skeleton is kind of done of what,we want to do,it's going to react the way we want if,we click on one tab it's going,to go to that tab and if we click on,another it's going to show the other,information,the problem is it's not as pretty as we,like it yet it's probably very bare,bones,that's because we haven't added our css,code yet css code is responsible for,making it,pretty so if you really want to do this,the correct way of clean development you,should be adding,all css code in the css files,you can find that in team.scss and,you can add the code that we provided at,the very bottom,by making a nice little mention with the,comments now if you're not familiar with,code i'm going to advise you to go,against it just for the sake of keeping,it simple if you're a developer and,you're looking at this you're like oh,you shouldn't do inline coding okay yes,that's why i'm telling you if you're a,developer and you know what you're doing,put it into the css file if you're not a,developer and you're really in a tight,budget,forget what i just said and go back to,the product.liquid file where we just,pasted it in the product.liquid file,we're going to add the style tags,that are also provided below so in step,five you have the style tags just copy,and paste it from the document,and we're going to paste that in right,here,again this is not clean,code style and css should technically,not be in this file but for the sake of,keeping it easy in the video,we will keep it in here so once that is,done you can click,save right here and then we're done with,all the code now we're going to go back,to the online store,and we're going to test it so we can go,to,actions and we can click preview give it,a little bit of time to load,once we're in the preview you are now,previewing the copy of the debut team,which is our backup copy,we're going to click on the product,where we added the html,and here you can see we have the tabbed,section there we go we'll go to the live,site,this is what your customers are,currently seeing and they're seeing it,like that so we need to put what we've,just built,live no problem doing that this is the,version that we have just built,this is the version that's currently,live so for that we're going to go to,the version that we just built,we're going to click on actions and,we're going to click,on publish it's going to ask us if we're,sure we want to publish this,and yes we are sure because we just,tested it and,we are publishing the new version that,way,if you notice that something went wrong,and you're like oh my god i did a typo,somewhere or something,you can just revert back and put the old,version before you started doing the,modification back online by clicking,publish right here,but currently we're seeing that,everything is working as expected,now you might want to change the,information within the tab,because you want to add your chart or,you want to add your shipping or return,or you want to enter your youtube video,well for that you're going to go to,products,you're going to go to the camera film,product because that's the one we're,working on,you're going to click on the html and,then,here for example if,for example in the description tag you,see enter product description,over here you're going to look for that,exact same phrase,in here and it says here enter product,description over here,so here i can write about my product,this is the,most fantastic camera,the tab right next to it talks about,sizing actually i don't,have sizing in cameras i have types of,cameras so i want to change the words,size chart as well so for that i'm going,to look,for the word size chart right here and,i'm going to change that to,type of camera and,like that you can change basically,everything and then enter the sizes,over the table no i don't want to talk,about sizes,i want to talk about these,are the different camera,types and then a b,c just make sure you never touch,any of those weird little signs here in,these weird little tags,because that's your html code and that's,going to confuse,the system if you start touching that if,by any chance you deleted,by my because you were confused don't,worry,link below the html is there you'll just,have to rewrite your little descriptions,um shipping and return,um here is the shipping and return,details,i'm writing those here so i'll remove,that and i'll write always between those,those,tags here uh eternal free,shipping because,my cameras are bomb,i'm not a copywriter i don't know if you,noticed um,and then let's say you don't want tab,number four,you can just remove that entire div so,right here you remove this and then you,make sure that you remove,the list tab right here i don't have,videos so you can remove that entire,list,tab right here and then we save,we refresh to see the results and there,we go we have,three tabs now type of camera,these are the different types eternal,free shipping because,cameras are the bomb and this is my,description,so there you go i hope that was quite,useful for you now you have a quick and,easy way to add,tabs to your product and to,your shopify store now i know there is,more professional ways and cleaner ways,to do that,but those are a bit long to explain in a,shopify video this is really if you're,starting up and if you just need some,code,to quickly have tabs to your product,page,then this is definitely the information,you need,all the styling you can do by changing,the css that's going to be for another,video,the javascript on how it acts you don't,really need to change it and the html is,pretty straightforward as well,if you want a more sophisticated,solution make sure to check into meta,fields that's definitely something that,can help you for that,we did a couple of videos reviewing meta,fields in the very beginning of this,youtube channel so the audio might be,pretty harsh to to listen to i'm sorry,about that otherwise you can always,contact my team at ecom experts dot io,and we'll be more than glad to help you,out for this,my name is andrew from ecom experts dot,io i love you all make sure to like,and subscribe for crazy fun videos i,hope so i hope they're fun there's,funner videos than this,and i'll see you in another one ciao

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

Come on and read the rest of the article!