Individual FAQs on every collection page without creating separate templates

Store Design
,
1

Hi, I’m trying to customise my collection pages and I want each collection page to have different collapsible FAQ’s section. At the moment, I know I can add metafields to create dynamic text on every collection page which is fine, however, I would like to add collapsible FAQs (all different) to each collection page without having to create new and separate templates for each collection.

2

This is the answer: " I know I can add metafields to create dynamic text on every collection page"

3

Hi @DAC1

As you already have the metafields for the FAQs on the collection, you can fetch those metafields using for loop and going through each metafield with their value and display those on your collection product grid file.

If you are looking for multi-line fields, you can even use metaobject for FAQ, as it will be easier to integrate all FAQs on a single object and fetch that metaobject from the theme itself.

Hope this helped.

Thank you,

Sajat

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.

4

Were you able to do this? I am also trying to do the same this but meta field is not showing on the template file to make it dynamic? If that was possible and you have implemented the same please do let me know. Thanks @DAC1

5

You can actually achieve this using metafields and custom liquid. It’s just the custom liquid needs to handle extracting question and answer from metafield properly.

Here’s how to do this:

Step 1: Create a metafield in collections. Name it FAQ. Select type as List and Single line text line.

Step 2: Add this custom liquid section to your collection page

{%if collection.metafields.custom.faq.value != blank %}
<h2 class="sj-text-center">FAQ</h2>
{% endif %}

{% if collection.metafields.custom.faq and collection.metafields.custom.faq.value != blank %}
  <div class="sj-faq-wrapper">
    {% for item in collection.metafields.custom.faq.value %}
      {% assign parts = item | split: 'ans=' %}
      {% assign question = parts[0] | strip %}
      {% assign answer   = parts[1] | strip %}
      <details class="sj-faq">
        <summary>{{ question }}</summary>
        <div class="sj-faq-body">
          <p>{{ answer }}</p>
        </div>
      </details>
    {% endfor %}
  </div>
{% endif %}

<style>
.sj-faq-wrapper {
  width: 60%;
  margin: 0 auto;          /* centers on desktop */
}

.sj-faq {
  border-bottom: 1px solid #dadce0;
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
}

.sj-faq summary {
  list-style: none;            /* removes default triangle */
  cursor: pointer;
  padding: 18px 8px;
  font-size: 16px;
  color: #202124;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color .15s ease;
}

.sj-faq summary::-webkit-details-marker { display: none; } /* Safari */

/* chevron */
.sj-faq summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid #5f6368;
  border-bottom: 2px solid #5f6368;
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-left: 16px;
  flex-shrink: 0;
}

.sj-faq[open] summary::after {
  transform: rotate(-135deg);  /* points up when open */
}

.sj-faq-body {
  padding: 0 8px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #5f6368;
}

/* mobile: full width with small side padding */
@media (max-width: 768px) {
  .sj-faq-wrapper {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
  }
}

.sj-text-center {
text-align:center;
margin-bottom:15px;
}

.sj-faq:last-child {
  border-bottom: none;
}
</style>

Step 3: Go back to any collection page and FAQ in metafield in this format,

Question? ans= your answer goes here

You can add as many faq’s as you want.

Here’s a youtube video showing how to do it step by step if you need more help - https://www.youtube.com/watch?v=9hToIpuYGcA

Hope this helps.