How to add a hero section to a Page

Tutorial level: Intermediate to Advanced. Requires basic code understanding.

In this article we will demonstrate how to bring a homepage section like the hero banner onto a page template

Homepage sections are located in the Sections folder in your code editor. To use a homepage section on a standard page, the best method is to create a new page template and and call in the section you'd like to include. I'll breakdown the steps below.

1

Create a new page template

The reason for creating a new page template is to assure that the homepage section you're adding isn't applied to all your pages. Unless you need a certain homepage section to appear on all your pages with the exact same content, then creating a new page template is the best approach. 

In the code editor under the Templates folder, choose Add a new template:

(1) Choose page for the template type 

(2) Call the template :

alternate-1

Use the Create template button to complete. 

The default code will look like:

2

Create a new section

When a section file is configured, the content and settings are attached to that section file. In order for our page to have unique content, we need to create a new file. Without creating a new section file, the exact same content and settings from the homepage would be appear on our page. If that's your goal, you won't need to create this section file. If you need unique or different testimonials from your homepage, then this step is required. 

Under the Sections folder, choose Add a new section:

Call the new section:

page-hero-1

Use the Create section button to complete. 

Delete all the default code that's generated:

Save the file:

We will replace that code with code from the section file we want to use. For the testimonials, the section file is called reviews.liquid. 

Refresh the code editor in your browser after the new section is created. Use the filter box to find files starting with review and you'll see the standard reviews.liquid file and the new one we created called reviews-page-1.liquid. 

We want to open the standard reviews.liquid file:

Copy all the code from that file:

Open the blank page-hero-1.liquid file:

Paste all the code into the blank file:

After pasting, towards the bottom - Find this line in the presets section:

Change the name to identify this section - Example "Page Hero 1":

Also change the category to "Pages".

Save the file:

3

Assign the new section file in the page template

Now that we have our new page template and section file created, we can connect them together. 

1 - Open our new page template which we created in Step 1 - page.alternate-1.liquid:

2 - Create a few blank lines before the main section code (line 3):

Add:

{% section 'page-hero-1' %}

Example:

That's the name of the section file we created in Step 2. 

Save the file:

4

Choose the new page template in the page editor

Now that we have a new page template which includes testimonials, we can assign that template to a page in the Shopify page editor.

Open the page you want to use the new template with or create a new page. On the right column under templates, choose the new template:

Important Note: If you're working from a draft theme, the templates will not appear. This is a Shopify restriction. You'll only be able to assign the new template if the theme is live/published. 

Save the file:

5

View the page in the Theme Editor

Open the Theme Editor - Customize:

In the Theme Editor, you will need to load the page you assigned the new template to in Step 4. Use the top menu drop-down:

Scroll down to the Pages section:

Choose your page. 

After you've loaded the page in the Theme Editor, you'll see the new testimonial section setting on the left sections column:

You can now configure your hero banner section. 

Optional - How to use the fullwidth page format for this custom template

In Step 1, we used a standard page template. If you need to use the page.fullwidth style template with your hero, then change the following code in page-alternate-1.liquid:

From the templates folder, open page-alternate-1.liquid:

Change this line:

To:

<section class="page page-fullwidth">

Example:

Save the file:

Example result:

Using this technique, you can add any of the homepage sections on to a page template. The key is to always create a custom section file. Remember, each file's content and settings are attached to that file. If you don't create custom section files, the same content and settings are shown when you call that section file. 

Unique content on other pages

Now that you've created a custom page template which you can use on a page, that content will always be associated with page-alternate-1.liquid. If you have a second page and use that same template, the exact same hero banner will be shown. If you change the hero image, it will also change for any other page using that template. For that reason, you will need to create additional templates if you need unique content. It's an important concept to understand as it's very different from the homepage.

To create a second template which allows you to use a different hero banner, follow the same steps again but change the filenames.

Example, in Step 1, create a new template called:

alternate-2

In Step 2, create a new section called:

page-hero-2

The rest of the steps are the same, copy the code from page-hero.liquid. Change the presets to be "Page Hero 2".

In Step 3, change the section reference to be the same name as the section file from Step 2:

{% section 'page-hero-2' %}

In Step 4, use the new template that you've created.

Follow the same concepts for each page that needs unique hero content. If you are using the same hero on multiple pages, you can choose that page template in the Page Editor.

Using other homepage sections like Slideshow or Video

Now that you know how to use a hero banner on the top of a standard page, you can easily follow the same steps and use a different homepage section on the top. If you'd like to use the Slideshow section or Background Video section instead of the Hero section, you can use the code from those section files in Step 2 and modify your file naming.

Example for Slideshow:

In Step 2, create a new section called:

page-slideshow-1

Copy the code from:

In Step 3, change the section reference to be the same name as the section file from Step 2:

{% section 'page-slideshow-1' %}

The only difference is you're using the code from index-slideshow.liquid instead of index-hero.liquid. 

Example for Video:

In Step 2, create a new section called:

page-video-1

Copy the code from one of the video files:

index-background-video.liquid is the version that plays the video in the background.

index-video.liquid is the version which uses a still image and the user clicks on the play button for the popup video. 

In Step 3, change the section reference to be the same name as the section file from Step 2:

{% section 'page-video-1' %}

Reference to homepage sections:

index-background-video.liquid = Background video
index-blog.liquid = Blogs
index-collections-list.liquid = Collection list
index-columns.liquid = Text columns with images
index-hero.liquid = Hero banner (used in this tutorial)
index-image-with-text.liquid = Two column image with text
index-instagram.liquid = Instagram feed
index-logo-list.liquid = Logo list
index-look.liquid = Shop the look
index-map.liquid = Location map
index-newsletter.liquid = Newsletter
index-product.liquid = Featured product
index-products.liquid = Featured collection
index-rich-text.liquid = Rich text
index-slideshow.liquid = Slideshow
index-text-row.liquid = Text row with icons
index-testimonials.liquid = Testimonials
index-video.liquid = Still image version with popup video

Use the code from any of these files to create a new section file with a custom filename. 

Adding a section to the bottom of your page

If you'd like to add a section like your Instagram feed or Newsletter to the bottom of your page. These sections will always use the same content as the homepage. For that reason, you can completely skip Step 2. Instead, in Step 3, add the section reference to the bottom of your page template (you can skip Step 1 if you want to add these to all your pages). 

Example of adding the Newsletter signup on all your pages:

{% section 'index-newsletter' %}

That would add the newsletter section to the bottom of all pages that use standard page template. Open page.fullwidth.liquid and add to the bottom of that to include the newsletter at the bottom of all pages using that template.