Add FAQ Section (collapsible tabs) to the Product Page (Focal Theme)

[Dev-Steve]

Hi together,

I need to add the FAQ blocks to my product page as collapsible tabs. 

I already copied the main part of the faq.liquid (faq section) inside the main-product.liquid (product page) and customized the 'block' code to have the ability to add the ''category'' or ''questions'' blocks.

It works, but the tabs shown up above the product and not on the right side like everything else. 

I don't know how I get the collapsible faq tabs to the side of the product pics and under the name and price info.

I can share the whole page code for the one who can help.

My store: https://dev-stschuele.myshopify.com/products/30-vitamin-c-serum

Password: sitwao

Thanks to everyone!

[NatureBed]

Hi Steve, I noticed on the website you were working on that you now have it fully functioning. Would you mind showing me how you made the collapsible tabs?

Kind regards

Brendan

[Dev-Steve · Accepted solution]

Hi @NatureBed ,

yes, I managed it by myself. 

You have to add the the following code on the bottom of the product-form.liquid file inside the snipped folder:

<div class="product-info">
            {%- for block in section.blocks -%}
              {%- case block.type -%}
               

                {%- when 'cttitle' -%}
                  <div class="collapsible__item">
                    <button is="toggle-button" class="collapsible-toggle" aria-controls="block-{{ section.id }}-{{ block.id }}" aria-expanded="false" itemprop="name">
                      {{- block.settings.title -}}
                      <span class="animated-plus"></span>
                    </button>

                    <collapsible-content id="block-{{ section.id }}-{{ block.id }}" class="collapsible anchor" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" {{ block.shopify_attributes }}>
                      <div class="collapsible__content text-container" itemprop="text">
                        {{ block.settings.answer }}
                     </div>
                    </collapsible-content>
                  </div>
              {%- endcase -%}
            {%- endfor -%}

Add the next code snipped to the {% shame %} part of the main.product.liquid:

{
      "type": "cttitle",
      "name": "Collapsible Tab",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "About the product"
        },
        {
          "type": "richtext",
          "id": "answer",
          "label": "Content",
          "default": "<p>Write content to help your customers to better understand your products.</p>"
        }
      ]
    },

You can add the code between the 'app' and 'variant_picker'.

I hope that works for you!

[NatureBed]

Hi Steve, thank you for the reply. I have added the first snippet of code but I'm not having much success with the second part. I've tried adding it in between the app and variant_picker as well as many other areas of the main-product.liquid and I continue to receive the following error:

Unable to update the file

• Invalid JSON in tag 'schema'

Any suggestions would be appreciated.

Kind regards

Brendan

[Dev-Steve]

Hi Brendan,

you have to make shure to paste the code the right way. Look that you end it with one ',' 

And you have to close all loops with '}' or ']' if you opened it with one of the opposite ones.

If it's still doesn't work, you can post you whole JSON part here with the error and I will look what's wrong.

[NatureBed]

Thank you so much, this has worked a treat!