how to edit faq page shopify

a few months ago i've taught you how to,create an faq page but a few of you guys,are asking me to teach you how to create,an faq section that you can use not just,in the home page but also in the product,page and other template pages so that's,what we're going to learn in today's,video let's not waste more time,let that intro begin,but before we begin this video or this,tutorial i just want to mention that we,will be using the shopify theme done now,if you're using a different shopify,theme then expect to have a different,output in most cases the issue is,related to css for having a different,output if your output is different from,mine then that's definitely the issue,your css so make sure that the faq,accordion is using the right css,utilities but i'm not going to waste,your time with all of those css stuff,things so without wasting more time,let's go to our computer,so here in our browser the first thing,that we're going to do is to open the,theme editor or the theme code editor so,here in the online store,open the themes page,and then select actions,and then edit code all right so before,we continue i'd like to mention that if,you're not familiar with shopify themes,and its customizations or customizing,shopify themes make sure that you back,up your shopify theme before you,continue this video that way if ever you,somehow i don't know destroyed your,shopify theme or your shopify store if,ever that happens,then you'll be able to recover it later,on so i'm going to click edit code,and in this page we're going to create,two files one is for the css style sheet,of the faq accordion and the second file,is going to be the section file of the,faq block,so here in our assets folder i'm going,to close first the templates,here in the assets folder create a new,asset by clicking the create a blank,file and call it faq hyphen style,and then make sure that the file,extension is set to that's css okay,that's css,click add asset,and then scroll down,look for that file,so faq stylesheet.css let's open that,now we already have here the faq,style.css this is the stylesheet that we,did in the previous video so let's just,ignore that and focus here in the faq,stylesheet the new stylesheet that we,created today okay,now here in the faq stylesheet.css,we're going to copy the code in our blog,so here in this page i'm going to put,the link of this blog post in the,description below or the i icon here,and then once you open that link scroll,down,and look for the style sheet or the css,utilities or classes for the faq,accordion so here i'm going to click,copy,and then go back to the theme code,editor,and just paste the code here,okay,and just save it,the next file that we're going to create,is the faq block,scroll back up and then minimize the,assets folder,and then open the sections folder,and then create a new section by,clicking the add a new section button,and then call it,faq,click the button grade section,and then go back to the blog post,and then scroll down,and just copy the following code,i'll explain all of this in the code,editor so here i'll just paste,everything,just like that,so in this code we have three parts of,code that we need to pay attention the,first is the css link,and then the second is the container of,the faq accordion,and then the third one is the schema tag,now if you take a look here we have the,following code language just get rid of,this,okay,and the first is the link tag for our,css style sheet if you take a look at,this object it's referencing the wrong,file called faq hyphen style that's css,we'll need to update this to faq hyphen,style stylesheet.css,so here just add s-h-e-e-t that way it's,going to reference the right file faq,hyphen stylesheet.css,okay,now if you're not familiar with objects,tags and filters you may watch the,liquid video tutorial that we have on,our channel i'll put its link in the,description below or you can check out,the i icon right over here,next one is the container,of the faq accordion,so here we have the following four tag,that loops through the section that,blocks so for each block in the section,that blocks we're going to create that,accordion so we're basically passing the,block.settings to a new variable called,item and then we are going to render the,item question which is this one in the,settings of the block,and then the answer of that block,so we have two settings inside of the,block we have the text question and then,the rich text answer,okay,by default this settings will have a,default value do you have a question for,the question and then i have an answer,for the setting answer,okay now if we take a look here inside,of this div with a class of tab we have,the following input with an id of faq,checkbox and it's using the object or,basically concatenating or interpolating,the,the index of the four tag or for loop so,for each iteration this will basically,start from one and then two and then,three and then four it will depend on,how much blocks is inside of our,section okay,so now if i save this,and if we open our themes page once,again i'll open this in a new tab,and then click customize,and then here you can just minimize all,of this,and you can click the add section button,if you take a look now we have the,following faq block you can also search,for it,so faq,block,there it goes you can see now we have,the following section now if you click,that,it should create a new faq section if,you click the add faq item,it will create a new accordion,if you create another item it will,create another one,if you create another one it will create,another item,so it is going to work just like this,now you can customize this and change,the question to something else,do you,ship,internationally,and the answer you can just change this,to a text or random text yes we,definitely,do,and so on so basically you can just,customize this to whatever you want that,is already working now the next thing,we're going to do is to add a title and,then a description for this section so,we can do that by copying the code,underneath of this,blog,as you can see here we have the,following highlighted text or code you,can copy that,and then go back to the theme code,editor and then,just paste it,underneath of the div with a class of,page width page weird and then narrow,just like that,okay,we can also indent this back just like,that,now if i save this,it's not going to work yet because we,still need the following settings the,faq description and then the faq title,and we still don't have those settings,so here in the schema tag just,underneath of the class we're going to,create the settings,so settings,honestly if you are too lazy to copy my,code you can just go back to the blog,post and i should have the following,code,so you can just copy that instead,so go back to the theme code editor and,just paste it underneath of the class,just like that,so now if we save this and if we go back,to our theme editor,and we can also save this now,and if we just wait for it there it goes,you can see now we have the following,title and then description and if we get,rid of the um say for example the,description,we might need to refresh this page,because currently we still don't have,the settings so so just refresh the page,if you still don't have the,there settings,go now it's there,now if we get rid of the description,it should only display the title and if,you remove the title you will still have,the accordion,okay,now that we have the faq section we can,now create as many faq section as you,want so here in the sections you can add,another faq block,and you should create another faq,section if you add an item you should,add an item,if you add another one it will create,another one and if you add another faq,item you should create another one and,the great thing about this is you can do,this not just in the home page but also,in other template pages so if i save,this and if i go back to our products,page here in the products and if we,select the default product template and,then if you scroll down just a little,bit,and if you click the add section as you,can see now we still have here the faq,block so you can click that and we,should have the frequently asked,question here and that's pretty much it,you now have the faq section that you,can use not just in the home page but,also in other template pages now if you,enjoyed this video let me know by,hitting that like button and if you want,more videos like this subscribe to the,channel and make sure that you enable,those,bell buttons or just that bell button,right over there and,you won't miss our future uploads anyway,shout out to all of you guys who are,watching this video till the very end,you guys are awesome,and yeah thank you so much for watching,and i'll see you next time,bye

Congratulation! You bave finally finished reading how to edit faq page shopify and believe you bave enougb understending how to edit faq page shopify

Come on and read the rest of the article!