Nested Sections!

Highlighted
Shopify Expert
71 0 38

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

Highlighted
Shopify Expert
71 0 38

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

 

Highlighted
Shopify Expert
2684 67 841

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 tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Shopify Partner
1 0 0

HI Jonathan

Please give me also the Json of schema of sections

0 Likes
Highlighted
Shopify Partner
32 0 0

Nice workaround! 

0 Likes
Highlighted
Shopify Partner
12 0 4
{% 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

Highlighted

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 :)

 

C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: 5euros.com/profil/maxdesign
0 Likes
Highlighted
New Member
3 0 0
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"' %}
 
0 Likes
Highlighted

@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

C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: 5euros.com/profil/maxdesign
0 Likes
Highlighted
New Member
3 0 0

Thanks Buddy! it was really helpful!

0 Likes