Add custom multi-image section in Shopify

Question

I'm trying to add a custom section in Shopify to allow the user to upload 2 promotional images. I'm a novice but I managed to create a custom section for 1 image but when I try it for two images in the same section the images won't display on the page after upload.

I found a few threads on here to get me to this point. See code below:

{{ section.settings.test_2 | img_url: 'medium' | img_tag }}
{{ section.settings.test_3 | img_url: 'medium' | img_tag }}

{% schema %}
  {
    "name": "PromoTwo",
    "blocks":[
      {
        "type": "block-1",
        "name": "Block 1",
        "settings": [
          {
            "type": "image_picker",
            "id": "test_2",
            "label": "Promo Image 1"
          }
        ]
      },
      {
        "type": "block-2",
        "name": "Block 2",
        "settings": [
          {
            "type": "image_picker",
            "id": "test_3",
            "label": "Promo Image 2"
          }
        ]
      }
    ],
  "presets": [
    {
      "name": "PromoTwo",
      "category": "Content"
    }
  ]
  }
{% endschema %}

My goal for this section is to create a section with two side by side images that the user will be able to upload themselves.

My suspicion is that I'm doing something wrong here:

{{ section.settings.test_2 | img_url: 'medium' | img_tag }}
{{ section.settings.test_3 | img_url: 'medium' | img_tag }}

Answer 1

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 %}

Answer 2

{% for block in section.blocks %}  
  <div class="image_box"> 
       {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
  </div>
 {% endfor %}



{% schema %}
  {
    "name": "multi image",
	"max_blocks": 4,
    "settings": [
		 {
      "type": "header",
      "content": "multi image"
    }  
	],
  "blocks": [
    {
      "type": "select",
      "name": "Add Button",
      "settings": [
        {
          "id": "image",
          "type": "image_picker",
       	  "label": "Add image"
        } 
      ]
    }
  ],
  "presets": [
    {
      "name": "multi image",
      "category": "text" 
    }
  ]
  }