Shopify Question posted in
The Shopify help center can be found here.

Is there a way to have multiple Block types in a Shopify section?

In a Shopify section I have an image picker block to make a gallery, and in the same section I have a url block to make any number of buttons.

The problem is both block types appear in the same ‘Content’ area of the theme editor. This makes it look quite confusing for an editor.

Is there a way to have 2 separate blocks areas, one for the image gallery and the other for buttons?

enter image description here

"blocks": [
  {
    "type": "button",
    "name": "Button",
    "settings": [
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      }
    ]
  },
  {
    "type": "image",
    "name": "Image slide",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      }
    ]
  }
]
Tags:

2

Answers


  1. 0

    No, at current there is no way to tell Shopify to display blocks in this way. All blocks can be arranged to be in any order, regardless of what the ‘type’ of each block is. Whoever is administering the store would need to manually arrange the blocks into a sensible order.

    If you want to make it easier to split up your block types during the rendering of the items, you can use something like this:

    {% assign image_blocks = section.blocks | where: 'type', 'image' %}
{% for block in image_blocks %}
  <!-- Stuff -->
{% endfor %}

{% assign button_blocks = section.blocks | where: 'type', 'button' %}
{% for block in button_blocks %}
  <!-- Stuff -->
{% endfor %}
    Login or Signup to reply.
  2. 0

    Create 2 different sections and include both .e.g: 

    {% section 'buttons' %}

{% section 'images' %}

    Where:

    sections/buttons.liquid

    {% schema %}
  {
    "name": "Buttons",
    "class": "buttons-section",
    "blocks": [
      {
        "type": "button",
        "name": "Button",
        "settings": [
          {
            "type": "URL",
            "id": "button_link",
            "label": "Button link"
          }
        ]
      }
    ]
  }
{% endschema %}

    sections/images.liquid

    {% schema %}
  {
    "name": "Images",
    "class": "images-section",
    "blocks": [
      {
        "type": "image",
        "name": "Image slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          }
        ]
      }
    ]
  }
{% endschema %}

    So you’ll get this:

    Two sections included example

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search