How to Build a Dynamic FAQ Section on Product Pages Using Metafield Definitions

This tutorial will show you how to create a fully dynamic, accordion-style FAQ section on product pages using Shopify metafield definitions. Store owners can add FAQs directly from the product editor—no coding required!

📌 Step 1 — Create Two Product Metafields

We’ll create a metafield list that stores multiple FAQs, each containing a question and answer pair.

Go to:

Settings → Custom data → Products → Add definition

🟦 Metafield 1: FAQ List

• Name: Product FAQ
• Namespace & key: custom.faq_list
• Content type: List of entries

Inside the entry type settings, add two fields:

Field A — Question

• Type: Text (single line)
• Key: question

Field B — Answer

• Type: Rich text OR Multi-line text
• Key: answer

Click Save. You can now add FAQs directly from the product editor!

📌 Step 2 — Add the FAQ Accordion Code to Your Product Page

Edit your product template section:

Online Store → Themes → Edit Code  
→ sections → main-product.liquid  
(or product-template.liquid depending on your theme)

Paste this block wherever you want your FAQs to appear:

{% if product.metafields.custom.faq_list.size > 0 %}
  <div class="product-faq-section">
    <h2 class="faq-title">Frequently Asked Questions</h2>

    <div class="faq-accordion">
      {% for faq in product.metafields.custom.faq_list %}
        <div class="faq-item">
          <button class="faq-question">
            {{ faq.question }}
            <span class="faq-icon">+</span>
          </button>

          <div class="faq-answer">
            <p>{{ faq.answer }}</p>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
{% endif %}

📌 Step 3 — Add FAQ Accordion Styling & Interaction

Add this CSS + JS at the bottom of the same file or your theme’s global stylesheet:

<style>
.product-faq-section {
  margin-top: 40px;
  padding: 20px 25px;
  background: #f9f9f9;
  border-radius: 12px;
}

.faq-title {
  margin-bottom: 20px;
  font-size: 26px;
  font-weight: bold;
}

.faq-item {
  margin-bottom: 12px;
}

.faq-question {
  width: 100%;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  font-size: 17px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  background: #fff;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-radius: 0 0 8px 8px;
  padding: 0 18px;
}

.faq-answer p {
  margin: 15px 0;
}

.faq-question.active + .faq-answer {
  max-height: 300px;
}

.faq-question.active .faq-icon {
  transform: rotate(45deg);
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const faqItems = document.querySelectorAll(".faq-question");

  faqItems.forEach(btn => {
    btn.addEventListener("click", () => {
      btn.classList.toggle("active");
    });
  });
});
</script>

This creates a smooth accordion that opens one FAQ at a time.

📌 Step 4 — Add FAQs to Any Product

Go to:

Products → Choose a product → Scroll to Metafields → Product FAQ

Click **Add entry** and fill out:

• Question
• Answer

Add as many FAQ items as you want—your product page updates instantly.

🎉 You're Done!

You now have a fully dynamic, store-owner-friendly FAQ system with:

• Accordion toggle behavior
• No apps required
• Unlimited FAQs per product
• Easy editing via metafields

This is one of the most useful metafield features for boosting product clarity and conversions!