This section can be applied to all of the theme's templates.
The Hero banner features layered images that move slightly as customers scroll, drawing attention to featured content or promotions.
Customize section settings
Click the Hero banner section to open its general settings.
Choose a Color scheme to customize the section’s background and text colors. You can modify your color schemes in Theme settings > Colors.
The Content position setting controls the overall placement of images and texts within the banner, with options for left, right, or center alignment.
Heading
Use the Heading field to add a title for the section. Adjust the text size with the Heading size.
Subheading can be used to display text below the heading, providing additional context or description. Its color also follows the chosen color scheme.
Button
You can place up to 2 buttons in the Hero banner. Add the button label within the Button text field, and the page of your choose within the Link field.
Background image
Sets the image used for the banner background. If none is selected, the section uses the background color from the chosen color scheme.
The Opacity slider adjusts the transparency of the background image, and the Blur option adds or reduces blur on the background image.
Customize image blocks
Click to open one of the preloaded Image blocks to customize it.
Each of the blocks can be rearranged by clicking, holding, then dragging the block with the cursor. The Hero banner supports 1 to 6 image blocks.
Click on the Image upload option to add an image within the block. Additional settings for it can be adjusted within the available sliders including Image size (in percentage).
Horizontal position on desktop: controls the left-to-right placement of the image on desktop.
Vertical position on desktop: Adjusts the up-and-down placement of the image on desktop.
Horizontal position on mobile: Controls the left-to-right placement of the image on mobile devices.
Vertical position on mobile: Adjusts the up-and-down placement of the image on mobile devices.
Opacity: Changes the transparency level of the image block.
Blur: Adds or reduces the blur effect applied to the image block.