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?
"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" } ] }
]2 Answers
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 %}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:
