Multiple issues with custom sections in JSON in Shopify

Question

For the first time, I am trying to make a custom section in my shopify page. But I have run into multiple errors.

Goal: create section of 2 hero images, horizontally positioner next to one another, with no madding. Each hero image has a button/call to action. When clicking left image the visitor is taken to the webshop. When clicking the right image the visitor is taken to a webpage.

Now: At this point in time I have created a custom-section in edit code > sections folder, and I have connected this to the index.liquid page. As a guideline, for myself the section has a header and text area (<h3> + <p>). Below there's two <img> tags wrapped in two divs (<div class="row"> + <div class="column">). These two divs serves the purpose of horizontally aligning the images.

When I enter the customization menu, with this piece of code. I am able to place a header and text on the page in realtime - but the images does not show up. However the images does show up in the customization menu, but they are never visible on actual page.

Instead there's two blank image spots in the button of the page, correctly positioned - but with no content. These image spots are completely unaffected no matter what I do in the customization menu.

I hope someone is able to help me.

I have uploaded some images, to give an idea of the desired result`enter image description here

also this is a current image of how the page looks

<h3> {{section.settings.heading}}</h3>
<p>{{section.settings.description}}</p>

      <div class="row">

        <div class="column">
         
            <img src="{{blocks.settings.image | img_url: 'master' }}"/>

        </div>
 
      <div class="column">

            <img src="{{blocks.settings.image | img_url:'master'}}"/>

      </div>

{% schema %}
 {
	"name": "icons with text above",
	"settings": [
					{	
						"type": "text",
						"label": "Your headline for the section",
						"id": "heading"
					},
					
					{
						"type": "richtext",
						"label": "Your description",
						"id": "image"
					}
				],

		"blocks":[
					{
						"type": "image",
						"name": "image block",
						"settings": [
									{
									"type":"image_picker",
									"label": "your image",
									"id": "image"
									}

						]
					}

					]

}
{% endschema %}

David Mc David Mc · Accepted Answer · 2020-04-27T10:39:32

The way you are trying to access the block settings is incorrect. You need to loop through the blocks in order to get the settings.

You can see a good example in the Shopify help docs:

{% for block in section.blocks %}
  <div class="grid-item" {{ block.shopify_attributes }}>
    {% case block.type %}
    {% when 'text' %}
      {{ block.settings.content }}
    {% when 'image' %}
      <img src="{{ block.settings.image | img_url }}">
    {% endcase %}
  </div>
{% endfor %}

You will only need to loop over the columns as this is where the images are.

The following code works for me:

<h3>{{ section.settings.heading }}</h3>
<p>{{ section.settings.description }}</p>

<div class="row">
  {% for block in section.blocks %}
  <div class="column">
    <img src="{{ block.settings.image | img_url: '1024x1024' }}" />
  </div>
  {% endfor %}
</div>

{% schema %}
{
  "name": "icons with text above",
  "settings": [
    {   
      "type": "text",
      "label": "Your headline for the section",
      "id": "heading"
    },

    {
      "type": "richtext",
      "label": "Your description",
      "id": "image"
    }
  ],
  "blocks": [
    {
      "type": "select",
      "name": "Add Button",
      "settings": [
        {
          "id": "image",
          "type": "image_picker",
            "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Icons with text above",
      "category": "Image",
      "blocks": [
        { 
          "type": "select"
        },
        {
          "type": "select"
        }
      ]
    }
  ]
}
{% endschema %}

Multiple issues with custom sections in JSON in Shopify

1 Answers