Demonstrate FAQs Page.
View this pattern on the live demo site
FAQs landing page; the full FAQ list is a dedicated section.
{% comment %}
Full FAQs page. Displays FAQs organized by category, specified manually in the custom fields
{% endcomment -%}
{%- include "/_header.liquid" -%}
{%- include "/sections/_generic_banner.liquid" -%}
{%- include "/sections/_breadcrumbs.liquid" -%}
{%- include "/sections/_faqs_full.liquid" section_class:'py-5' -%}
{%- include "/sections/_simple_cta.liquid" -%}
{%- include "/_footer.liquid" -%}Full-page FAQ listing (not the compact FAQs section used on other pages).
{% comment %}
Displays full FAQ sections for FAQ pages, organized by category.
Categories render as headings (not nested accordions). Individual FAQs remain
a single-level accordion under each category for clearer mobile UX.
Inputs:
section_class
section_id
title_classname
subtitle_classname
Custom Fields:
faqs_title
faqs_subtitle
faqs_categories (fieldset: category_title, category_faqs)
Outputs:
section_rendered - true when this section outputs markup, false otherwise
{% endcomment -%}
{%- if entity.faqs_categories is_valid -%}
{%- var headinglevel = headinglevel %}{% comment %}Copy to current scope{% endcomment -%}
<section{% if section_class %} class="{{ section_class }}"{% endif %}{% if section_id %} id="{{ section_id }}"{% endif %}>
<div class="container">
{%- if entity.faqs_title.is_valid or entity.faqs_subtitle.is_valid -%}
{%- include "/common/_title_with_subtitle.liquid" title:entity.faqs_title subtitle:entity.faqs_subtitle title_classname:'h2 text-primary' postincrement_headinglevel:true -%}
{%- endif -%}
{%- var category_headinglevel = headinglevel -%}
{%- for category in entity.faqs_categories -%}
{%- set headinglevel = category_headinglevel -%}
<div class="mb-5{% unless forloop.last %} pb-2{% endunless %}">
{%- if category.category_title.is_valid -%}
{%- include "/common/_title.liquid" title:category.category_title title_classname:'h3 text-primary mb-3 text-start' postincrement_headinglevel:true -%}
{%- endif -%}
{%- include "/partials/_faqs_list.liquid" faqs:category.category_faqs -%}
</div>
{%- endfor -%}
</div>
</section>
{%- set section_rendered = true -%}
{%- else -%}
{%- set section_rendered = false -%}
{%- endif %}
Custom fields owned by the full FAQs section.
[
{
"Type": "group",
"Label": "FAQs Main Section",
"Condition": null,
"Collapsible": true,
"Fields": [
{
"Type": "text",
"FieldID": "faqs_title",
"Label": "Main Title",
"IsRequired": true,
"DefaultValue": "Frequently Asked Questions"
},
{
"Type": "textarea",
"FieldID": "faqs_subtitle",
"Label": "Subtitle/Description",
"DefaultValue": "Find answers to common questions about our services"
},
{
"Type": "fieldset",
"FieldID": "faqs_categories",
"Label": "Categories",
"Fields": [
{
"Type": "text",
"FieldID": "category_title",
"Label": "Category Title",
"IsRequired": true,
"Placeholder": "e.g. General, Billing, Services"
},
{
"Type": "datastoreitemlist",
"FieldID": "category_faqs",
"Label": "FAQs for this Category",
"Subtext": "Select and reorder FAQs for this category",
"IsRequired": true,
"DatastoreGUID": "FAQs"
}
],
"AllowMultiple": true,
"InitCollapsed": false
}
]
}
]
Accordion used once per FAQ category on the full page.
{% comment %}
Outputs a list of FAQ items as an accordion
Inputs:
faqs - a list or collection of FAQ datastore items
{% endcomment -%}
{%- if faqs is_valid -%}
{%- var headingtag = 'p' %}{% comment %}Copy to current scope{% endcomment -%}
{%- include '/common/_headinglevel.liquid' -%}
<div class="accordion accordion-flush" id="{% id accordionId output_to_template = prefix:'faqs_' %}">
{%- for faq in faqs -%}
{%- id var headerId = prefix:'faq_h' -%}
{%- id var collapseId = prefix: 'faq_b' -%}
<div class="accordion-item border rounded-3 mb-3 overflow-hidden bg-white">
<{{headingtag}} class="accordion-header" id="{{headerId}}">
<button class="accordion-button collapsed bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#{{collapseId}}" aria-expanded="false" aria-controls="{{collapseId}}">{{faq.question | default: faq.title}}</button>
</{{headingtag}}>
<div id="{{collapseId}}" class="accordion-collapse collapse" data-bs-parent="#{{accordionId}}" aria-labelledby="{{headerId}}">
<div class="accordion-body">{{faq.answer | default: faq.content_html}}</div>
</div>
</div>
{%- endfor -%}
</div>
{%- endif -%}