Nested Sections!

[JAS_Technology]

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 %}

{{collection_template_content}}

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.... 

[JAS_Technology]

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"' %}

[tim]

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.

[Mehul_Tech]

HI Jonathan

Please give me also the Json of schema of sections

[khedaywi]

Nice workaround! 

[RustyDev]

{% 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

[MaxDesign]

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 "page.contact.liquid" 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 :

%%faq-tabs%%

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

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

[asad16]

but i am still getting this error!

Liquid error (line 2): Cannot render sections inside sections

{% capture video_1 %}
{% section 'video' %}
{% endcapture %}
{% assign vid = video_1 | replace: 'class="shopify-section"', 'class="shopify-section-nested"' %}

[MaxDesign]

@asad16 Some information is lacking in your code.

Say you have a section "random-section", and you want to insert inside it a section named "video".
In your case, you should go for something like this (beware, this code goes inside a template file, not inside a section file😞 

{% capture video_1 %}{% section 'video' %}{% endcapture %}
{% assign vid = video_1 | replace: 'class="shopify-section"', 'class="shopify-section-nested"' %}

{% capture random_section %}{% section 'random-section' %}{% endcapture %}
{% assign random_section = random_section | replace: "%%insert-video-section%%", vid %}

{{ random_section }}

And then you include inside your "random-section" :

%%insert-video-section%%

 
Hope it makes sense,
Cheers

[asad16]

Thanks Buddy! it was really helpful!

[asad16]

@MaxDesign 

---

@MaxDesign wrote:

@asad16 Some information is lacking in your code.

Say you have a section "random-section", and you want to insert inside it a section named "video".
In your case, you should go for something like this (beware, this code goes inside a template file, not inside a section file😞 

{% capture video_1 %}{% section 'video' %}{% endcapture %}
{% assign vid = video_1 | replace: 'class="shopify-section"', 'class="shopify-section-nested"' %}

{% capture random_section %}{% section 'random-section' %}{% endcapture %}
{% assign random_section = random_section | replace: "%%insert-video-section%%", vid %}

{{ random_section }}

And then you include inside your "random-section" :

%%insert-video-section%%

 
Hope it makes sense,
Cheers

---

but can you explain (how to/where to) add  %%insert-video-section%%

in my randon section

[MaxDesign]

but can you explain (how to/where to) add  %%insert-video-section%%

in my randon section

Just paste

%%insert-video-section%%

where you want the section to be, it's up to you where you need the section to appear in your other section. I presume you have knowledge in html/css, (and eventually liquid) if you want to do this by your way with little issues, else you might need to reach out to someone with more expertise.

I can't explain better here, maybe someone else would.
Best of luck,
Max 

[Leysam]

Brilliant idea. I tried this using blocks.  I've been finding a solution for a nested block for years but no luck, until I read about this yesterday.

The Idea is the same as what is posted here... but instead of adding the text

%%section-replacer%%

directly to the section file I added it using blocks and condition. This way you can sort the position of the nested section in the page

{% for block in section.blocks %}
    {% case block.type %}
        {% when 'your-gallery' %}
            <!-- hack that shit-->
            %%YOUR-GALLERY%%

        {% else %}
            Normal blocks code....
    {% endcase %}
 {% endfor %}

Here are the results in admin 😉

We add the nested section using block

This way we can sort the position of the nested section along with the blocks. 

[MaxDesign]

Hi everyone,

My question is a bit more advanced. How would you use this "hack" on the home page? I need to do this with a section that can only be loaded through presets, so it's a dynamic section that is not fetched from a template file, it is only in a section file.

I'm thinking about it and I don't see a clear (nor clean) way trough.

Thank you hips,
Max

[Codeblade]

---

@JAS_Technology wrote:

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.... 

---

I found a solution to this issue.

It looks like Shopify Editor creates a wrapper div for sections like this:

<div id="shopify-section" class="shopify-section" data-theme-editor-section="{&quot;id&quot;:&quot;section&quot;,&quot;type&quot;:&quot;section&quot;,&quot;disabled&quot;:false}"></div>

data-theme-editor-section - throws an error on the backend for nested sections. So to resolve this I simply modified the code like this:

{% assign sidebar_content1 = sidebar_content1 | replace: 'data-theme-editor-section="{"id":"sidebar_content1","type":"sidebar_content1","disabled":false}"', '' %}

To find the correct string for data-theme-editor-section, right-click view source on the customization page, and you'll find the attribute added within the HTML. I hope this helps someone out.

[igar]

First of all thank very much for this information, it was very necessary

How can I do it with 3 section? 

For example, I have this code that I use your code and I have the section "newsletter" inside of section "list-collection-template": 

{% capture section3 %}{% section 'newsletter' %}{% endcapture %}
{% assign sect = section3 | replace: 'class="shopify-section"', 'class="shopify-section-nested"' %}

{% capture collection3 %}{% section 'list-collection-template' %}{% endcapture %}
{% assign collection3 = collection3 | replace: "%%insert-newsletter-section%%", sect2 %}

{{ collection3 }}

In template of list-collection-template I call --> %%insert-newsletter-section%%

Until here all right but when I want to add this "double section" in other section for example, I want add inside of the section "collection-template", the section "list-collection-template" but I cant, we will have a error. 

{% capture section2 %}{% section 'list-collections-template' %}{% endcapture %}
{% assign sect = section2 | replace: 'class="shopify-section"', 'class="shopify-section-nested"' %}

{% capture collection2 %}{% section 'collection-template' %}{% endcapture %}
{% assign collection2 = collection2 | replace: "%%insert-list-collections-template-section%%", sect %}

{{ collection2 }}

Any answer for this problem??

Thanks, 

Igar.

[MaxDesign]

Hi @igar 

There is a mistake in your first code because "sect2" refers to nothing.

Your second code seems fine. Juste make sure you have this code in the template file that calls {% section 'collection-template' %}. So you have to replace {% section 'collection-template' %} with your last piece of code, and inside {% section 'collection-template' %}, you insert "%%insert-list-collections-template-section%%" (without  quotation).

Also with the newer editor we got last month, you may have to do this in order to avoid the html error message :

{% assign sect = section2 | replace: 'data-shopify-editor-section', '' %}

instead of :

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

but I'm not sure if there are consequences removing this attribute. I have not experienced any issue personnally. 

[igar]

This is how I tried and it shows the Newsletter in the section "list-collections-template".

But not in the second call in section "collection-template"

[milosdjoric]

Hi, did you found out what is problem in second example?

[csmits]

Hi, I'm using this technique to use a section in other sections/pages.
I'm wondering if anyone has a solution to the following issue:

When I {% capture %} the section I want to nest into another, the section doesn't appear in the theme customizer so its settings cannot be adjusted.
So I have to call the to-be-nested section with the {% section 'to-be-nested-section' %} tag.

This causes the section to render on the page, even when you hide it with css by wrapping the {% section %} with a <div style="display:none"></div> tag, ofcourse.

Depending on the size of the to-be-nested-section, this could be a problem. The to-be-nested-section is rendered at least twice on the page. Is there any way to prevent the first call to {% section %} to actually rendering the liquid in it, except the {% schema %} tag of course?

Hopefully someone understands my problem and can help me!