Image banner settings
This guide describes the Image banner section.
Use this section to display an eye-catching banner for highlighting promotions or brand messaging. The banner can use an image or video as the background. You can also add an overlay to improve text readability.
Within the Image banner, you can place Content container and Countdown container blocks.
Demo example:
How to access the Image banner section
Access this section through the theme customizer:
- Navigate to Online Store > Themes
- Select “Customize” on your active theme
- On any theme template, click “Add section”
- Search and select “Image banner”
Note: Section cannot be added to the Password page.
To insert a new section between existing ones, follow the steps in the article "Sections and blocks" and locate the section titled “How to add a section”.
How to configure the Image banner section
Basic Components
The “Image banner” section consists of two primary components:
- General settings – These control the overall settings of the section.
- Block – Each block has its own individual settings.
Available block types include:
- Content container include its own blocks: Subheading, heading, text, button, spacer, divider and product card horizontal
- Countdown container
- Spacer
General settings
| Setting | Description |
| Media type |
Choose the type of media to display in the banner: Image: Displays a banner image Video: Displays a banner video. |
| Image | Upload or select the image to display in the banner. |
| Mobile image | Upload a separate image optimized for mobile devices. |
| Show overlay | Enable or disable an overlay layer on top of the image or video. |
| Overlay opacity | Adjust the transparency level of the overlay. |
Layout
| Setting | Description |
| Color scheme |
Apply color scheme for the image banner section from the available color schemes list. Read 'Color scheme' article to learn more about color schemes. |
| Section height |
Choose the height of the image banner section:
|
| Custom height | Set a custom section height for desktop devices. |
| Custom height mobile | Set a custom section height specifically for mobile devices. |
| Content position |
Choose where the content appears within the banner on desktop:
|
| Content position mobile |
Choose the vertical position of the content on mobile devices:
|
| Content alignment |
Choose how the content is aligned horizontally:
|
Padding
Padding settings are repeated across sections and blocks, which is why they are included in the Global Settings category.
For more details, read these article: Expanded block padding settings