Hero banners are eye-catching, full-width image sections that create a striking visual impact.
What are hero banners?
At the top of your website, hero banners are eye-catching, full-width sections that create a striking visual impact. They usually feature the primary page title (h1) and can be set against a full-color background, an image background, or a plain page title. Customize the hero banner section settings to select the layout you prefer for every collection or template.
How to set up the hero banner
Steps
- Open the Theme Editor and navigate to a template that contains a Hero banner section.
All templates apart from Homepage and Product page contain a Hero banner section. This section is fixed at the top of the page under the header. - Set a preferred minimum Height for desktop and mobile.
- Choose whether to use a Bottom boundary effect. (Read our Content boundaries guide for more.)
- Choose whether to show a Background - This can be an image (including the collection image) a color or none.
- Allow alternative logo if using a transparent header. (Read our Header section guide for more about header designs).
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us