Banner

The Banner section is one self-contained hero — no blocks. Use it for homepage heroes, campaign landing spots, or anywhere you need one strong visual with a headline and button.

Set the background

Under Banner background settings:

• Background image and Background image (mobile) — upload separate crops for desktop and phone.
• Background video and Background video (mobile) — Shopify-hosted video instead of a still image.
• Background image fit — Cover, Contain, or Default.

Add your message

Banner foreground content is where the text lives:

• Horizontal alignment and Vertical alignment — position the content block within the banner.
• Icon, Caption, Heading, Subheading — build the message. Heading size runs from extra small through jumbo; Heading type sets the HTML tag (h1–h6).
• Button text, Button link, Button style, and Link style — make just the button clickable, or the entire banner.

Control height

Section height — Default follows aspect ratio settings, Fixed fills a set percentage of the viewport. See Section height.

Other settings

Color scheme (banner colors come from your scheme's banner tokens). Padding settings, Visibility settings, Width settings. For device-specific banners, duplicate the section and use Visibility settings — see Using separate banners for desktop and mobile.