Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
Using the Page.Banner Template
In the Flex theme, there is a page.banner template that includes the ability to add a top banner image and a couple of settings in the theme editor for the layout and custom CSS.
When adding a Page in your Shopify Admin (Online Store > Pages), the page.sidebar template is named page.banner and can be selected under Template > Template Suffix:
Once you've added your page content, you can head into the Theme Editor (Customize) > Select your Page.banner from the drop-down page selector. Your theme editor on the left will then update with the page settings. Here you can configure the Banner Image and adjust the 'Layout' and 'Advanced' settings for both the banner and the page content if you'd like!
In This Article
Banner Image Settings
To enable the banner image for the page, under Sections, click into Page Banner. Here, you can upload your image!
Darken banner image
You can enable the 'darken banner image' setting to add a subtle overlay on top of you banner image. This comes in handy if you have have a 'busy' banner image as it will improve legibility!
Layout
The layout settings include options to adjust the spacing, width and height for the banner image.
Width
If you'd like your banner image to spread full-width, you can select 'wide.' If you'd like your banner image to be contained/not full-width, you can select 'standard.'
Banner height
You can select small, medium, or large for the height for the page's banner image.
Top/Bottom spacing
You can adjust the space above and below your banner image with the top spacing and bottom spacing settings.
Advanced
In the advanced settings, you can add in your own CSS class and custom CSS for the banner image.
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Page Settings
You can also configure layout and advanced settings for the content of the page.banner template as well! To locate these settings, under Sections > click into Page.
Layout
In the layout settings, you can adjust the width of the page content, and the top/bottom spacing.
Width
If you'd like your page content to spread full-width, you can select 'wide.' If you'd like your page content to be contained/not full-width, you can select 'standard.'
Top/Bottom Spacing
You can adjust the space above and below the page content with the top spacing and bottom spacing settings.
Advanced
In the advanced settings, you can add in your own CSS class and custom CSS for the page content.
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Examples
Example 1
Page.banner settings:
- Banner width - standard
- Banner height - small
- Top spacing/bottom spacing - 30px
- Page width - standard
Additional layout settings:
Header - centered
Icon bar - enabled
Footer - centered
Example 2
Page.banner settings:
- Banner width - standard
- Banner height - medium
- Top spacing - 30px
- Bottom spacing - 0
- Page width - standard
Additional layout settings:
Header - vertical
Footer - none
Creating additional Page.banner Templates
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!
Head into Online Store > Themes > Actions > Edit Code.
Under Templates click Add a new template.
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
Remove all the code that is in the file you just created and replace it with this code:
{% comment %}
The contents of the page.liquid template can be found in /sections/page-template.liquid
{% endcomment %}
<section class="banner__page" data-check-for-order="true">
{% section 'page__banner-2' %}
<section class="section__wrapper
section
">
<div class="container">
{% section 'page__main' %}
</div>
</section>
</section>
Save your template!
Under Section click Add a new section.
Call this new section 'page__banner-2' and click 'Create section'
Copy all the code from the page__banner.liquid file into the new page__banner-2.liquid file.
Save your section!
Need even more pages?
This process can be repeated if you need still more different page content for different pages by creating more templates and sections and following the naming conventions as the above instruction, such as:
Template: page.banner-3.liquid
Section: page__banner-3.liquid
...and so on