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://shopify.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://shopify.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://shopify.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:

Logos

If you're adding the logos section to a page and using the same logos 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 bottom of the new template you've created:

{% section 'index-logos' %}