Hero banner

The Hero Banner section is designed to create large promotional banner areas for showcasing campaigns, featured collections, product launches, or brand storytelling content. This section combines media, flexible content positioning, and an interactive featured products popup to create a visually engaging storefront experience.

The section supports both image and Shopify-hosted video media, responsive layouts, customizable content positioning, and popup product recommendations directly inside the hero area.

Settings

  • Media
    Image: Uploads the main image displayed inside the hero banner.
    A Shopify-hosted video: Uses a Shopify-hosted video instead of an image for the hero banner media.
    Preload image: Enables image preloading to improve loading performance and visual stability.
    Desktop media ratio: Controls the media aspect ratio displayed on desktop devices.
    Tablet media ratio: Adjusts the media aspect ratio for tablet layouts.
    Mobile media ratio: Defines the media aspect ratio displayed on mobile devices.
  • Information
    The Information area inside the Hero Banner section supports flexible content blocks such as Heading, Text, Buttons, and Spacing blocks.
    Color scheme: Controls the color styling used for the information content area.
    Background opacity: Adjusts the opacity level of the content background overlay for better readability.
    Desktop position: Controls the content position displayed on desktop devices.
    Tablet position: Defines the content position for tablet layouts.
    Mobile position: Adjusts the content position on mobile devices.
    Desktop alignment: Controls the content alignment displayed on desktop screens.
    Tablet alignment: Defines the content alignment for tablet devices.
    Mobile alignment: Controls the content alignment displayed on mobile devices.
    Max width: Defines the maximum width of the information content container.
  • Button label on desktop: Defines the popup trigger button label displayed on desktop devices.
  • Button label on mobile: Defines the popup trigger button label displayed on mobile devices.
  • Products: Allows you to select the products displayed inside the featured products popup.
  • Number of columns on large desktop: Controls how many product columns are displayed inside the popup on very large desktop screens.
  • Number of columns on desktop: Defines the product grid layout displayed inside the popup on desktop devices.
  • Number of columns on tablet: Adjusts the popup product layout for tablet devices.
  • Number of columns on mobile: Controls the number of product columns displayed inside the popup on mobile devices.

The Featured Products area displays selected products inside an interactive popup layout directly from the hero banner.

The Information area inside the Hero Banner section supports flexible content blocks such as Heading, Text, Buttons, and Spacing blocks.

Block: Heading

  • Heading: Defines the main heading text displayed inside the section.
  • Heading style: Controls the visual appearance of the heading text. Available options include Default and Uppercase.
  • Large desktop font size: Controls the heading font size displayed on large desktop screens.
  • Desktop font size: Defines the heading font size for desktop devices.
  • Tablet font size: Adjusts the heading font size displayed on tablet devices.
  • Mobile font size: Controls the heading font size displayed on mobile devices for better responsiveness.

Block: Text

  • Text: Defines the descriptive or promotional text content displayed inside the block.
  • Text scale: Controls the overall text size and visual emphasis.

Block: Buttons

The Buttons block allows merchants to display up to two call-to-action buttons inside the section. Both buttons share the same configuration settings.

  • Button label: Defines the text displayed on the button. Leave empty to hide the button.
  • Button link: Sets the destination URL for the button.
  • Open this link in a new window: Opens the button link in a new browser tab or window when enabled.
  • Use outline button style: Applies an outline-style appearance instead of a solid button style.

Block: Spacing

The Spacing block allows merchants to add adjustable spacing between content blocks inside the section for cleaner and more flexible layouts.

  • Desktop spacing: Controls the spacing size displayed on desktop devices.
  • Tablet spacing: Adjusts the spacing size for tablet layouts.
  • Mobile spacing: Defines the spacing size displayed on mobile devices.

Using high-quality visuals, balanced content positioning, and carefully selected featured products can help create a stronger promotional impact while encouraging customers to explore highlighted products directly from the hero banner experience.