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
- 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.