Hero banner

Overview

A tabbed hero section where each tab is a full banner slide with a background image, an optional linked product display, a freely positioned floating image, large backdrop text, a content stack (icon, tagline, heading, description, two buttons), and independent layout controls. Tab navigation labels appear at the top or bottom of the section. Section settings cover tab navigation typography and autoplay, the shader gradient animation, product image ratio, layout container, color scheme, and spacing. Each Banner block defines one tab.

Section Configuration

Tab Settings

Typography applied to all tab navigation labels.

Setting	Description
Autoplay	Auto-advances through tabs. Disabled by default.
Slide Change Interval	Delay between automatic transitions. Range: 2000–9000 ms, default 5000 ms.
Tab Text Size	Large, Medium, or Small. Default: Medium.
Tab Text Weight	Thin (100) to Black (900). Default: Normal (400).
Tab Text Case	None, Uppercase, Capitalize, or Lowercase. Default: None.
Tab Font Family	Default or Heading font.

Layout Settings

Setting	Description
Enable Shader Animation	Applies an animated gradient shader to the section background. Enabled by default.
Gradient Color	Gradient used for the shader animation. Default: dark-to-red-to-cream diagonal gradient.
Tab Position	Position of the tab navigation bar: Top or Bottom. Default: Top.
Media Ratio	Product image aspect ratio: Adapt (original), Square, Portrait, Landscape, or Fit to Box. Default: Adapt.
Desktop Height	Fixed product image height on desktop. Range: 100–500 px, default 265 px. Visible only when Media Ratio is Fit to Box.
Mobile Height	Fixed product image height on mobile. Range: 100–500 px, default 265 px. Visible only when Media Ratio is Fit to Box.
Container Layout	Page Width, Contained Content, or Container Fluid. Default: Contained Content.
Border Style	None, Top, Bottom, or Top & Bottom. Visible when not Page Width. Default: None.
Container Size	Max container width as a percentage of page width. Range: 50–100%, default 100%.
Color Scheme	Shopify color scheme applied to the section. Default: Scheme 3.