How to add a full width banner to a Page

Note: This feature is already included with Pipeline 4.3 and higher.

The Shopify Page editor doesn't have a featured image option to attach an image with Pages. Until Shopify adds this feature, we have the following method which you can use to add a homepage Image with text overlay section on a standard Shopify Page. 

This method requires to your create a custom template with a custom section. It's important to know that when you create this template and section combination, the image and settings are bound to that template. This works well for one Page. If you'd like to use a different image on a second page, another page template need to be created. 

How to:

1

Create a section file

Open your Code Editor:

Quick link if the theme is live/published:
Open Code Editor

Note: This tutorial works best for live published themes. When you create a new template, it won't appear as an option if created on a draft theme. 

Under the Sections folder, choose Add a new section:

Call the new section:

page-banner-1

Example:

Use the Create section button to complete.

Erase all the default code that generated:

Replace the default code with one of these options - Choose your version of Pipeline:

If you're unsure of your version:
What version of Pipeline am I using?

Pipeline 4.2, use this code:
Click to view code

Or

Pipeline 4.0 and Pipeline 4.1, use this code:
Click to view code

Or

Pipeline 2-3, use this code:
Click to view code

Save the file.

2

Create a new template

In the templates folder, choose Create Add a new template:

(1) Change the first drop-down to page:

(2) Call the template:

banner-1

Use the Create template button to complete.

At the top of the default code that's generated, added a reference to call the new section file you created:

Code to add above all other code:

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

Save the file.

Wide page format

If you're using a wide page format (less padding in the content area), then change line number 5

    <div class="grid__item large--two-thirds push--large--one-sixth">

Change to:

    <div class="grid__item one-whole">

Save the file.

3

Assign the template to your Shopify Page

You're now ready to use the template on a page. Find the page you'd like to have the banner image on in the Page editor:

https://shopify.com/admin/pages

Change the page template type to page.banner-1

On the left side, use the template drop-down and change from page to page.banner-1:

Save the page settings.

4

Use the Theme Editor to customize the banner

In the Theme Editor:

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

Browse to your page and now you'll be able to customize the banner image and settings.

The easiest method to find your page in the Theme Editor is to first add a link in your navigation or a link in the footer. The Theme Editor needs to view that page in order for the settings to appear.

Using this method on a second page

Once you've successfully created your first page.banner-1 template and section file, you can create a second or more for another page. 

Remember page.banner-1 will now have an image and settings assigned to it for your first page. If you use that template on another page, it will use the exact same image and settings. Changing the image will also change for any page using that template. 

For that reason, you'll want to create a new template and section file to have a unique image on another page. Follow the same steps again and just change the filenames and references. 

In Step 1, for the new section filename use:

page-banner-2

Use the same section code from the gist file, that does not need to change.

In Step 2, change the code to call the second section file instead:

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

In Step 3, you'll be selecting the page.banner-2 template.