hello everyone this is corin from speed,ecom and in this new tutorial,we are going to see how to add tabs on,your shopify product pages,this is a very useful one because you,will no longer need to add,all the redundant information in the,product descriptions,manually this way you can only do it,once and it will show in every product,page,this is what it will look like at the,end and before we begin,please don't forget to subscribe to the,channel so that you don't miss out on,any of the upcoming,cool tutorials that we have prepared for,you also there is one other thing you,need to do,before making any changes to your theme,files so go to online store,themes then click on actions and click,on duplicate,this way you will have a copy of your,theme and in case you make any mistakes,you will be able to go back to your,original theme files,without losing your work you can see,that i,already have a copy of my theme so we,will start with the tutorial,it's going to be fairly easy you have to,go back to the,written tutorial page you will find its,link in the description of the video,and you have to copy this code,there you go and once you've copied this,code you will go back to your store,click on actions then edit code,here you will have to open the sections,folder,and open the file under the name product,dash,template.liquid,there you go now in this file there is a,lot of code and you will have to find a,specific line of code,that goes by product that descriptions,so you can just do a ctrl f,and then product that description,there you go it's here then you will,have to delete,this line completely and paste the code,that you just copied,once you've done so you will have to,click save,now let's see what it looks like in the,product page this is a normal product,page of my demo store,you can see there are no tabs and if i,refresh the page,you will see the different tabs show,here,first you will notice that the,description that is unique to every,product and that you can add in the,shopify product editor,will go under the description tab then,you will also notice that we have two,additional tabs,and these are the tabs that we can add,generic content that will be shown in,all of the,product pages and now i will explain how,you can customize these additional tabs,so go back to the code editor and here,we will be able to add all the content,we want,alright so the first thing you can,modify are the titles of each tab,you can see we have three lines of code,here that represent,each title of each tab we have tab one,description,tap through shipping and returns and tab,three any questions,you can really personalize the titles by,anything you want for example,say you don't want to add shipping and,returns information,so you can just change the title and,change the content of the tab itself,then here we have the contents of each,tab itself,you can see that for tab one we have the,line of code that goes by,product that description which is the,code that we just deleted before adding,this new one,this just indicates that the product,description that you have added in the,product,editor in shopify will be imported into,the tab one,as for the second and third tabs you,have to add the contents manually,and you can see that i have already,added a couple lines of text,in each tab there you go but,i will show you how you can add,additional content for example let's say,for shipping and returns,you want to have the first heading as,shipping,and then you want to add another one as,returns,so you will add an h2,returns and you have to close the h2,there you go and of course you will have,to add a paragraph,there you go and close the paragraph,then click on save,and refresh your page there you go,shipping and returns what we just did is,add text with html code,html code is really customizable and you,can for example pick different types of,headings,and h3 or for or whatever you want,especially if you want to optimize your,content for seo,i'm also going to give you a quick tip,for html code,if you don't know how to create one,manually you can actually go to your,pages for example,create a new page,add page then here you can type any type,of content,you can customize it you can,i don't know maybe change the color if,you want and then here you have the,button show html,and when you click on that button you,will have directly access to the html,code of that customize,text so i'm going to copy this code,and then i'm going to place it in the,third tab,there you go save,refresh the page and see the results,there you go type content and it's in,red,so it's fairly useful i'm going to close,this and go back to the code now,now there's another useful piece of,information you may want to add another,tab for example if you want some more,all you have to do is copy this part of,the code,make sure you don't copy the ul and then,you will,hit enter and paste the new line of code,then of course you will have to change,the number so this is tab 4,after that go down to the div id,equal tab 3 copy from the start and end,with the first,div this is the div closure so you copy,this line of code,then you hit enter again and you paste,the new one,once more you have to change the number,of the tab tab four,now let's change the name the title,let's say,faq and then we save,refresh the page and now you can see we,have four tabs,so you can pretty much add any number of,tabs you want,of course you have to make sure that it,looks good just don't add like 10,different tabs,okay and lastly you may want to actually,move the tab section to full width as,you can see in the product page,by default you have it in the right,column so if you want to move this,go back to the code copy all this,section of the code,there you go delete this and then,scroll just a tiny bit here you can see,we have different div closures,so we will do something like this we,will write test one here,then test two after the second closure,closure,and then we will save let's,just refresh the page there you go,we can see that test2 i think is what we,need as a placement,so i'm going to delete this and i'm,going to paste the code that we just,copied right here,save refresh and there you go you can,see we have the tabs,in full width of course if you make any,big mistakes,all you have to do is just use the,original copied file,or you can click here on older versions,and go back to any modification you made,so this is it for this tutorial i hope,you really find it useful,please leave a like and a comment if you,liked the video and don't forget,to subscribe so you don't miss out on,any coming tutorials,you
Congratulation! You bave finally finished reading shopify supply theme where are product tab pages stored and believe you bave enougb understending shopify supply theme where are product tab pages stored
Come on and read the rest of the article!