Multi Level Shopify Section

Question

I'm trying to build a section managed part of a product page, where the merchant can input a bunch of FAQ question/answer items based on product type. The mockup has 3 different categories, each with their own list of FAQs.

I'm a bit stuck on how to make the number of FAQ's under each section be dynamically added (ex, Formula could have 9 FAQs, but Porridge could have 2).

Currently, the below code just adds a bunch of buttons, and returns an "invalid JSON tag in 'schema'.

It seems like section blocks only go 1 level deep from my experience. Is there a way to create a section, and input multiple items in that section and have them link together?

[screenshot of shopify section][ https://imgur.com/a/LcWEXZ6]

[mockup][ https://imgur.com/a/BABFRwK]

I've removed the code for the faq accordions for brevity.

<div class="faqs">
    {% for block in section.blocks %}
    {%- assign titleIndex = 0 -%}   

        {% if block.type == "faqHeading" %}
          <h2 class="title faq--heading">{{ block.settings.faqHeading }}</h2>
        {% endif %}

        <div data-tab-component>
          <div role="tablist" aria-label="Tabbed content">
            {% if block.type == "faqSection" %}
                <button role="tab" 
                        aria-selected="true" 
                        aria-controls="tab1-content" 
                        id="tab1"
                        class="tab__button">
                  {{ block.settings.faqSection }}
                </button>
            {% endif %}
        </div>

      {%- assign contentIndex = 0 -%}

            {% if block.type == "faqSection" %}     
                {%- assign contentIndex = 0 | plus: 1 -%}   
                <section id="faq__tab-content tab{{ contentIndex }}-content" 
                        role="tabpanel" 
                        aria-labelledby="tab{{ contentIndex }}" 
                        tabindex="0"
                        aria-hidden="true">

                        {%- assign faqIndex = 0 -%}
                        {% for block in section.blocks %}
                            {% if block.type == "FAQQandA" %}
                                <dl class="faqAccordion">
                                    {% for block in section.blocks %}
                                        {%- assign faqIndex = 0 | plus: 1 -%}
                                        <dt><button type="button" aria-controls="panel-01" aria-expanded="true">{{ block.settings.faqQuestion }}</button></dt>

                                        <dd id="panel-0{{ faqIndex }}" aria-hidden="false">
                                          {{ block.settings.faqAnswer }}
                                        </dd>
                                    {% endfor %}
                                </dl>
                            {% endif %}
                        {% endfor %}
                </section>
            {% endif %}
    {% endfor %}
</div>

{% schema %}
{
    "blocks": [
        {
            "name": "FAQ Heading",
            "type": "FAQHeading",
            "limit": 1,
            "settings": [
                {
                    "type": "text",
                    "id": "faqHeading",
                    "label": "FAQ Title",
                    "default": "FAQs"
                }
            ]
        },
        {
          "name": "FAQ Section ",
          "type": "faqSection",
          "settings" : [
                {
                    "type": "text",
                    "id": "faqSection",
                    "label": "FAQ Product Type"
                }
            ],
            "blocks": [
                {
                    "type": "text",
                    "name": "Question"
                    "settings" [
                        {
                            "type": "text",
                            "label": "Enter Question",
                            "id": "faqQuestion",
                            "default": "FAQ question content goes here"
                        },
                        {
                            "type": "textarea",
                            "label": "Enter Answer",
                            "id": "faqAnswer",
                            "default": "Lorem ipsum dolor amit icit"
                        }
                    ]
                } 
            ]
        }
    ]
}

Answer 1

The short answer is - No .

Sections allow only a single level for the blocks.

---

But you can overcome this limitation with some additional code.

You create an additional text field for each block where you will enter the product type and when you loop the blocks you will have to check if the text field is equal to the product type.

Example:

"blocks": [
    {
        "type": "text",
        "name": "Question"
        "settings" [
            {
                "type": "text",
                "label": "Type",
                "id": "type"
            },
            {
                "type": "text",
                "label": "Enter Question",
                "id": "faqQuestion",
                "default": "FAQ question content goes here"
            },
            {
                "type": "textarea",
                "label": "Enter Answer",
                "id": "faqAnswer",
                "default": "Lorem ipsum dolor amit icit"
            }
        ]
    } 
]

And the loop in question.

{%- for block in section.blocks -%}
  {%- assign type = block.settings.type -%}
  {%- if type == product.type -%}
    ... Do your QA logic here
  {%- endif -%}
{%- endfor -%}

Please have in mind that this approach is not admin friendly, since the more products you have the more QA blocks you will have and it some point it will be hell to manage them. It's better to use a metafield APP with repeatable fields for this.