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. 

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

1

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:
https://myshopify.com/admin/themes/current

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

Step 1 - Choose the file:

On the left, click on the filename index-banner-image.liquid

Step 2 - Copy all the code: 

On the right code area, 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) 

Step 3 - Create a new section:

In the Sections folder, choose Add a new section:

Call it :

page-banner-image

Step 4 - Erase all the default code that generated:

Step 5 - Replace code:

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)

Step 6 - Modify the category value:

At the very bottom of the file, change the category value from "Image" to "Custom"

Example:

Change to:

Save after your changes.

2

Create a new page template

Step 1 - Create a new template:

Still in the Theme code editor, from the Templates folder, choose "Add a new template":


Choose (1)  page in the first drop-down and call it (2) banner like below: 

Use the Create template button to complete.

Step 2 - Change the code:

In the code area, add the following line of code to Line 1 (make a blank line first then paste this to Line 1):

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


Example: 

Save the file. 

3

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:

https://myshopify.com/admin/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.

If you try to use the View page option at this point, you'll likely see:

Or

If you're seeing those messages it's because the page still needs the settings for the section to be configured. Follow the next step for that. 

Note: Your new template will only appear here if you're working with a published theme. Unfortunately, if you are working out of another theme or a draft theme, Shopify won't show as available in the drop-down. For that reason, create your custom template and section files in your live published theme. 

4

Configure the page section settings

Open the Theme Editor - Customize theme: 

https://myshopify.com/admin/themes/current/editor

Important - You'll need to navigate to your page that has the custom template in the Theme Editor in order to configure the section settings. One suggestion is add a temporary link to that page in your navigation or elsewhere so you can find the page in the Theme Editor. 

Navigate 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 - I've added a link in my navigation to that page:

Customize the banner and you're ready to go!


Single use template

If you apply this page template on multiple pages - The same image and settings will be applied. If you change it on one page, it will change all of them. That's the biggest restriction with these modules. For multiple banner options, you'll need to create additional templates and sections, basically repeat the above steps and use different names.

Example:

About page uses: Template page.banner, Section file: page-banner-image

Lookbook page uses: Template page.banner-2, Section file: page-banner-image-2

FAQ page uses: Template page.banner-3, Section file: page-banner-image-3

If you create three different templates with three different sections files linked, then you can have three different pages with unique page banner settings/images. 


Other homepage section types

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-map.liquid Map - New in Pipeline 4 page-map
index-newsletter.liquid Newsletter - New in Pipeline 4 page-newsletter
index-richtext.liquid Rich text - New in Pipeline 4 page-richtext
index-instagram.liquid Instagram feed index-instagram - See note below
index-logos.liquid Logo list index-logos - See note below

Instagram

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


Logos

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