Hello,
I have made a FAQ page in pages and added it to the footer section of my website but when I click it, it opens the about page. The theme template is set to default. Can you please guide me on how to create a FAQ section?
2 Likes
Hi,
Welcome to Shopify Community.
We are Always Happy to help you.
Kindly Share you Store Url or Refrence Url Which type of Faq you want.
Thank you.
My store url is : https://alineardot.com
Password : Yellow7#
I would like to have a Faq page like : https://www.artandfound.co/faqs
1 Like
Create FAQ Section
Navigate to Online Store → Themes → Edit code
Under the Sections tab, create a new file — let’s call it simply: faq.liquid
{% for block in section.blocks %}
{% if block.type == 'header' %}
### {{block.settings.header}}
{% else %}
{{block.settings.question}}
{{block.settings.answer}}
{% endif %}
{% endfor %}
{% schema %}
{
"name": "FAQ",
"class": "index-section index-section — featured-sider",
"settings": [
],
"blocks": [
{
"type": "slide",
"name": "Question",
"settings": [
{
"type": "header",
"content": "Question Item"
},
{
"type": "number",
"id": "id",
"label": "id — integer"
},
{
"type": "text",
"id": "question",
"label": "Question — text"
},
{
"type": "html",
"id": "answer",
"label": "Answer — html"
}
]
},
{
"type": "header",
"name": "Header",
"settings": [
{
"type": "header",
"content": "Header"
},
{
"type": "text",
"id": "header",
"label": "Header"
}
]
}
]
}
{% endschema %}
Create faq page template
Navigate to Online Store → Themes → Edit code
Under the Templates tab, create a new file — let’s call it: page.faq.liquid
In this template we want to render anything that we want displayed on the FAQ page.
To keep things simple we will only render the faq section:
{% render 'breadcrumbs' %}
{{ page.content }}
{% section "faq" %}
Style the Accoridion
Now that we have the mechanics in place, let’s add some styles.
— the styles below are merely as guidelines, please fell free to change them accordingly to your website styles
Navigate to Online Store → Themes → Edit code
Search for theme.scss file and add the code below at the very bottom of the file.
.accordion {
margin: 0;
padding:10px;
border-top:#f0f0f0 1px solid;
background: #e8e8e8;
text-decoration:none;
color: $color-body-text;
font-size:1em;
position:relative;
}
.accordion-open {
background:$settings-color-primary;
color: $color-body-text;
}
.accordion-open span {
display:block;
position:absolute;
right:3px;
top:25%;
padding:10px;
}
.accordion-open span {
background:url(‘{{ ‘minus.png’ | asset_url }}’) center center no-repeat;
}
.accordion-close span {
display:block;
position:absolute;
right:3px;
top:25%;
background:url(‘{{ ‘plus.png’ | asset_url }}’) center center no-repeat;
padding:10px;
}
.faq-header {
margin:3rem 0 1rem 0!important;
}
.faqpage div.container {
padding:0;
margin:0;
}
.faqpage div.container {
max-width:100%;
padding:5px 0;
}
.faqpage div.content {
background:#f4f4f4;
margin: 0;
padding:10px;
font-size:.9em;
line-height:1.5em;
}
.faqpage div.content ul {
padding:0;
margin:0;
padding:3px;
}
.faqpage div.content p {
padding:0;
margin:3px 0 10px;
padding:3px;
}
.faqpage div.content ul li {
list-style-position:inside;
line-height:25px;
Now You will have a dynamic FAQ Page for your Shopify store.
Thank you.
@Alinear7
Remove that code and Try this One. and save. you will Get the Result.
{% if section.settings.title != blank %}
## {{ section.settings.title | escape }}
{{ section.settings.subtitle }}
{% endif %}
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{% if block.settings.question != blank %}
{{ block.settings.question }}
{% endif %}
{% if block.settings.answer != blank %}
{{ block.settings.answer }}
{% endif %}
{% endfor %}
{% endif %}
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
{% if section.settings.faq_footer_title != blank %}
### {{ section.settings.faq_footer_title }}
{% endif %}
{% if section.settings.faq_footer_email != blank %}
[{{ section.settings.faq_footer_email }}](mailto:{{ section.settings.faq_footer_email }})
{% endif %}
{% schema %}
{
"name": "FAQ",
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": "FAQ page heading",
"default": "FAQ"
},
{
"type": "text",
"id": "subtitle",
"label": "FAQ page subtitle",
"default": "FAQ Subtitle"
},
{
"type": "text",
"id": "faq_footer_title",
"label": "Footer title",
"default": "If you can’t find answer for your quesion, contact us"
},
{
"type": "text",
"id": "faq_footer_email",
"label": "Footer email",
"default": "lipsum@example.com"
}
],
"blocks": [
{
"type": "text_block",
"name": "Item",
"settings": [
{
"type": "text",
"id": "question",
"label": "Question",
"default": "Add Question"
},
{
"type": "richtext",
"id": "answer",
"label": "Add answer",
"default": "
Add Answer
"
}
]
}
],
"presets": [
{
"name": "FAQ",
"category": "Text",
"blocks": [
{
"type": "text_block"
},
{
"type": "text_block"
},
{
"type": "text_block"
}
]
}
]
}
{% endschema %}
@Alinear7
Make Sure You are Creating A section into the Section Field.
Thank you.
yes this worked and i have saved it.
1 Like
@Alinear7 Use Second Code which I have Send.
Add that code only.
Thank you.
yes.
Hi,
Cna you please check I have added the code. But not sure where is it showing?
1 Like
Hi! This was very helpful and useful! However, when I try to click on the question buttons they don’t display the answers
1 Like
Welcome to Shopify Community.
We are always happy to help you.
Kindly Share me your Store url So, that I can help regarding this.
Please check the following video for help
https://www.youtube.com/watch?v=7eo1pbldkpw
https://weeklyhow.com/create-faqs-page-for-shopify-theme-dawn/
Thanks!
Hi! Our site is shopeve.in
Hi I tried to use the steps given here but I’m getting this on my page
Hi Zworthkey
thank you so much for this, just one issue everything seems to be working, apart from the toggle click to open for answer doesn’t seem to be working, i am wondering if you have a work around for this?
Thank you!