Section Blocks for Repeatable Content

1. What are Blocks and Why Do We Need Them?

Think of a section as a component. The settings we learned about are like the component's primary props (e.g., backgroundColor, title). Blocks, then, are like an array of objects passed as a prop, where each object represents an item in a list that the component needs to render. The merchant can add, remove, and reorder items in this array directly from the theme editor.

Blocks are essentially modules of content that can be repeated within a section.

The Shopify Partner Blog provides a clear definition of blocks and their purpose.

The key takeaway is that blocks provide granular control for repeatable content. This is precisely what's needed for features like image galleries, FAQs, testimonials, or feature lists.

2. Defining Blocks in the Section Schema

Just like section-level settings, blocks are defined within the {% schema %} tag. The schema includes a blocks property, which is an array of objects. Each object defines a type of block that a merchant can add.

A single section can have multiple types of blocks. For instance, a "Homepage Features" section might allow a merchant to add either a "Product Highlight" block or a "Collection Showcase" block, each with different settings.

Let's watch a detailed walkthrough of how to define blocks in a schema.

To summarize the key points from the video, here is a simple schema for an FAQ section. This example is very direct and shows the core structure:

{% schema %}
  {
    "name": "FAQ Section",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Section Heading",
        "default": "Frequently Asked Questions"
      }
    ],
    "blocks": [
      {
        "type": "faq_item",
        "name": "FAQ Item",
        "settings": [
          {
            "type": "text",
            "id": "question",
            "label": "Question"
          },
          {
            "type": "richtext",
            "id": "answer",
            "label": "Answer"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "FAQ Section"
      }
    ]
  }
{% endschema %}

In this schema:

• We have one block type called "faq_item".
• The name "FAQ Item" is what the merchant will see in the editor when they click "Add block".
• Each "FAQ Item" block has two settings: a text input for the question and a richtext input for the answer.

3. Rendering Blocks with Liquid

Once you've defined the blocks in your schema, you need to render them in your theme's Liquid code. Shopify makes the merchant-added blocks available to you through the section.blocks object, which is an array.

You can loop through this array to render each block.

{% for block in section.blocks %}
  <!-- Render the content for each block here -->
{% endfor %}

Inside the loop, you can access the settings for each individual block using block.settings.your_setting_id. If your section supports multiple block types, you'll need to use conditional logic to render them appropriately.

This next video segment demonstrates exactly how to do this.

Applying this to our FAQ example, the Liquid code would look like this:

<!-- Render the section heading from section settings -->
<h2>{{ section.settings.heading }}</h2>

<div class="faq-list">
  <!-- Loop through all the blocks the merchant has added -->
  {% for block in section.blocks %}
    <div class="faq-item">
      {%- comment -%}
        Check the block type. This is crucial if you have multiple
        block types in one section.
      {%- endcomment -%}
      {% if block.type == 'faq_item' %}
        <h3>{{ block.settings.question }}</h3>
        <div>{{ block.settings.answer }}</div>
      {% endif %}
    </div>
  {% endfor %}
</div>

{% for block in section.blocks %}
  {% if block.type == 'testimonial' %}
    <blockquote class="testimonial">
      <p>{{ block.settings.quote }}</p>
      <footer>— {{ block.settings.author }}</footer>
    </blockquote>
  {% endif %}
{% endfor %}

4. Improving the Merchant Experience

Just creating blocks is not enough; a professional developer ensures they are easy for the merchant to use.

Making Blocks Selectable in the Editor

When a merchant views their site in the theme editor, they should be able to click on a block in the preview to bring up its settings. This makes the editing process much more intuitive. To enable this, you need to add a special Liquid attribute to the wrapper element of each block.

{% for block in section.blocks %}
  <div class="faq-item" {{ block.shopify_attributes }}>
    ...
  </div>
{% endfor %}

The {{ block.shopify_attributes }} output adds the necessary data- attributes that the theme editor uses to connect the rendered HTML element to its corresponding block settings.

This short clip shows the difference this one line of code makes.

Limiting the Number of Blocks

Sometimes, you may want to limit how many blocks a merchant can add to prevent them from breaking the design or hurting site performance. You can do this at two levels:

1. Per Section: Use "max_blocks": 16 in the main section schema to set a total limit for all blocks in that section.
2. Per Block Type: Use "limit": 4 inside a specific block's definition to limit how many times that particular type of block can be added.

Conclusion

You've now added another powerful tool to your Shopify development arsenal. You understand that when a merchant needs a variable-length list of content, blocks are the answer.

Key Takeaways:

• Purpose: Blocks are for creating repeatable, reorderable modules of content within a section.
• Schema: They are defined in the blocks array within the section schema. Each block has a type, name, and its own settings.
• Rendering: You render blocks by looping through section.blocks in Liquid and using conditional logic based on block.type.
• Merchant Experience: Use {{ block.shopify_attributes }} to make blocks directly clickable in the theme editor preview, providing a seamless editing experience.

In the last two lessons, we've defined the structure of our sections and blocks. However, when a merchant adds a new section, it appears empty. They have to configure everything from scratch, which isn't ideal. How can we provide a beautiful, pre-configured starting point?

In our next lesson, we will address this by learning to create presets to provide default configurations for a section, which will bring our sections to life the moment a merchant adds them.