Add Per-Product FAQs with Metafields

Display a FAQ section on each product page that answers common questions specific to that product, reducing support tickets and removing purchase hesitation.

Advanced Tutorial

This tutorial requires knowledge of HTML, CSS, JavaScript, and Shopify Liquid. May require adjustments depending on your theme.

Why Per-Product FAQs?

• Answers objections at the point of purchase Customers get answers without leaving the page or contacting support
• Reduces support volume Common questions are answered before they're asked
• Improves SEO FAQ content adds keyword-rich text to product pages and can generate FAQ rich results in Google

Step 1: Create the Metafields

In Metafield Studio, create metafields under the product_faq namespace. Each metafield represents one Q&A pair:

Namespace	Key	Type	Value
product_faq	q1	Multi-line text	Is this machine washable?\nYes, machine wash cold on a gentle cycle. Tumble dry low or hang to dry.
product_faq	q2	Multi-line text	What is the return policy?\nWe offer free returns within 30 days. Items must be unworn with tags attached.
product_faq	q3	Multi-line text	Does this run true to size?\nThis style runs slightly oversized. If you prefer a fitted look, we recommend sizing down.

Format: The first line of each value is the question, and everything after the first line break is the answer.

Step 2: Create a Liquid Snippet

Create product-faqs.liquid in Snippets:

{% assign faq_fields = product.metafields.product_faq %}
{% if faq_fields.size > 0 %}
<div class="product-faq">
  <h3>Frequently Asked Questions</h3>
  {% for faq in faq_fields %}
    {% assign faq_value = faq | last | newline_to_br | split: '<br />' %}
    {% if faq_value.size > 1 %}
      {% assign question = faq_value[0] | strip %}
      {% assign answer_parts = faq_value | slice: 1, faq_value.size %}
      <details class="product-faq__item">
        <summary class="product-faq__question">{{ question }}</summary>
        <div class="product-faq__answer">
          {% for part in answer_parts %}
            {% assign stripped = part | strip %}
            {% if stripped != '' %}
              <p>{{ stripped }}</p>
            {% endif %}
          {% endfor %}
        </div>
      </details>
    {% endif %}
  {% endfor %}
</div>
{% endif %}

This uses the native HTML <details> element for accessible, no-JavaScript expand/collapse behavior.

Step 3: Include in Product Template

In sections/main-product.liquid or sections/product-template.liquid, add below the product description:

{% render "product-faqs" %}

Step 4: Add CSS

.product-faq {
  margin: 24px 0;
}

.product-faq h3 {
  margin-bottom: 12px;
}

.product-faq__item {
  border-bottom: 1px solid #e5e5e5;
}

.product-faq__question {
  padding: 14px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-faq__question::after {
  content: '+';
  font-size: 20px;
  font-weight: 300;
  transition: transform 0.2s;
}

.product-faq__item[open] .product-faq__question::after {
  content: '−';
}

.product-faq__answer {
  padding: 0 0 14px 0;
  color: #555;
  line-height: 1.6;
}

.product-faq__answer p {
  margin: 0 0 8px 0;
}

.product-faq__answer p:last-child {
  margin-bottom: 0;
}

Step 5: Populate Per Product

Add FAQ metafields to products that commonly generate support questions. Good candidates:

• Products with sizing complexity
• Items with compatibility requirements ("Will this fit my...?")
• Products with care or maintenance instructions
• Items with shipping restrictions or longer lead times
• Products where material or ingredient details matter

Start with your top sellers

Check your support inbox for the most commonly asked questions, then add those as FAQs to the relevant products. Even 3-5 Q&A pairs per product can meaningfully reduce support tickets.

Alternative: Rich Text Metafield

For a simpler approach, use a single rich text metafield and format your FAQs with bold questions and regular-weight answers. Display it using the Text / HTML theme extension no code required.