Saturday 31 October 2020

How to create simple dynamic section with block in Shopify liquid in theme

add {% section 'contactpagefaq' %} on your template file

Create new section file called : contactpagefaq.liquid, and paste following code.

{% if section.settings.faqenable %}
<h2>{{ section.settings.faqtitle }}</h2>   

  {% for block in section.blocks %}  
  
  <button class="accordion">{{ block.settings.sectiontitle }}</button>
          <div class="panel">
            <p>{{ block.settings.sectiontext }}</p>
          </div>
  {% endfor %}
{% endif %}
{% schema %}
{
  "name": "Contact Page FAQ",
  "max_blocks": 5,
  "settings": [
{
          "id": "faqenable",
          "type": "checkbox",
          "label": "Enable",
          "default": true
        },
        {
          "id": "faqtitle",
          "type": "text",
          "label": "Heading",
          "default": "FAQ"
        }
      ],
  "blocks": [
    {
      "type": "select",
      "name": "Block",
      "settings": [
{
          "id": "sectiontitle",
          "type": "text",
          "label": "Title"
        },
        {
          "id": "sectiontext",
          "type": "textarea",
          "label": "Text"
        }
      ]
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}