Add new blocks to the product information section

[Vanessa-EC]

Hi all, I am using the Flex theme by Out of the Sandbox and I would like to add two new blocks to the product information section, but cannot find where I need to add the code to achieve this. The two blocks I would like to add to this section are:

1. Custom Liquid (dont know why they dont have this as its standard in most themes)

2. Collapsable tabs (again another standard theme feature)

Can anyone please let me know where I add these codes to achieve this please. 

[slprojects]

Here are two posts that helped me accomplish this:

• - https://stackoverflow.com/questions/65832167/how-to-add-custom-html-block-to-list-of-footer-options
• https://www.youtube.com/watch?v=ODSDFZs46PU

In the Flex theme I first edited the product__main.liquid file by adding the following code to the "blocks: []" section (found on line #351 of the original Flex v5.0.1 file at the time of writing).

    {
  "type": "html_content",
  "name": "HTML Content",
  "settings": [
    {
      "type": "html",
      "id": "html_area",
      "label": "Custom HTML",
      "default": "<div><p>Some HTML content</p></div>"
    }
  ]
}

I then edited the product.liquid file by adding the following code to the section that starts with the 

{%- for block in section.blocks -%}

loop (found on line #81 of my original file at the time of writing and using the latest version of Flex). Here's what I added:

{% elsif block.type == 'html_content' %}
            <div class="product-text">
        
             {{ block.settings.html_area }}
            </div>
        {%- endif -%}

This is a straightforward rendering of the code in the html_area.

I achieved the accordion functionality by simply pasting in the accordion code sample from Out of the Sandbox in the theme editor itself using my new HTML block. That sample is here: https://help.outofthesandbox.com/hc/en-us/articles/115006909687-Add-an-accordion-to-the-product-page

There's probably a more full featured way to implement it in a block.

If you wanted to create a custom liquid block I think you could follow the same steps with the exception of changing the  settings: [ type: " "  value in the first snippet to type:"liquid". So it would look like:

    {
  "type": "liquid_content",
  "name": "Liquid Content",
  "settings": [
    {
      "type": "liquid",
      "id": "liquid_area",
      "label": "Custom Liquid",
      "default": ""
    }
  ]
}

[fullstackdesign]

Thanks for sharing. In the Dawn theme, you can use this syntax

{%- when 'html_content' -%}
<div class="product-text">
{{ block.settings.html_area }}
</div>