Parallax 3.0+, Retina 4.2.1+, Mobilia 5.2.1+ and Turbo 2.0+ come with a page.banner template, which allows you to display a full width banner on your pages. If you're using a previous version of one of these themes and would like to use the page.banner template, take a look at this article about updating your theme.
In order to use the 'page.banner' template, the theme will need to be published! The templates from which you can select are limited to the templates available in your currently published theme.
If you are unable to currently publish your theme and would still like to set up the ‘page.banner' template, we have instructions on how to access unpublished templates here.
What's a page with a banner look like? Check this out.
In This Article
How to use the Page.Banner Template
Go to your Pages.
Click into a pre-existing page or create a new page that you want to display a full width banner.
Choose the page.banner template for this page in the Template suffix:
Save.
Before moving on, it's important to make sure this page is going to be viewable in the shop preview.
One way to do this is to add it to your Main menu or Footer menu. This would be done in your Navigation area.
Once you have given your page a home somewhere in your shop go to the Customize theme area.
Online Store > Themes > Customize Theme
In the shop preview, click on the page you set to use the page.banner.
The Sections area will update to show the 'Banner' tab.
Click the Banner tab to upload your banner image:
Hurray!
Unique Banners for Different Pages
You can give certain pages unique banners but it will take a bit of work:
Go to the template files: Online Store > Themes > [Actions] > Edit HTML/CSS > Templates > page.banner.liquid
Copy all of the content of this template
Then create a new template by clicking 'Add a new template' and be sure to make it of the 'page' variety and call it 'banner2'.
This will create a new template: 'page.banner2.liquid'.
Remove all the content that is populated into this new template and paste all the content you copied from page.banner.liquid
The code you just pasted will look like this:
{% comment %}
The contents of the page.banner.liquid template can be found in /sections/page-banner-template.liquid
{% endcomment %}
{% section 'page-banner-template' %}
Let's add a '2' to so it looks like this:
{% comment %}
The contents of the page.banner.liquid template can be found in /sections/page-banner-template.liquid
{% endcomment %}
{% section 'page-banner2-template' %}
Awesome.
Next, let's open up the Sections folder.
Locate the page-banner-template.liquid and copy all it's content.
Click 'Add a new section' and call it 'page-banner2-template'
Paste all the code you copied from the page-banner-template in this new Section file.
Terrific.
Now you can go to any of your Pages and select page.banner2 from the template suffix.
You will still need to go to the Customize theme area to upload your image for the page that uses this new section template.
This process can be repeated if you want more unique pages with unique banners repeating the same procedure of creating a new template and their coinciding section, for instance:
page.banner3 and page-banner3-template and so forth.