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.
Supported Versions
The details shared here apply to the most recent versions of our Turbo, Flex, Parallax, Retina, Mobilia, and Responsive themes. To keep your theme up to date, check out this helpful document.
In This Article
Turbo, Flex, Parallax, Retina, Mobilia, and Responsive all include the page.banner template. This page template allows you to display a full-width banner image at the top of your page.
In the Turbo, Flex, Parallax and Retina themes, the page title will display on top of the banner image.
In the Responsive and Mobilia themes, the page title will display above the banner image.
How to use the Page.Banner Template
In order to set up your page with the page.banner template, follow these steps:
Step 1: From your Shopify Admin, head into Online Store > Pages.
Step 2: Select a pre-existing page or create a new page that you want to display a full-width banner.
Step 3: Choose the page.banner template for this page in the Template suffix area:
Step 4: Save your page!
Step 5: You can then head into the Theme Editor (customize) and select your page from the drop-down page selector:
Step 6: In the Theme Editor, under Sections click Banner to view the page settings.
Step 7: You can then upload the banner image here as well as configure other settings (depending on your theme).
Unique Banners for Different Pages
By default, any page that is using the page.banner template will display the same banner image. In order to have unique banner images on different page.banner pages, you will need to duplicate the template.
In order to duplicate the page.banner template, you'll need to edit the theme's code. If you are unfamiliar with making changes to code and need further assistance, we have a list of recommended Shopify Experts who can lend a hand!
For the Flex theme, check out this article for duplicating the page.banner template as the theme file names are slightly different!
Step 1: Head into Online Store > Themes > Actions > Edit Code.
Step 2: Under Templates click Add a new template.
Step 3: Make this new template of the 'page' variety, call it 'banner-2' and then click 'Create template':
Important: You must start the name you enter here with the word "banner" in order for all features to work. For example, entering "banner-2" (which becomes "page.banner-2.liquid") or "banner-about-page" (which becomes "page.banner-about-page.liquid") will work, but "about-page" (which becomes "page.about-page.liquid") will not.
Edit the template code
Step 4: Remove all the code that is in the file you just created and replace it with this code:
{% comment %}
The contents of the page.banner.liquid template can be found in /sections/page-banner-template.liquid
{% endcomment %}
{% section 'page-banner-template-2' %}
Step 5: Save your template!
Step 6: Under Sections click Add a new section.
Step 7: Call this new section 'page-banner-template-2' and click 'Create section'
Step 8: Copy all the code from the original page-banner-template.liquid file into the newpage-banner-template-2.liquid file.
Step 9: Save your section!
Step 10: Now you can go to any of your Pages and select page.banner-2 from the template suffix.
Step 11: You will still need to go to the Theme Editor (customize) 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.banner-3 and page-banner-template-3 and so on!