Advanced: How to stack homepage sections in a template

If you need more than one homepage element on a custom page, you can stack sections in your template file.

Example, this is a Page in Pipeline and not the homepage. The merchant has stacked homepage banner sections to provide a lookbook type effect:

Here's an example of stacking sections in code using three different section types - Page template:

Build the Sections first by using the same technique in the tutorial. There's a blue reference grid at the bottom of the tutorial to help you find the code from other homepage sections. Once you've created the new sections, then use the stacking concept for the template page (above). 

Advanced tip:

Since the actual page content can not be split up - This is all one block of content:

You can use an alternate method by using Rich Text sections for your content. Create multiple sections to use and then insert them between other custom sections you've created.

In your template file, you can actually remove the original Page code. Instead, build one or two page-text section files (Rich Text section - original code is in index-page.liquid). Then, you can use the Page block of the Rich text section to pull-in another page into this page. That's how you can have rich homepage elements sandwiching text/page content. Here's an example of what your template can look like:

When doing this, be sure to create unique section files for each instance. 

Example

If you are stacking 8 Image and text section modules:

You'll need to create 8 individual section files:

The code will be the same for all the files (copied from index-double.liquid) but all 8 files must be created in order for the stacked sections to work.