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).
- Choose whether to Show breadcrumbs.
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