Shopify FAQ Page Tutorial - Complete Template Setup (EASY)

all right, guys. so in this video, i'm going to show you how you can create a faq page for your shopify store, and you'd want to do this because this is going to help save you a lot of time in regards to customer support. if a customer can go ahead and just go to an faq page and go ahead and get their questions answered without having to use customer support or anything like that, then it's going to save you a lot of time and or budget if you have a customer support team. so in this video, i'm going to show you how you can create a professional looking one using a free app. so the first thing you want to do is log in and come over to the app store and just search for help center and then click on this app right here- so help center by vertex lv, and go ahead and add this to your store and you can see they have a free plan right here and that's the one we're gonna be using. so once you've went ahead and added this in, uh, you can come over here to apps and then just open it up, and then i'm going to go ahead and show you how to go ahead and edit this right now. but the first thing i want to cover is the type of stuff that you should put on an faq page. so i'm going to kind of give you a few categories that are going to be useful. so, if we take a look at this notepad here, i kind of, uh, split up questions into five different categories of questions here. so not every question is going to be applicable to every store, depending on what you're selling, but a lot of these are pretty universal. so, uh, the type of content that you're gonna have on your faq page is going to vary depending on what you're selling and, uh, you know you're gonna have to put in your own, um, custom ones, but i wanted to provide some universal ones that could help get you started and give you a little bit of a template to go off of. so we can see here now. the first category would be like general type questions. so this could be something just like i- i need to change something on my order, how do i do this? and then the second category could be like product specific questions. however, um, if you're selling like a ton of products on your store, you have like a couple hundred products and you're probably not gonna have product specific questions for every single one of those products on the faq page. so this would only really be applicable if your entire uh store is solely based off of like one product or one offering, and then you know the question could be like: can i use this product to do tasks or whatever, like any type of question related to that one product. another universal category for any store where you're selling physical products would be shipping. so questions in here could be like: where can i track my order or do you ship to my country? and the another universe category could be payments. so like, what form of payments do you accept and do you offer? financing could be a few examples in there. and then another example would be returns and refunds- another universal category. it's like: what is your return policy? and like: my product is broken, how do i return it? and one thing you want to make sure you do is keep track of questions that you get from customers throughout the lifetime of your store, and if you start to see the same question pop up multiple times, then make sure you add that to your faq so that way the customers can see that on the faq page the next time and not have to reach out to your customer support. so these are just a few universal faq questions to kind of get the ball rolling for you that you can go ahead and use and then, like i said, make sure that you think of some of your own that are custom and unique to your store, because you know every story is going to require different ones. so, that said, now that we know what we can put in here, i'm gonna show you how you can actually start putting it together. so once we're in this page right here, um, the first thing we need to do is go ahead and edit these right here. so what we're going to do is we're going to be stiking with the free plan. so the free plan gives us unlimited what's called artikles, but we only get one broad category in one broad section, which is fine because we're just going to be putting all of our questions inside of the artikles, which we get unlimited artikles on the free plan. and if you want to go ahead and add different sections and everything you can, but you have to get the paid version of the app. so if i go ahead and open up this first one right here, i'm going to just change this to frequently asked questions and then click save and then, after we save this, we can go ahead and publish it, and then we're going to change the section name real quick to just like top faqs: save, click, publish and then down here. uh, this is where we can actually start putting in our questions and answers. so the first one: right here. if i click on edit, we can see that right here there's a section where we just put in the question for the faq. so i'm going to take one of the example questions that we were looking at earlier and go ahead and paste that in and then down here, this is where we can go ahead and put the answer to the question. so what i'm going to do is, since there's a lot of formatted and yellow text in here, i'm going to just click on the view html and just get rid of all this here. just that way you can start from a blank template and then, as far as using the text editor, it's really no different than the text editor within the shopify page editing. it's the same thing. you can come in here, edit the size of of the text. you can change your font. i would recommend choosing a font that looks, uh, somewhat similar to the font that you're using within the store, within your store, and then you can bold and then add bullet points and things like that. so down here we would just want to go ahead and answer the question. so in this case i'm not going to go ahead and type out full answers for each one of these um questions that i'm going to be putting in, because that'll make the video too long, but i'll just put like: you can change your order by doing this and then you can just come down here, once you put in the answer, click save, and then we can go ahead and click publish and what you want to do is just continue to repeat this process for every single one of your faq questions here. so i could put in a question: come over here, get rid of the text and then, like in this case, for example, where can i track my, track my order? um, you could go ahead and be like something like: if you're shipping with, like usps, you could be go ahead and copy your order into the link here and then you could go ahead and link by highlighting the text and then inserting a link to the tracking page. so if you have a tracking page on your site, you can put that in here. or if you're shipping with like usps or uh or ups or fedex or anything like that, then you can put the link to their tracking page right there. so in this case i'm going to just put an example link in here and then click save and then that's going to publish and then we just keep going down the line and we go ahead and continue to add our additional questions in and then add our answers [Music] and you can go ahead and just save that in here and we just keep on rinsing and repeating until we have all of the questions that we have filled out. so in this case i'm gonna go ahead and stop here at four, because i think you get the point at this point when it comes to adding these in and if you go ahead and use off all of these, you can, like i said, add a new one and you can add unlimited ones with the free plan here. so if i come up here to preview, we can take a look what this looks like so far. so you can see we have the frequently asked questions section and then we have all of our questions showing up down here and then a customer can come over here, click on a question and then see the answer. so this is where you'd see the answers that you went ahead and put in. so it's pretty simple and it looks a little bit better than just putting a faq page into a basic sh.

How to code an FAQ page from scratch in Shopify

hey, das ist jan from let's build of fire energy days video. wimmelbild. ineffektiv page von scratch, entlastet ihren overview body and results. we look, like myself, to the corner erneut in zivil heftes description of a down below the questions and click on one wie einst, so will slide. download eines kritischen effekt. think it is out into the first one shot. customizer settings zur wette klein tv-bilder client. to be able to that question that you once every move to maintain the independent in customer satisfaction with some coffee for this project that started at my local machine for a decade, of which is called a few page. you open des abrisses studio coach ist der code editor of my choice. dominique, basically use any texteditor, but is one comes with some great extensions. speedup development process, as you'll see. android effekte, patchfelder. noelgvat stimme hinter einigen euro reduziertes fall ist creative working class, das authentische little bit. lucky. toyoda wandte basic cable structures and generate ist ja dass basic age dms j hier will have had with some mieter information on the characters and while using the website nutzer relevant radicova developing the travelers teilte die hertha. es ist fast am ende balda content that the world development suite perfekt in what we can't. you next ist open des feilt, an extension which is called life server, open web server. entwickeln sie ein download des extension for visual studio co red, ein web-server das ist wilson to any change of this file and one size savetv, ein update zur folge, sampl effekt, utah state and will automatikally facebook browser und heftig schalter time. but if i don't use extension of visual studio code, gekürzt simplify, refresh, von cdu samt angels. so das ist die basics setup und let's continue von der ok solar tiknology, tm elements der world needs vfx, action-star container, oft div, div, ncs, kla, securitate container. we might have another day for multiple lives of time and will contain or the questions answers erfolg. have them better to develop the functionality of london uk. so let's start with one. everyone that they haven't input check box, bonn und des cs s class of chaos des checkbox will wieder toking to open in kloster effekt question: wertvoller helfer label von cs s class auftakt des label, das tiket konsistent und last but not least, konter des last but not least, wie meredith will contain oder top und so witte class auf tab des content. so entfiel gesamte disco peter question. let's say okay, fand and they be some lorem ipsum place oder text, cab, lorenz, endter, generate. some nonsens takes place, health, safety, cones, ziele. das ist update prodente liveserver und hierüber hefte checkbox der input entdecken die hälfte label entwurzelten to notike. to click on the label, die checkbox will be back, as well as the functionality weight watchers building, and we have danced all night hier. so what we can do, you next ist sand colours of radiology von container cent webspace der taking nancy, atxprime, solidworks, solid state, ballgewinn, buddy. background color auf light gray, denn die kerb label dort, dort tab das label background colour of may be light blue über tab content roncalli [Musik] david mackenzie von containers einen preis der take it with the taking der heydt der theke ist das label display property, oft ein blog. das wurde mit new line with, and what i notiked, silva, ein klick und das label ein wherever clique checkbox. we checked, demnächst ist jeder tab content maximum height of magic circle, pixel mackenzie. der container ist die presence of the late call de content der dessauer floh. in die container gibt es the property of overflow hin, genau overflow in kontakt auf ein ex-lehrer. don't want to be the pixel und ist die zero soll, heißt es in teil ii. and now kämpfte kritiker tatorte magic quadrant. die usa dressed up der models and when this is in the state of fact, hannah montana elements next to it wird der class of this content, schönheit auf one hundred view through the full page, haitink das model, enough to answer questions of sale. in any case, ih monster checkbox, sketch act content bekannt. du bist perfekt. and what we can do next. es simply hustet ab doppelter gern mit serve the property of display. ein display, das elemente, teil ii, alex, ist ein monster. click on the label and check box mit checkmate ende content. world index der basic mechanisms of disease. functional work on making this beautiful. ok, so, styling des elements. prepare to work for the most autark container, corinna elements that started the view, container 1 im play off you pixelboxx to work with overflow in property. can you watch at around the corner next decade. rest ist die label. foto: christian wetklo station, the preview, the rocket ride wars rotating monster questions opening weekend at this little icon first showed up. label der staffel, kohlen content: die unicode. 276 juni kommt the wanted up label to no longer be displayed. blog bei den displays legs and just the content of space between david hasselhoff to try, and we can do. you think of when i m the unit relativ tiefe von scis auf das element und es ist so laut und max green room to handle prozent bei youtube, so können die us airways holt, und das wollen wir. gold mackenzie. dieses not rotating monster question is open network bis zur happens. when you say that, as we used, down below monster jetzt in das tate auftakt, the wanted up label after element transform and to praise you want rotating, gelaufen waren, denn use this question and tanglewood etwas noch nie konnte. deshalb und seinen instant and i want to delay drittel bitte, so das olg funimation effekt. what we can't you ist transition and beyond all transitions brocken mit dem zero point for seconds, tolle ch discos als luxus. den nächsten focus on ist die content. okay. so die first thing we can do for the content ist kittel transition as well die kosten für einen instant search, simply die transition. and what happened on for success? genau das ist leider der tumor, bei der viel mit something we left and ride, so borderland, ob die zero in left, android tm siebels takes on something for the top and bottom, letzte spending money and in combination with des transition effekt will generate even more of a slight effekt. sollte petting mohammed top ist, monster checkbox ist denn, wenn i can't even more sliding denn bevor, perfekt, jetzt gibt es ein riesenerfolg, sagt, white vor dem label zu packen, oder kalla something that more tabu change, und keiner tut es weh bei der hot summer to do is one of those. element euro wollen sie? das element ist opened, the colour stolze change to little bit more tag blumen. we can do is simply top label von haba the background für des originals state, denn dort trotz dark blue mccullers madoff ihm bei, das ist bei demonstrationen am nachmittag haben. aber innerorts want to do is you stayed, beginnen label background kalla aber stellt open-xchange. turn back to the question, what we wanted. perfekt, klassische beruf des tischlers, pacific css sektors sowie karosserie mit kot apple bet you already had some css rules for media template joachim hess samt ups und projektpate ottawa, erneut einen konflikt, wie man zu highlight. oldies sektors, neuem holding. der altpräsident select oldies positions simply red dot, new spaces. css will only what the you and the winner is, simple kopie ist ab, denn die idee off to end label ist noch vor tab two. other cases: simply duplikate question and we have a nice faq. akkordeon wurde kursleiter, fact and now we can break ist okay so, back end shop, wie viel genau sie drei acts wie the head and create a single page vor der faq description tut, was nach dem special one, two go to the life once dieses loading new page template templates: template grübel creator. page template: collet faq. die template per default des will just kopie wird page template and right here we'll have the rich text editor container which contains alle content from the page editor android. hier down below is simply copy auer en place. to you. messing musste vor mit der zwei interviews im kit.

More:Copy My Shopify Wedding Business [Complete Print On Demand Business Plan]

HOW TO CREATE FAQ PAGE ON SHOPIFY

hey guys, welcome back to my channel, and in today's video i am going to show you how you can create your faq page on your shopify store. so you would want to do this because this is going to save you a lot of time in regards to customers support. so, for example, this is a store called the minka collection, so this is a clothing stove, um. so i am going to show you where they put their faq page and basically normally the faq page they normally located. it's normally located all the way down on the footer menu. so this is how the faq page is going to look like. so let's click faq and this is how dominca collection shop created their faq page. so if your customer visited to your store, um, and they click faq page and get their question answered without um having to use, like maybe like a customer support, uh, this will save you a lot of time and a budget if you have a customer support service. so you can see here the minka collection, they have these um question like the regular question that customer they normally ask like: how can i pay for my order? when will i purchase my shipped order? and stuff like that. do you ship what? why do you offer local delivery and stuff like that. so in this video, i am going to show you how to create an faq page just like these. so now let me show you how you can do that. so the first easy way is to go here, click your online store and make sure you are on the theme section here, but click all the way down where it says pages and when you click pages, this is where we are going to create a new page, so we are going to add a new page. so click add page and give your page a title like: uh, this is going to be faq, okay, so, and then after that, you can write your contents in here. so you can write your contents about your faq question. you want to add on your store, maybe on a different um, a word document, for example. i have mine here, so i am going to copy this and i'm heading back to my shopify store and then i am going to paste um these information. so these are my faq questions. so after you did, after you did this, make sure on the visibility: if you want this to be visible as soon as you save this page, then click here visible. or if you want this to be hidden. you can, and you don't want to publish uh right away. you can click hidden, uh, so i am going to make it visible, so i am going to click visible and then i'm going to click save. so after this this is not done, like, your faq won't be available on your store. so if i go to my online store and go all the way down, i won't have. um, you can't see my faq page, so you have to go back on shopify store. so, basically, on the fyq page, this will actually depend on what you're selling, what kind of product you're selling and where you're located. so the different question uh of these faq page will be different. so, uh, pay attention. uh, even if you're taking like a little bit of inspiration from a different shop- like maybe from a shop like a minka collection, swaminka collection- they are selling clothes and you are selling maybe like ebooks. so these are like two different things. so make sure, if you're taking like a little bit of inspiration, don't copy uh everything, because they want much with your product it's. it will look very, very suspicious to your customer and very confusing. so let's go back on shopify and let's go back. so now let's make our page, uh, public um. so we, and to do that you have to click here navigation, make sure you are on the online store still, and then click navigations and over here you will see you have two different menus: this is the footer menu and this is the main menu. so the footer, the footer menu, is all the way all the way down, like if you click like all the way down, this is the footer menu and this top here is the main menu. so what we're going to do, we are going to click footer menu and we are going to add the um faq questions page over here. so let's click add menu and we are going to, uh, put the name of our um, the title so faq, so i'm going to write faq and then i'm going to link, so i'm going to pick what am i going to link. so, basically, we created a page, so i'm going to click page and i am going to select the faq page that we created and after that i'm going to click add and i am going to click save menu. so now let's go back to our online store. you can see here, uh, it's still not the case, so let's actually refresh this page and boom, uh, faq page is available over there. so when your customers visited uso and click it here, they'll be able to see the questions, uh, of all the faq. um, the question that that will helps you to save so much time for them to just virtue out? uh, they will. all the simple question will be answered all new page. so this is one way to do that which is very, very easy and very simple. um, so, yeah, guys, this is how you can create your faq page and link it um on your footer menu. the process is very easy, very simple. so this is pretty much the simple way to do it. but there is another way to do it, by using an app. so you have to add an app on your shopify store. if you want to know about that method as well, um, just let me know on the comment section and i'll show you how to add an faq page using a free app on your shopify store. so that's it for today's video. uh, thank you for watching and i'll see you guys on the next tutorial.

More:vat shopify

How To Create a FAQ Page On Shopify

what's up, everybody, mark from ecom warriors, today i'm going to be making a video showing you guys how to create a contact us page, frequently asked questions page, all those different kind of- uh- tertiary type pages that you would find on a shopify store, that kind of help out. so, as you guys can tell, the design is slightly different, um, on the store than you guys have normally seen, and that's just because i've set up a course where i showed people how to create this from scratch, and so i'm not going to release the course now. i'll be creating a later date as to when i will be releasing the course. but you know i added a few uh features. like you know, gallery, zoom in features, um, a whole bunch of different things. you know, frequently asked questions, uh, a product lookbook with the products linked. so, for example, you know, with the products linked. so there's a whole bunch of different features in the store and i may, and i made a whole course for it, but i'm gonna go ahead and pause the screen, log into the back end of the store and i'm gonna show you guys how to actually create these type of pages. okay, so now that we're in the back end of the store. the first thing we want to do is click on this online store button right here and then we want to go to pages. so once we hit pages, you'll see i already have created a few these pages. but all you have to do, let's say, to create a contact post page, you hit add page type in the name of that page and then select the template suffix. and so if you look here, i have a few different options. now, depending on what theme you're using, you're going to have different options here. so you know, some themes don't have any options available, some themes have some options available and basically what it is, it's basically a template to the actual page. so if we just go back here and take a look at, let's say, at my contact us page, you can see here i have the contact us page created. i have no text or anything here in the middle, but if i hit uh, view page, right, we have the page available to us and i'm actually going to show you guys how to edit this in just a minute. but that's an example of the contact us page. here we have the wishlist page, we have about us page, right? so let's just take a look at how the about us page looks okay and you can see here. like i said, the photos are kind of like grayed out. that's because we haven't done any editing to the actual site yet on those specific pages. but let's go ahead and create a frequently asked questions page, for example. so i'm going to write faqs, right, let's go ahead and write faqs and let's click on the faqs page right there and let's hit save. so now that that's saved, we have a frequently asked questions page saved. let's go ahead and view page and there we go. the page is already created. so whenever somebody goes to outfleetremixmyshopifycom, they will see the faqs page available and we can always add this specific page to our header menu, right? so if we head over back to our website, we can always add it up here. now to actually edit these kind of pages, let's go ahead and go to our online store again. let's get rid of these other links that are in the way and let's go to online store. let's hit customize, and so you're gonna see, when we hit this customize button, that we have a few options. but the first thing that we have to wait for is the thing via screen to load first. so let's go ahead and give that a minute and this could take a little bit of time depending on how much content you have. so i have a lot of content but as you can see here we have a whole bunch of different pages. so you want to go up here with this little drop down and you can see here, let's just hit the faq page and so now we can edit this faq page that we created earlier. only thing we really have to do is edit the text, right, so the different options and different questions, and we have to edit the banner. so if we want to edit the banner, let's just say we hit the faqs button and you're going to see here an option that says breadcrumb right. breadcrumb is this location where it shows the links that's referred to as a breadcrumb right. let's go ahead and select an image. in this case i'm going to select a banner kind of like this one right, and hope that it looks decent for the website. so that looks pretty decent. let's go ahead and hit select and that's already saved. so now let's hit save on the top right hand corner. whenever somebody comes to our website and wants to view the frequently asked questions page, they're going to be taken right here to edit this actual text in this content. we'll just go here and just edit. you know, how long does it take for home delivery? that's the first question, and you just kind of have to navigate which one is which. so let's say i want to delete this question that says, uh, can i locate from a local store? um, so that's the question here. if i want to delete it, i can remove it and there we go, it just gone. so i would hit save and that's really it. so, uh, if you guys are like curious what kind of theme i'm using, it's the wolf of shopify theme. i've toked about this theme quite a few times before. this is the only theme that i'm currently using for conversions. um, i have different like clients and things like that that do use other themes, that want me to use other themes. from my kind of uh stance on, you know the highest conversions possible. this is the theme that's going to give you all those features. and sometimes people ask me: like, how does this theme compare to other themes such as, let's say, debutified the beautify is a theme that you have to pay monthly for. that only comes with a limited amount of options compared to wolf of shopify. and when i say limited, the more you want, the more options you want, the more add-ons, the more you have to pay. wolf shopify is one of those themes that you pay one time for. the price is 159, um, but i guess it's on sale for a hundred. and if you got, you guys, use my code warrior right. if you type in enter promo code and type in warrior right and hit apply code, you get 25 off on top of that, guys. uh, check out my youtube channel making all my videos on this theme and how to actually use it and how to get a benefit from this theme. okay, how to improve your conversion rates, how to get sales. and since my youtube channel is kind of new, i plan on showing you guys live sales charts. uh, different. you know pay pals, you know stripe accounts, things like that that just show proof of the sale and proof of the money that's coming in. alright, i'll tok to you guys later. thank you guys for watching. peace out, bye.

How To Create FAQs Page for Shopify Dawn Theme | Create Accordions in Shopify | Copy & Paste

hello everyone. in this video i am going to show you that how you can create faq page in your shopify down theme with accordion. so currently on my screen you can see that we have these accordions like open and close, plus and minus buttons, so this is really beautiful. so i will be showing you step by step. you only need to copy and paste the code and then everything is done. so this is quite simple. but you already know that down theme is the new theme in the shopify, so there is little bit uh tricky, so you need to follow the steps and then after you will do all the stuff by yourself. so i have already written a blog post on this. so here you can see that i have already written the steps, but make sure that the way i will be following the steps, so you should follow in the same way, and for that you have to watch the complete video so that you avoid the mistake and successfully complete the uh faq page. all right, so i have already deleted this page, so let me show you: uh, here we have pages, uh, so this is the page. i'm going to delete this one right now. okay, so if you will refresh this page now, then you will find out that we have page not found. so that means page page doesn't exist. all right, so let's start from the very beginning. first of all, you need to go to online store. then we have themes and on the right hand side we have actions. click on it, click on that and then click on edit code. so here you will be getting the back end code of the shopify theme. so here you can see that we have some folders, files like uh layout, then template sections and stuff. so you should follow the blog post. so here, here you can see that we have the first point, which is create template page: dot. faq, dot. json. so how we will do that is: we should go to templates folder, then click on add a new template and here you need to select page, and then this is already json and here you need to rename this with faq. that's it, okay, uh, then after you should create another, uh, another page first of all. so second point is create section: man dash page, dash faq, dot. liquid. so let's go to the section and then click on add a new section, and here you should write man dash page, dash, faq, and then click on create section. so now you will see that we have this kind of structure, but finally we will be doing. this is like we will copy this code for the first step and paste it in the pagefaqjson. so here we have pagefaqjson. select the complete code and paste the new code, then click on save. now, once you are done saving this, then you should go to the blog post again and then copy this complete code of the second step- i copied this- and then paste in the main dash page: dash faq dot liquid. so select the complete code, delete it and paste the new code. let's save these changes also. so everything is saved. now move ahead with the third step. so the third step is create faq dash style dot css in assets folder. so go to assets folder. so here you can see that we have uh assets folder right now. down below we have sections, then we have assets. so click on add a new asset and click on create a blank file. then click on faq style dot css, click on add asset, so make sure that keep the same name which i have taken here: faq stylecss. then after you copy this complete code from here- i have copied this- and then uh. then after you should find first of all here actually i have just created, so this is faq stylecss- and then paste the complete code here and then save the changes. so we are almost done. now we will move, move ahead with pages. so click on pages, then after let's create a new page, so here we will be giving the name faqs- then here you have the drop down which is default page. click on that and then select faq and then click on save. now this thing is done. now we will be moving ahead with the customization part. click on themes, then after click on customize, and here we have few things like you should select this drop down, and down below we have some pages. click on that and then we have faq here. click on this and you can see that this page is empty right now. so on the left hand side you have some something to add, for example, this add faq item. so i'm going to click this for multiple times. now you can see that we have all these faq items and on the right hand side, each of the faq has some value: question and answer. so here you can see that we have question and then we have answer. if you wanted to edit, then you can uh edit that uh. edit that question, for example, how much, how long it will take to deliver my product, for example, someone is asking this, then you are giving the answer: at least at least seven days. so this is the answer. so in the same way you can edit all the other uh questions and then after you can save these changes. but one more stuff is that, for example, you need to click on faq page- uh, sorry, click on themes, theme settings. then you have colors. so here we have accent one. so, for example, you are interested to change the color, so you can also do that. here you can see that i have changed to red. now it is red. if i am changing to this color, this is also the one, and in most of the cases you will find out that mostly people are using black color. all right, so i choose the black one. then click on save. so once you are done, then let's see on the front end that how it is looking like. so again, go to the pages, and this is the faq page. click on view page and now we are done. you can see that we have all those questions which we have just added, and the important thing is that we can open and close. so this is really an attractive thing. and if you are interested to add to navigation, then you can click on navigation and here you can see that we have man menu, click over it and then add menu item. here you can add faqs. then you can select the pages. here you can select faqs, then click on add and save menu and, for example, you are refreshing the page. now you can see that we have on the top faqs track order. then click on faq use and now faq is displaying over here. so this is really simple and easy. you have no need to bother about the coding experience. if you don't know a single line of code, then still you can perform this specific thing into your store and this is quite important for your customers. so thank you so much for watching this video. if you are new on this channel, then please subscribe this channel and also like this video. so thank you once again. see you in the next video.

How To Create Custom Shopify FAQs Pages Without Shopify Apps

in this video, we're going to create an awesome looking faq page or accordion, without using or installing shopify apps. on top of that, you can easily customize this series easy- yeah, [Music]. now, before we start this video, i want to encourage you to back up your shopify theme, especially if you're about to make changes to your shopify theme files. now, if you're not brave enough to edit your official store, you can just create a new store using the 14-day trial, or you can create a developer's account and create a development store and just use it for test purposes. now i'm not going to go through all of that, because they'll just make this video very, very long. so if you have your shopify store ready to be edited, let's proceed and start working. so here i am in my development store. the first thing that we need to do is to create the page template file. so let's open the online store page and then select actions and let's open the edit code page. let's open that in a new tab and let's also open the customizer page, because we're going to need that later on. all right, so let's proceed to the um editor and the first thing that we need to create is the page template. so here in the templates folder, add a new file and we'll set the um template for page and we're going to call it faq, so page and then faq. click create template and we should have the following file: and there's a pre-made html code. but we don't really need to customize this. all we need is to add a section underneath of the object page. so underneath of the page object, create a section tag and let's just type open and close, curly braces and then percentage symbols and then between this we're going to select, or we're going to use section tag and then for the string value we'll use page hyphen, faq, hyphen, template. can you guys hear the noise outside? i apologize for that- and let's hit save and then we're going to do. what we're going to do next is to create the section. so here in the sections folder, add a new section and call it page hyphen, faq, and then template. so template, so page hyphen, ap, faq and then template. you know what i'm saying? all right, it's a great section. let's click that. and then the first thing we need to create or we need to customize the name of our schema. so instead of section name, we'll change this to faq blocks and then instead of settings. we'll change this to blocks that we will be able to add like items for our faq. if you want to add more questions, we can do that using blocks. so inside of the array, we're going to create the first block. so let's just select, or let's just create a set of open and close curly braces, and then the first thing that we need to set is the name for our blocks. so let's just call this faq, items or atoms, yeah, that's all right. and then next we need to set its type to faq, to whatever text you want to call it. you can, you can give your type anything you can. you can give it like, i don't know, like apples or oranges, i don't know. you can do whatever you want. and the next thing we need to add in here is these settings. so before we were using the name and then, underneath their settings, so we can customize our section. but this time we're going to customize the blocks. so inside of the blocks we're going to use settings, and then this is going to need an array. so we'll just open and close brackets. i don't know what that means, but let's just proceed. first we need to create the first setting and that is for the question. so let's just create open, close, curly braces and then we'll set its type to text and then, underneath of the type text, we'll set its label to something like question and then, underneath of the label, we're going to set its id to um question, and then we're done. the next thing we're going to do is to create the second settings. so the second setting is for the answers. so here we'll just do the same thing: create open, close, curly braces, and then we are going to set its type, this time to reach text. that way we will be able to, um, add links or set the text to bold or italic and so on. so we're going to use reach text. next we'll set its label to something like answer or yeah, answer with an uppercase a, because you guys are ace, you know what i'm saying- and then next is the id. we'll set its id to: uh- i apologize for that, what the hell is wrong with my voice? answer, lowercase answer, and i think we're good to go. so let's just save this. there we go and let's open the customizer page- and we still don't have the faq space, so we're going to do that. so here in the pages, let's open that in a new tab and let's open that page and let's create that page. so select add page and let's call this faqs and then in the template we're going to set and use the page, dot faq. select that and hit save. and then we're going to open that menu tab and we should have the following page. it's empty, but if we refresh our customizer, we should have the faqs page in the selector in the navigational bar. so here in the home page, change that to um. where is the pages? there is no pages yet. let's just wait for that. and there you go. we should have the faqs page here. it'll take time. if you just created the faq's page, just keep reloading the page or the customizer page and it will show up, apparently. so here it is. let's select that. and we should have the faq blocks. let's select that and this time we will be able to um add faq items. so let's just select that and for the questions just add: do you refund fully? yes, and then let's just um add an answer off: yes, we do. in fact, we also send you free gifts just to say that we are grateful for your existence. i don't know. let's just save this and then we're going to do nessus, to render that question and answer. so let's go back to the editor. and then the next one we're going to do: above the schema tag, let's create the container, so div. we'll give it a class of faq, hyphen container and then let's just close that. and then inside of this container, we're going to create the df tabs or the accordion. that's what we're going to do in this course, in this course, in this video. so let's just create the div and let's give it a class of tabs and let's just close this. and instead of the steps we're going to loop through inside of our blocks, so we're going to use the four tag. so four, so for each block inside of our section blocks. we are going make sure that you use the n4, so let's just do that. and four, so for each block inside of our section blocks. we're going to create a variable, honestly. so let's do that. so assign, let's just assign tag, let's call this variable um, faq or question, and then we're going to assign the block dot settings, like cell. let's close that and then what we're going to do next is to display the title, and not the title, but instead the question and then the answer. so let's create another div and let's give it a class off tab. make sure that you close the class attribute and then we'll also close the door and inside of this tab we'll start creating the checkbox, because that's what we're going to do: to use to enable and disable the accordion, because we have accordion to open and to close. so if the check box is checked, it will open the accordion. if it's unchecked, then it will close the accordion. so let's just create the input and let's set its type to um check box and then we'll give it a class of check box check box. or let's just be specific and use faq check box, because we don't know, maybe there's- uh, there's an element in this theme that we're using, debut- that uses the checkbox quest. so we have to be very specific with your classes and here we'll just change the um, i guess. i guess we're good now, or no? no, no, we need to set the id to um- faq underscore checkbox, because we're going to create the label. so next, underneath of the input type- checkbox, we're going to create the label and then we'll set its 4 to um- faq underscore check box and then we'll close the label. and then, instead of this label. we're going to use the object or the variable question, and then we'll use the question id. you know what in