how to make your product description collapse shopify

hi guys welcome back with another Shopify tutorial  and in today's tutorial we are learning how to add  ,collapsible accordion on your Shopify product  description so if you have a huge description  ,and it's taking a huge part  of your page so you should  ,add collapsible accordion which  will make your product page  ,look more elegant and decent so without getting  more delayed let's get into the tutorial,guys if you have a shopify product page where  the description is long and you're getting a  ,lot of wide empty space you can add collapsible  accordions in order to make your product page  ,look better so this is the  tutorial which i'll be following  ,i'll put the link in the description below so  you guys can easily follow now let's go ahead  ,and do the first step and in this step we will add  the following code in our theme logic with file  ,so in order to do that let's go back let's  go to the backend of our shopify store,and from shopify store back  in click on online store,and edit your current team code make  sure to create a duplicate version  ,if you are working on a live theme because i  don't suggest you break anything on your live team  ,so make sure to create a duplicate version  before editing the chord now click on edit code,and from from there search for theme.liquid file,here's our theme.liquid file,and just below the head tag we  will add following two lines,so copy it,and paste it below the head so i'll  just add it on line number nine,click save,and then go to our second step  which is adding the following code  ,in our team css file so for  that search for the css file,which is theme.css so click on theme.css file,and go down to the bottom of the  file and here we can add our css cord,so this is our css cord i'll copy  the cord and paste it hit save,and now let's go to our  ,gs code so this code needs to be added in our  js file of your shopify team now search for gs,and here we have theme.js file,so guys before we add the js code i would like you  guys to subscribe my channel comment on the video  ,below and let me know if you like this tutorial  or if you wanna learn more about shopify so i  ,just copied the js code and pasted on the bottom  of theme.js file and now i'm going to hit save,now this is our fourth step  where we will be creating  ,meta fields and in order to  do that i'll click on settings,and then click on meta fields,and from there i'll click on products,and from there i'll click on add definition now,i'll name this field first tab title,select the content type to be,text and then single line text,save the definition,and here we have the tab title field created  now i'll create another field for description,and i'll name it first app description,now let's create second tab title  second tab description and third  ,tab title and third tab description  so i'm gonna do this a little quick  ,make sure to don't do any mistakes because the  final step is to add the code in our theme.liquid  ,file and if we do any mistake on creating meta  fields there will be an issue adding those fields,second tab description  description and content type text  ,single line let's do multi-line  text because it's a description,let me check if i selected proper oh shoot  i should have selected multi-line text  ,on this field so i'll have to  recreate this field for that,delete the field and recreate it because i  messed up sorry for that first tab description  ,so for description we'll always be selecting text  area because there will be multi-line text on that  ,multi-line text hit save okay now  let's create the final third tab title,and select,single line text hit save do the  similar with third tab description,and then select content type to be multi-line  text okay we have our meta fields created  ,and now we'll move on to the final step which  is add the following code in our product  ,template liquid file so one thing i want you guys  to make sure that this tab title should be same  ,as the meta field here so for example if we want  to display the first tab title video this value,should be same as this one if  you have any spelling mistakes  ,then the field won't be visible  okay now let's copy the code and,see how it looks so i'm gonna  go back again to edit code,and now i'll search for product,template so that's the file product dash  template required and now search for description,so that's the code which we will be replacing  as i already have mentioned in on my tutorial  ,so we'll have to replace this code with the  following code here now let's copy the code,and paste it now hit save and now  let's take a look at our accordions  ,so let's go to the product page  and hit refresh to see how it looks,okay guys so we have our accordion showing up  but there is no title and description right and  ,for that we'll have to go to our product page and  add in the proper value so that's our product page,and these are the meta fields which we created now  let's add in the first tab title and description  ,and one thing we messed up here is that  first step title and first app description  ,is misaligned so let's see if we can rearrange it,so unfortunately there's no sorting option so  we'll have to add the meta field definitions  ,line by line so for now let's just do as it is  so first tab title should be designer details,and then first tab description should,be this one here,copy it and paste it on first  tab description hit save,now let's refresh and see how it looks,finally we have our accordion showing up now let's  fill in the remaining two guardian field details  ,let's copy the title and paste it on  second tab title description for second tab,second accordion sorry and now let's do the third  one delivery and returns so that's the third title  ,and the third tab description copy and paste  it on meta field third tab description hit save,and now let's hit the refresh  button to see how it looks,okay guys so we have our three accordions  showing off looks pretty nice right,good thing about them is that they are also  ,mobile responsive so if you go  and check out on your mobile,you can see they are looking pretty nice and clean  ,that's it for the tutorial guys i hope you guys  liked it if you have any confusion any questions  ,feel free to leave a comment below i'll try to  answer them as soon as possible have a great day

Congratulation! You bave finally finished reading how to make your product description collapse shopify and believe you bave enougb understending how to make your product description collapse shopify

Come on and read the rest of the article!