Including blocks inside a block

batulkr
Excursionist
43 1 2

Hey everyone!

I have been trying to include some blocks inside a block( I am not really sure if it is possible or not though) but could not manage to do that. If it is possible to do, what am I doing wrong here?

Here is my code:

{% schema %}
  
  {
  	"name": "FAQ Heading",
  	"settings": [{
  			"type": "header",
  			"content": "Heading and Description"
  		},
  		{
  			"type": "text",
  			"label": "Title",
  			"id": "heading"
  		}
  	],
  	"blocks": [{
  		"type": "block-1",
  		"name": "Block 1",
  		"settings": [{
  				"type": "text",
  				"label": "Your Text Here ",
  				"id": "text"
  			},
  			{
  				"type": "url",
  				"label": "Your Link Here",
  				"id": "call-to-action"

  			}
  		],
  		"blocks": [{
  			"type": "block - 1 - 1 ",
  			"name": "Block alt",
  			"settings": [{
  				"type": "text",
  				"label": "youretx here",
  				"id": "text-f"
  			}]
  		}]
  	}]
  }
{% endschema %}
Replies 12 (12)

Mircea_Piturca
Shopify Partner
1547 44 345

You can not nest blocks but you can have more block types:

"blocks": [
  {
    "type": "block-1",
     "name": "Block 1",
     "settings": [...]
  },
  {
    "type": "block-2",
     "name": "Block 2",
     "settings": [...]
  }
]
Finally—Add variant descriptions to your products
batulkr
Excursionist
43 1 2

Hello @Mircea_Piturca, thanks for the answer. But this is not what I am looking for. I already know this. What I mean is that, let's say, including blocks inside a nestetd block. For example, there is block-1, right? I would like to include some other blocks inside that nested block "block-1". Is that possible? 

Mircea_Piturca
Shopify Partner
1547 44 345

No, block nesting is not possible.

Finally—Add variant descriptions to your products
unofficial2321
Shopify Partner
18 0 3

@Mircea_Piturca  how can i call the type-2 block?

Mircea_Piturca
Shopify Partner
1547 44 345

You can do a loop with a conditional:

{% for block in section.blocks %}
  {% if block.type == 'type-1' %}
    ...
  {% elsif  block.type == 'type-2'  %}
    ...
  {% endif %}
{% endfor %}

 

You can also do some cool things with map. Depends what you are looking for.

Finally—Add variant descriptions to your products
unofficial2321
Shopify Partner
18 0 3

you have used condition but i want to access both somthing like this

<section>
  <div>
    {% for block in section.blocks.image-1 %}
    <div>{{ block.image-1.settings.text }}</div>
    {% for block in section.blocks.image-2 %}
    <div>{{ block.image-2.settings.text }}</div>
    {%endfor%}
    {%endfor%}
  </div>
</section>
prettypetty
Shopify Partner
11 0 1

You can do this by calling out a forloop inside the block: 

 {%- assign loop = "1,2,3,4" | split: ',' -%}
    {% if loop.size > 0 %}
    {% for item in loop %}
    
    {% capture index %}{{ forloop.index }}{% endcapture %}
    {% comment %} Add number to id for each loop {% endcomment %}
    {% capture block_index %}block{{ index }}{% endcapture %}
    {% capture title_index %}block-title{{ index }}{% endcapture %}
    {% capture image_index %}block-image{{ index }}{% endcapture %}
    {% capture style_index %}block-style{{ index }}{% endcapture %}
     {% comment %} Content settings {% endcomment %}
     {%- assign url = block.settings[block_index] -%}
     {%- assign title = block.settings[title_index] -%}
     {%- assign image = block.settings[image_index] -%}
     {%- assign style = block.settings[style_index] -%}
     {% comment %} End content settings {% endcomment %}
    {% if url != blank %}
    {% if style == true %}
    <a href="{{url}}">
        <div class="promo-block_header bottom-style-{{style}}" 
        {% if image != blank %} style="background-image:url({{ image | img_url: '420x' }})"{% endif %}>
        <div class="promo-block_top">
            <p class="promo-block_top-sub">Shop</p>
            <p class="promo-block_top-title">{{title}}</p></div>
        <p class="promo-block_title">See all {{title}}</p>
        </div>
</a>
    {% else %}
     <a href="{{url}}">
        <div class="promo-block_header" 
        {% if image != blank %} style="background-image:url({{ image | img_url: '420x' }})"{% endif %}>
        <p class="promo-block_title">{{title}}</p>
        </div>
</a>
{% endif %}
{% endif %}
    {% endfor %}
    {% endif %}
Shopify partner since 2017
Liquid lover
liquiduser14
Visitor
1 0 0

Is it possible to create draggable items in a module within block. I know blocks within blocks is not possible. Is there any other solution to achieve the same effect. 

We can achieve this homepage easily by adding blocks in section file. How to achieve the same for inner pages.

prettypetty
Shopify Partner
11 0 1

You can't currently drag inside of a block but you could add a dropdown where there are different layout styles for the contents in the block that change the css, snippet, etc based on selection.

Shopify partner since 2017
Liquid lover

macin
Shopify Partner
6 0 7

Come on @Shopify do something about block nesting, it's the end of 2022 - every respectable CMS has this functionality.

macin
Shopify Partner
6 0 7

Come on @Shopify do something about block nesting, it's the end of 2023 - every respectable CMS has this functionality.

ChrisMerlin
Shopify Partner
6 0 0

They will never allow it due to simplicity. People like the simplicity of "Customize" for their themes.
Nesting may just add frustration, confusion, more support requests, etc.