Nested Sections!

Shopify Expert
60 0 24

Hi fellow Shopify geeks. So I set out to build a way to have a configurable sidebar section, with blocks, defined WITHIN a collection section. That doesn't work right? But wait, maybe it can. Curious about people's thoughts on this technique. I've simplified the code a bunch to demonstrate what I'm doing but the idea is that the main section has a token in its content (e.g. "%%SIDEBAR-1%%"), which then gets replaced with the full content of another section. Here is my code of /templates/collection.liquid

{% capture sidebar_content_1 %}{% section 'sidebar-1' %}{% endcapture %}
{% capture sidebar_content_2 %}{% section 'sidebar-2' %}{% endcapture %}

{% capture collection_template_content %}
    {% section 'collection' %}
{% endcapture %}

{% assign collection_template_content = collection_template_content | replace: "%%SIDEBAR-1%%", sidebar_content_1 %}
{% assign collection_template_content = collection_template_content | replace: "%%SIDEBAR-2%%", sidebar_content_2 %}


The front end of the site loads perfectly and the theme editor loads with the ability to configure both sections with their own set of settings and blocks. Magic! 

The only issue I'm seeing is that the theme editor "thinks" there is an HTML syntax error somehwere even though I validated the HTML and all is good. I'm pushing forward with this but I would love to hear thoughts and see if somebody can think about why the theme editor has this error. I'm thinking it's eyes are just crossed.... 

Shopify Expert
60 0 24

Ok. Found a way around this! Added this code after nested sections captures:

{% assign sidebar_content1 = sidebar_content1 | replace: 'class="shopify-section"', 'class="shopify-section-nested"' %}
{% assign sidebar_content2 = sidebar_content2 | replace: 'class="shopify-section"', 'class="shopify-section-nested"' %}


1 Like
Shopify Partner
2536 31 562

Nice trick Jonathan!

From the point of view of the theme Customizer they are not nested, but rather one after another, but it's a clever idea to "inject" the rendered result of one section into another.

Want to hire me to tweak a theme? Mail me at! My post solved your problem? This is my Paypal too :)
Shopify Partner
1 0 0

HI Jonathan

Please give me also the Json of schema of sections

Shopify Partner
32 0 0

Nice workaround! 

Shopify Partner
12 0 2
{% assign sidebar_content_1 = sidebar_content_1 | replace: 'class="shopify-section"', 'class="shopify-section-nested"' %}

Just a heads up, the corrected code above is missing a "_" : sidebar_content_1

1 Like

This is gold! Thank you for taking the time to share, 2 years later it's still useful!

I wonder if there is any cons doing this, else this could be in the documentation, this is a must-have feature and can be very handy in a few situations.

In my case I built a FAQ section and needed to insert it inside (not after) a contact page section. With some liquid and javascript workarounds I can tweak the layout and make my FAQ section look the way I want it inside the contact page.

I had a few trials before making this work, here's my code if some people are looking for more examples (inside "" template):

{% capture faq-page %}{% section 'faq-tabs' %}{% endcapture %}
{% assign faq-page = faq-page | replace: 'class="shopify-section"', 'class="shopify-section-nested"' %}

{% capture contact-us-content %}
    {% section 'contact-us' %}
{% endcapture %}

{% assign contact-us-content = contact-us-content | replace: "%%faq-tabs%%", faq-page %}

{{ contact-us-content }}

And then I included :



 inside my "contact-us.liquid" section file.

It was already well explained but it's always better with more examples.
Cheers :)


C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: