Welcome to CodeCrew Infotech
How To Create F.A.Q. Section In Shopify Theme
What is FAQ??
FAQ stands for “Frequently Asked Questions" which is list of common questions and answer means some customer asked company about the product, policy, shipping or anything which related with store which is not understand properly thats why they asked the company about their problem and company give them respond according to their problem.
Why you should make an FAQ page??
some times most of customer have a common questions that why company create the FAQ section and show the all type of common questions with answer shown on the shopify store. which is also an ime-saving customer service tactic.
using FAQ you should build trust of the customer. They provide a lot of information on the eCommerce market in general, and on their platform specifically.
Which type of Elements of a FAQ??
general questions, payments reguarding questions, Shipping reguarding questions, return and other type of questions.
In this blog we will show to how to create dynamic FAQ section in shopify.
Step 1:- Follow this steps Shopify admin > Themes > Actions > Edit code then create new section file with name "faq.liquid" and paste the below code
|
<div class="faq page-width page-width--narrow"> {% for block in section.blocks %} <div class="tab"> <input type="checkbox" id="tab{{forloop.index}}" class="tab-toggle"> <label for="tab{{forloop.index}}" class="tab-label">{{block.settings.faq-title}}</label> <div class="tab-content">{{block.settings.faq-content}}</div> </div> {% endfor %} </div>
{% schema %} { "name": "F.A.Q section", "settings": [], "blocks": [ { "type": "text", "name": "FAQ content", "settings": [ { "id": "faq-title", "type": "text", "label": "Faq Title" }, { "id": "faq-content", "type": "textarea", "label": "Faq Content" } ] } ], "presets": [ { "category": "FAQ Section", "name": "faq content" } ] } {% endschema %}
|
Step 2:- Also paste this CSS code for FAQ in the Assets folder in the base.css file.
|
/* FAQ Section */ .faq { border-radius: 8px; overflow: hidden; } .faq .tab-label::after { content: '\276F'; transition: all .4s; } .faq .tab-toggle { display: none; } .faq .tab-label { background-color: rgb(0, 0, 0); display: flex; justify-content: space-between; padding: 1em; font-weight: bold; color: white; font-size: 18px; font-family:Verdana, Geneva, Tahoma, sans-serif; } .faq .tab-label:hover { background-color: rgb(0, 0, 0); } .faq .tab-toggle:checked ~ .tab-label::after { transform: rotate(90deg); } .faq .tab-toggle:checked ~ .tab-label { background-color: rgb(0, 0, 0); } .faq .tab-content { background-color: #EDEDED; max-height: 0px; overflow: hidden; transition: all 0.4s; padding: 0 1em; } .faq .tab-toggle:checked ~ .tab-content { max-height: 100vh; padding: 1em; } .faq .tab { margin-bottom: 10px; }
|
You may also like
