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 image sections that create a striking visual impact. They 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
- Navigate to a template that contains a Hero banner. All templates apart from Homepage and Product page contain a Hero banner section.
- Choose the background style of Image, Color or None.
- Choose the image to be shown on ALL pages that use this template. For best results, use an image with 16:9 aspect ratio and width of 3200px. On the Collection template you have the choice to Use collection image instead.
- Further settings under Theme Settings > Hero Banners allow you to customize the layout of your hero banners across the store by choosing the height, colors, breadcrumbs, content overlap etc.
Note
If you hide the Hero banner on a specific page with the eye button and use an alternative section, we advise you to provide an h1 heading in that new section for SEO purposes. Use the setting called Set as page heading (uses h1 tag).
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
