Tutorial: Add a homepage section into a standard page template

If you find the page templates very basic, there is a method to add a Pipeline homepage section into a regular page template. There are quite a few steps here so we'll show you how to add one section to a new page template. 

In this tutorial, we will be creating a homepage-style banner image section so that it can be used in a new page template.


Copy the homepage banner image and create a new section

From the Shopify admin dashboard you will want to edit the code of your theme.

Open your code editor:

 In the left search type in "index-ban" to filter and find the index-banner-image.liquid file - This should be under the "Sections" folder: 

Copy all the code:

On the left, click on the filename index-banner-image.liquid. Now on the right, select all the code (Command-A on Mac or Control-A on Windows) 

After selecting all the code, copy to your clipboard (Command-C on Mac or Control-C on Windows)

After you've copied all the code,
Create a new section (you must be under the folder  Sections - very important):
Choose the Add a new section link:

Call it page-banner-image

Replace all the default code on the right

Select all the default code and overwrite it with your clipboard - Paste (Commad-V on Mac or Control-V on Windows). 

(the new file page-banner-image.liquid should have all the same code as the index-banner-image.liquid)

Save the file.


Create a new page template

Still in the Theme code editor, create a new page template (you must be in the folder  Templates, very important):
In the folder Templates, choose the Add a new template link:


Choose page in the first drop-down and call it banner like below: 

Then, at the very top of the right side code, add the following line of code to Line 1 (make a blank line first then paste this to Line 1):

{% section 'page-banner-image' %}


Save the file. 


Modify the section name

Open your new page-banner-image.liquid file (click this link):


Almost at the very bottom of the file, change the name in double-quotes Image with text overlay to Page banner (don't erase anything else, especially the comma after)

Change to:

Save after your changes.


Select the banner template on a page

We're ready to use the new page.banner template on an existing page. Open your Admin console to manage pages:


Choose a page you'd like to add the banner feature to. On the right side, you'll be able to choose a page template, use the drop-down to select page.banner.

Save your page.

Now, use the Theme Editor - Customize theme: 


beb5141fb42bbf46425dd9ad42ffa90a.pngNavigate to the page with the new template within the Theme Editor:
The left sections options will change, you should see the Banner option there to configure.

If you're not seeing the above options, then watch this quick video to demonstrate how the left sections change after you navigate to your Page in the Theme Editor:

Customize the banner and you're ready to go!

This page template will show the same image and settings if you try and using it on multiple pages. If you change it on one page, it will change all of them. That's the biggest restriction with these modules. If you want multiple banner options, you'll need to create additional templates and sections, basically repeat the above steps and use different names.

Other types of homepage sections

You can apply the same concept and add other homepage features to a page template. Here are some other homepage section names that you can use by following Step 1. You'll still be coping the code from the section and making a new section in the Sections folder and pasting that code in.
Here are the other common section names you can use:

Homepage section Section type New page name
index-banner-image.liquid Banner (used in this tutorial) page-banner-image
index-slideshow.liquid Slideshow page-slideshow
index-video.liquid Video page-video
index-collection.liquid Featured collection page-collection
index-collection-grid.liquid Collection list page-collection-grid
index-columns.liquid Text columns with images page-columns
index-double.liquid Image and text page-double
index-page.liquid Rich text and page page-text
index-logos.liquid Logo list index-logos - See note below
index-instagram.liquid Instagram feed index-instagram - See note below

Adding your Instagram feed to a page

If you're adding the Instagram feed to a page and using the same Instagram account as your homepage, you don't have to create a new section in Step 1. Simply go to Step 2 and use this code at the very top of the new template you've created:

{% section 'index-instagram' %}

You can also skip Step 3 for Instagram.
If you want the Instagram feed at the bottom of the page, then add it lower on the page template:

In the above example, I've added both the page-banner-image and the index-instagram sections to this page template. That is possible but not necessary. 

If you want to display a completely different Instagram feed (images from another account/token), then follow the normal steps 1-4 and call the section "page-instagram". If you're using the same feed, then only skip steps 1 and 3 and use "index-instagram".


The same concept as adding your Instagram feed applies with Logos. You can add them to the bottom of a page with this code:

{% section 'index-logos' %}

Still need help? Contact Us Contact Us