How to include the code of a section into another section

Highlighted
New Member
3 0 1

Hi, 

I'd like to include the entire code of a "parent"-section into multiple "child"-sections. The goal is to create a master section, which controls the styling, structure etc. of multiple sections on other pages. So if I change the styling of the parent section, all its child sections will change as well without having to share the same content. 

For example:

"Parent"-section:

master-hero.liquid (entire section code with styling, …)

"Child"-sections: 

hero01.liquid (include entire code of master-hero),

hero02.liquid (include entire code of master-hero)

hero03.liquid (include entire code of master-hero),

 

My first idea was to use "include". 

{% include 'master-hero' %}

 

Thank you in advance.

 

Greetings

Marius

 

0 Likes
Highlighted
Shopify Partner
141 23 40

Hi @Marius_vo,

You cannot use the include tag for sections, you need to use a {% section ' your-section-name' %} tag. Include works for snippets (also it will become deprecated in the future, so it's probably best to use {% render 'your-snippet-name' %} instead). What's more, you cannot have sections within sections. You need to create a template if you want to include several different sections. 

I'm not 100% certain what you're trying to achieve with parent/child sections, but it probably can be done by using templates and sections. You can also use liquid to load different sections inside a template depending on a specific condition (eg. load hero1 section in collection A, and hero2 section in collection B). If you are referring to the styling in terms of CSS, then whenever you make changes to one section, it can change throughout, if you're employing the same classes. 

Panos Voulgaris
Creative director / Partner @ MALVI
Founder @ function( )
0 Likes
Highlighted
New Member
3 0 1

Hi @pvoulg

 

thank you for your reply and help. I try to describe the problem I want to solve: 

 

Let's say I have a section called "headline-with-pic". Now I want to place this section on two different pages (not on the home page). What I will create: 

2 new pages: "Landingpage-A" & "Landingpage-B"

2 new templates: "page.lp-A" & "page.lp-B"

2 new sections: "headline-with-pic_lp-A" & "headline-with-pic_lp-B" (I need to create two sections with a different name, otherwise they will show the same content on both landingpages)

Now I would copy&paste the identical code in both sections. My problem-> If I want change the overall appearance of the "headline-with-pic"-section, I have to change the code in both sections. Therefore I'd like to create a master section "headline-with-pic_master" and include the code of the master section in "headline-with-pic_lp-A" & "headline-with-pic_lp-B"

 

Thank you in advance. 

 

Greetings

Marius

0 Likes
Highlighted
Shopify Partner
141 23 40

Since you cannot include sections within sections, one usual way of accomplishing that would be the following: create a single section with blocks to use inside both pages, which share the same template.

You can have a page handle field inside each block and add the rest of your content there (headline, texts, image). Then you can loop through the blocks inside your page and render the one that matches the current handle.

Panos Voulgaris
Creative director / Partner @ MALVI
Founder @ function( )
0 Likes