Image banner

Display a single or split images hero-style banner

Restricts overlay to only the area behind the text. Requires Overlay opacity > 0. SectionBroadcast's hero-style section lets you quickly build a powerful banner section with one or two split images.

Two images split with multiple buttons

The heading, text, and buttons are blocks that can be placed in different positions to create the perfect branded banner and messaging.

Single image with multiple buttons

Section settings

Settings	Type	Description
Content
Primary image	image_picker	Main banner image. Recommended size: 3200×1200px JPG.
Secondary image	image_picker	Optional second image (displays 50% width). Same size as primary.
Image link	url	Optional link for the image.
Layout
Width	select	Width of the banner: Full width or Full width padded.
Desktop
Height	select	Controls banner height on desktop. Multiple screen height or fixed pixel options
Desktop alignment	select	Alignment of content within the banner for desktop.
Content width	range	Percentage of banner width that content will occupy.
Mobile
Image	image_picker	Optional mobile-specific image (1200×1600px recommended).
Height	select	Controls height on mobile. Options mimic desktop height settings.
Mobile alignment	select	Alignment of content for mobile.
Colors
Color scheme	color_scheme	Select color scheme to apply to this section.
Show text background	checkbox	Adds background behind text for legibility.
Overlay type	select	Adds an overlay: Disabled, Opacity, or Text underlay.
Padding
Top	range	Top padding.
Bottom	range	Bottom padding.
Advanced
Show placeholder image	checkbox	Displays a placeholder if no image is selected. Disable for metafields.

Video Overview

This video demonstrates the section settings and block options for the Image banner section, including split-images and mobile options:

Video walkthrough of the Image banner section

Advanced setting

This video discusses the advanced setting option when using the image banner page templates with metafields:

Default product template - Image placeholder setting