How to access Theme Blocks settings in Parent Section?

Online Store and Theme Development
,
1

Hey there !
I’m trying to fetch Theme Block settings in parent section.
I’m using standart for loop: {% for block in section.blocks %}, but I can only access block.type, while I need to be able to get more Block specific settings, e.g block.settings.button_url .
Did anyone find any workarounds already ?

Thanks in advance !

2

Hey - I don’t think this is possible. What would be your use case to get access to a blocks setting values in a parent section?

3

Hey Liam !
I need it to create a dynamic progress bar on top of the section, where each block - is 1 item of my progress bar, where I need to store a block.settings.step_handle setting in the data-attributes to use it in JavaScript further

4

Hi Liam,

I also want to emphasize the need to access theme block settings from the parent section or block.

This capability is particularly useful for building common UI components, like tab navigations, directly within the section’s Liquid. For instance, to generate tab buttons, we’d ideally iterate over section.blocks and use a setting from each block (e.g., block.settings.tab_name) for the button’s label.

Here’s a minimal example of what we’re trying to achieve:

<div class="tabs">
  <div class="tabs__header">
    <div
      class="tabs__list"
      role="tablist"
    >
      {%- for block in section.blocks -%}
        <button class="tabs__button" {{ block.shopify_attributes }}>
           {{ block.settings.tab_name }} {% comment %} <- Crucial part {% endcomment %}
        </button>
      {%- endfor -%}
    </div>
  </div>

  <div class="tabs_panels">
    {% content_for 'blocks' %}
  </div>
</div>

Enabling this would significantly simplify the creation of such UIs directly in Liquid and reduce the reliance on JavaScript for these common patterns.

Thanks for considering this.

5

I found this post after running into the exact same tabs scenario as @Matt_Kaminski - sometimes you need to loop over the child blocks within the parent to build a UI.
{% content_for 'blocks' %} should output blocks automatically for you, but you should also be able to access them directly just like section blocks.

6

​​​​​​​​Any updates here?

7

The inability to access block settings and nested blocks from a parent section or block is no bueno, Shopify. Also, not being able to pass variables to content_for ‘blocks’ is also very uncool.

8

Great news, I found a way around this and it works really well, so I’m posting it here for anyone who runs into the same problem.

The idea involves display: grid on the parent, display: contents on the block wrapper, and grid column and row placement on the elements inside.

Let’s take the tabs I mentioned earlier. They can be solved by having each block render its own button and its own panel, instead of the parent building the nav out of each block’s title:

{% comment %} blocks/tab.liquid {% endcomment %}

<div class="tab-pair" {{ block.shopify_attributes }}>

  <button class="tab-button" aria-controls="panel-{{ block.id }}">
      {{ block.settings.title | escape }}
  </button>
    
  <div class="tab-panel" id="panel-{{ block.id }}">
      {% content_for 'blocks' %}
  </div>

</div>

The parent still reads nothing, only renders the blocks:

<div class="tabs">
  {% content_for 'blocks' %}
</div>

This outputs button, panel, button, panel, which is not the layout we want. display: contents on the wrapper removes its box from the page, so every button and every panel becomes a direct child of .tabs. Grid placement on the parent can then put them wherever we want, regardless of the order they were written in:

.tabs {
  display: grid;
  grid-template-columns: auto 1fr;   /* nav column, then content */
}

.tab-pair { display: contents; }

.tab-button { grid-column: 1; }               /* buttons go down the left */

.tab-panel  { grid-column: 2; grid-row: 1; }  /* panels all share one cell */

Every button lands in the left column, every panel in the same cell on the right, and no setting has to travel up to the parent.

The panels sharing one cell also means it is as tall as the tallest panel, so switching tabs doesn’t shift the page. Hide the inactive ones with visibility: hidden rather than display: none, or they stop taking up space and you lose that.

@Allan_Emerson @jakeshw @haroldao Hope that’s clear. Happy to explain any part of it in more detail if anyone needs help.

9

Im building a multi step mini quiz builder using theme blocks and i want an “answers” block that has multiple “answer” blocks to pass down some top level settings for example a checkbox to inform the child blocks whether they should render a radio or checkbox input setting. its annoying to have to do this at the bottom block level when they can all inherit common settings instead.

I can’t even group these questions together because they have no access to parent ids :frowning: