Add custom multi-image section in Shopify

You are trying to build something that is already present with the proper tools but the wrong way.

Sections

The main idea of a section is to provide an interactive way for the admin to update the content for a specific element.

A section has two ways to achieve this:

• using the section settings
• using the section blocks

Difference between section settings and blocks

The section settings are static fields that can be populated via the customize panel. Static in the sense that you can’t dynamically add more without writing additional code.

On another hand blocks are the same as sections settings but they can by dynamic or you can add multiply blocks without writing additional code for each new one.

You can use both in the same section file if you like but you need to learn how to call them properly.

Syntax difference

Here is how a section settings looks like:

{% schema %}
  {
    "name": "Slideshow",
    "settings": [
      {
        "id": "slide_image",
        "type": "image_picker",
        "label": "Image"
      }
    ]
  }
{% endschema %}

An here is how you call it:

{{ section.settings.slide_image | img_url: '1024x' | img_tag }}

Section is the main object and after that you pass the JSON objects, so it becomes section.settings.slide_image.

Here is how a block syntax looks:

{% schema %}
  {
    "blocks": [
      {
        "type": "slide",
        "name": "Slide",
        "settings": [
          {
            "id": "slide_image",
            "type": "image_picker",
            "label": "Image"
          }
        ]
      }
    ]
  }
{% endschema %}

And here is the proper way to call it:

{% for block in section.blocks %}
  {{ block.settings.slide_image | img_url: '1024x' | img_tag }}
{% endfor %}

What’s wrong with your code?

1) You are using section blocks but you are calling the section settings.

2) You are creating multiply block types with the same image field – there is no point to this.

3) Don’t use img_url: 'medium' this deprecated. Use numbers instead. For example img_url: '1024x'.

How should your code look like

Here is how should your code look like:

{% for block in section.blocks %}
  {{ block.settings.promo_image | img_url: '1024x' | img_tag }}
{% endfor %}

{% schema %}
{
    "name": "Promo",
    "blocks": [
      {
        "type": "promo",
        "name": "Puote",
        "settings": [
          {
            "id": "promo_image",
            "type": "image_picker",
            "label": "Promo image"
          }
        ]
      }
    ],
    "presets": [
        {
        "name": "PromoTwo",
        "category": "Content"
        }
    ]
}
{% endschema %}