Shopify Theme Blocks

Blocks are modules of content that can be added, removed, and reordered within a section. This allows merchants to have granular control over the look and feel of every aspect of their online store. Each section can have a maximum of 16 blocks per section. 

For example, creating simple footer to demonstrate how multiple blocks can be included in a section. The easiest way to start may be to look at the full section, and then analyze each individual piece in isolation:

<footer class="footer">
  
  {% for block in section.blocks %}  
    {% case block.type %}
  
      {% when 'link' %}  
        <div class="link" {{ block.shopify_attributes }}>   
          {{ block.settings.linktext | link_to: block.settings.linkurl }}
        </div> 
  
      {% when 'custom-text' %}
        <div class="text" {{ block.shopify_attributes }}>{{ block.settings.custom-text-field }}</div>
  
    {% endcase %} 
  {% endfor %}

</footer>  

{% schema %}
{
  "name": "Footer",
  "max_blocks": 8,
  "blocks": [
    {
      "type": "link",
      "name": "Link",
      "settings": [
        {
          "id": "linkurl",
          "type": "url",
          "label": "URL link"
        },
        {
          "id": "linktext",
          "type": "text",
          "label": "Link text"
        }
      ]
    },
    {
      "type": "custom-text",
      "name": "Custom Text",
      "settings": [
        {
          "id": "custom-text-field",
          "type": "textarea",
          "label": "Text"
        }
      ]
    }
  ]
}
{% endschema %}

Leave a comment

Your email address will not be published. Required fields are marked *