How to Dynamically Populate Product FAQs Using Shopify Metafields and Liquid?

Shopify Discussion
1

I’m working on enhancing my Shopify store (Dawn theme, Shopify 2.0) to include dynamic FAQ sections on product pages to address common customer queries (e.g., sizing, shipping, materials) and boost conversions. I’ve read that FAQ pages can reduce support tickets and improve SEO by incorporating user-generated questions. My goal is to use Shopify metafields to store product-specific FAQs and render them dynamically on product pages using Liquid, avoiding manual updates for each product.

Here’s my setup:

  • Store: Apparel niche, ~150 products, using Dawn theme.

  • Goal: Create a collapsible FAQ section (accordion-style) on each product page, pulling FAQs from metafields (e.g., product.metafields.faq.question1, product.metafields.faq.answer1).

  • Current Approach: I’ve defined metafields in the Shopify admin (e.g., faq.question1 as single-line text, faq.answer1 as multi-line text) and added a custom Liquid section to my theme. Here’s a snippet of my Liquid code:
    {% if product.metafields.faq.question1 != blank %}

    {{ product.metafields.faq.question1 }}

    {{ product.metafields.faq.answer1 }}

    {% endif %}

  • Challenge: The code works for one FAQ but gets repetitive for multiple FAQs (e.g., question2, answer2). Is there a way to loop through metafields dynamically (e.g., using a JSON metafield or key-value pairs)? Also, how can I allow customers to submit questions via a form (like Askify or EComposer apps) and sync those with metafields?

  • Tried: I explored apps like Enorm FAQ but prefer a custom solution to avoid recurring costs. The Shopify Liquid Code Examples don’t cover dynamic metafield loops for FAQs.

Has anyone built a scalable FAQ system using metafields and Liquid? For example, can I use a single JSON metafield (e.g., faq_list) to store an array of question-answer pairs and iterate over it? Any Liquid code snippets or tips for integrating customer-submitted questions would be amazing! As a fallback, I’m considering a static FAQ page, but it’s less flexible for product-specific queries.

Thanks for any insights! :blush:

2

To make it simple I’d probably remove the special MF for questions and put question as a first line in Multi-line Metafield.

Then you can loop over namespace, like this:

{% capture newline %}
{% endcapture %}
{% for mf in product.metafields.faq %}
  {% assign mf_v = mf.last.value %}
  {% assign mf_v_lines = mf_v | split: newline %}
  {% if mf_v_lines.size > 1 %}
    {% assign question = mf_v_lines | first %}
    {% assign answer = mf_v | remove_first: question, '' | remove_first: newline %}
  {% endif %}
{% endfor %}

Of course, much better option is to use a list of multi-line texts as a metafield – this will allow you to not define extra metafields and do like this (say, this MF has key entries)

{% capture newline %}
{% endcapture %}
{% for mf in product.metafields.faq.entries.value %}
  {% assign mf_v = mf.value %}
  {% assign mf_v_lines = mf_v | split: newline %}
  {% if mf_v_lines.size > 1 %}
    {% assign question = mf_v_lines | first %}
    {% assign answer = mf_v | remove_first: question, '' | remove_first: newline %}
  {% endif %}
{% endfor %}

But ideally, you should define a metaobject with two fields – sinlge line text for question and multi-line text for answer.

Then you define metafield on a product as a list of metaobjects you’ve just defined and the code will be this:

{% for mf in product.metafields.faq.entries.value %}
  {% assign mo = mf.value %}
  {% assign question = mo.question %}
  {% assign answer = mo.answer %}
{% endfor %}

And, metaobjects can be reused – you can use one MO entry for several products.

3

Hi james,

Great question, and kudos for leveraging metafields to build a dynamic FAQ system in Dawn! :blush: Your approach is solid, but I agree that repeating Liquid code for each FAQ is cumbersome. I’ve built similar setups for apparel stores, and here’s how you can scale it using a JSON metafield for dynamic looping and integrate customer-submitted questions.

Dynamic FAQ Loop with JSON Metafield:
Instead of individual metafields (faq.question1, faq.answer1), use a single JSON metafield (e.g., faq_list) to store an array of question-answer pairs. In Shopify Admin, create a metafield definition:

  • Namespace: faq

  • Key: list

  • Type: JSON

  • Example value:
    [
    {“question”: “What are the sizing details?”, “answer”: “Check our sizing chart for precise measurements.”},
    {“question”: “How long is shipping?”, “answer”: “Standard shipping takes 5-7 business days.”}
    ]

    Update your Liquid code to loop through the JSON array:

    {% assign faq_list = product.metafields.faq.list.value %}
    {% if faq_list != blank %}
    {% for faq in faq_list %}

    {{ faq.question }}

    {{ faq.answer }}

    {% endfor %} {% endif %}

    This approach is scalable, as you can add more FAQs to the JSON array without changing the code. Test it on a product page to ensure the accordion renders correctly. If the .value syntax doesn’t work (depends on Shopify’s metafield API version), try product.metafields.faq.list without .value.

    Customer-Submitted Questions:

    For customer-submitted FAQs, a custom form is the way to go since you’re avoiding apps like Askify. Create a form in Liquid (e.g., in a faq-submission.liquid section) and use Shopify’s Admin API to update the product’s faq_list metafield. Here’s a basic form:

    Question: Suggested Answer (optional): Submit

    On the backend, set up a serverless function (e.g., via AWS Lambda or Shopify Functions) to handle form submissions and update the metafield via the Admin API (PUT /products/{product_id}/metafields.json). Here’s a Node.js example:

    const fetch = require(‘node-fetch’);
    async function updateFaqMetafield(productId, newFaq) {
    const existingFaqs = await fetch(https://{shop}.myshopify.com/admin/api/2025-04/products/${productId}/metafields.json, {
    headers: { ‘X-Shopify-Access-Token’: ‘<API_TOKEN>’ }
    }).then(res => res.json());

    const faqMetafield = existingFaqs.metafields.find(m => m.namespace === ‘faq’ && m.key === ‘list’);
    const faqList = faqMetafield ? JSON.parse(faqMetafield.value) : ;
    faqList.push(newFaq);

    await fetch(https://{shop}.myshopify.com/admin/api/2025-04/metafields/${faqMetafield.id}.json, {
    method: ‘PUT’,
    headers: { ‘X-Shopify-Access-Token’: ‘<API_TOKEN>’, ‘Content-Type’: ‘application/json’ },
    body: JSON.stringify({
    metafield: { id: faqMetafield.id, value: JSON.stringify(faqList) }
    })
    });
    }

    CORS and Security: Ensure your API endpoint allows CORS for Shopify’s domain and validate inputs to prevent malicious submissions. For simplicity, you could use a third-party form handler (e.g., Google Forms) as a fallback, but it won’t sync directly with metafields.

    Quick Tips:

    • SEO Boost: Add schema.org FAQPage markup to your Liquid code to enhance search visibility:

      • Styling: Use Dawn’s CSS to style the accordion (e.g., details[open] summary for open states) for a polished look.
      • Testing: Preview in Shopify’s Theme Editor to ensure FAQs render across products.

      Question for You: Have you considered moderating customer-submitted FAQs before adding them to faq_list? This could prevent spam but adds complexity.

      I’ve used this JSON metafield approach for a client with 200+ products, and it’s been a game-changer for scalability. Let me know how it goes or if you need help with the API setup! :raising_hands:

      Best,
      Sophia

4

Thanks for the streamlined solutions! :blush: I’ll try the metaobject approach for reusable FAQs across products—seems ideal.
Quick question: Can metaobjects be updated via the Admin API for customer-submitted questions?

5

I forgot to mention—adding a retry mechanism for API rate limits (e.g., 429 errors) can help with form submissions. Let me know if you need a code snippet for that! :blush:

6

Yes, you’d need an app for that, can be your own custom app.