How To Add a FAQ Section To Your Shopify Home Page
By answering the customer’s Frequently Asked Questions, you can benefit your business in multiple ways. So you need to add a FAQ section to your Shopify home page. This article shows you how to add a FAQ section to the home page, step-by-step.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Sections directory, click Add a new section with the name section-hura-faq
- Copy the below code for this file content.123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131{%- if section.blocks.size > 0 -%}<div id="huratips-faq-section"><div class="huratips-faq-title"><h2>{{section.settings.title}}</h2>{% if section.settings.sub-title != blank %}<h3><em>{{section.settings.sub-title}}</em></h3>{% endif %}</div>{% for block in section.blocks %}<div class="huratips-faq-question">{{block.settings.question}}</div><div class="huratips-faq-answer"><div class="huratips-faq-answer-content">{{block.settings.answer}}</div></div>{% endfor %}<p class="hura-credit">Powered by <a href="//www.huratips.com" target="_blank">HuraTips.Com</a></p></div><script type="text/javascript">var acc=document.getElementsByClassName("huratips-faq-question");for(var i=0;i<acc.length;i++){acc[i].addEventListener("click",function(){this.classList.toggle("active");var panel=this.nextElementSibling;if(panel.style.maxHeight){panel.style.maxHeight=null;}else{panel.style.maxHeight=panel.scrollHeight+"px";}});}</script><style>#huratips-faq-section{position:relative;}.huratips-faq-title{text-align:center;}.huratips-faq-question{background-color:#eee;color:#444;cursor:pointer;padding:18px;border:none;text-align:left;outline:none;font-size:15px;transition:0.4s;}.huratips-faq-question.active,.huratips-faq-question:hover{background-color:#ccc;}.huratips-faq-question:after{content:"\02795";font-size:13px;color:#777;float:right;margin-left:5px;}.huratips-faq-question.active:after{content:"\2796";}.huratips-faq-answer{padding:0 18px;background-color:#fff;text-align:left;color:#000;max-height:0;overflow:hidden;transition:max-height 0.2s ease-out;}.huratips-faq-answer .huratips-faq-answer-content{margin:15px 0;}.hura-credit{position:absolute;bottom:-40px;right:0;font-size:11px;margin:0 0 20px 0;font-style:italic;}</style>{%- endif -%}{% schema %}{"name": "faq","settings": [{"type": "text","id": "title","label": "Title","default": "Frequently Asked Questions"},{"type": "text","id": "sub-title","label": "Sub Title"}],"blocks": [{"type": "text","name": "Question","settings": [{"id": "question","type": "text","label": "Question"},{"id": "answer","type": "text","label": "Answer"}]}],"presets": [{"name": "FAQ","category": "Custom","settings": {}}]}{% endschema %}
- Click Save
Now you follow the below steps to add the FAQ section to your home page.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to add the FAQ section, and then click Customize.
- In the settings page, you click on Add section
- In the list sections, go to Custom and click onto FAQ then click Select to add the section to home page.
- You add the title, sub title and the new questions
- Click Save and you are done.
