General configs

Choose the layout style for the hero banner.

Full: Display the banner spanning the full width of the viewport with media filling edge-to-edge.

Column: Display the banner in a contained column layout, often with text and media side-by-side or in a stacked column format on wider screens.

Preload image: Toggle this ON to preload the hero image for faster perceived loading (recommended for primary above-the-fold banners).

Desktop

Image ratio: Select the aspect ratio for the desktop image display: options typically include Natural (original ratio), Square (1:1), Landscape (e.g. 16:9 or similar), Portrait, etc. (exact ratios depend on theme implementation).

Image: Upload or select the main image to display on desktop views.

A Shopify-hosted video: Select and insert a video file hosted in Shopify 

Mobile: Similar configurations to Desktop

Media link: Enter a URL to make the entire media (image or video) clickable, directing to the specified link.

Information

Color scheme: Adjust the color scheme of the text and overlay elements in the hero banner.

Background image: Select an optional background image for the text part (separate from the main hero media).

Desktop position: Choose the position of the information text on desktop – Top left, Top center, Top right, Center left, Center, Center right, Bottom left, Bottom center, Bottom right

Desktop alignment: Choose the text/content alignment on desktop – Left, Center, Right

Mobile position & Mobile alignment: Similar configurations to Desktop. 

Section layout

Color scheme: Adjust the color scheme of the section

Background image: Select an image as the section background. 

Section full width: Toggle this ON to display the section in full width.

Section max width: Adjust the maximum width of the section. Enter a pixel number (e.g. 1900 px).

Content full width: Toggle this ON to display the content in full width.

Content max width: Adjust the maximum width of the content. Enter a pixel number (e.g. 1900 px).

Padding desktop: Add spacing on the top of the section in the desktop view. Enter a pixel number (e.g. 5 px).

Padding tablet, mobile: Add spacing on the top of the section in tablet and mobile view. Enter a pixel number (e.g. 5 px).

Margin desktop Add spacing on the left of the section in the desktop view. Enter a pixel number (e.g. 5 px).

Margin tablet, mobile: Add spacing on the left of the section in tablet and mobile view. Enter a pixel number (e.g. 5 px).

2.2.1. Block

Image Block 

Upload an image

Width: Slide to the desired value or enter a pixel number (140 px)

Heading Block

Add the main heading text displayed in the hero banner. 

Width: Adjust the maximum width of the heading text container. Enter a pixel number (e.g. 800 px).

Font size: Set the font size for the heading text across devices. 

Desktop: Enter the font size for desktop view. Enter a pixel number (e.g. 54 px). 

Tablet: Enter the font size for tablet view. Enter a pixel number 

Mobile: Enter the font size for mobile view. Enter a pixel number 

Text Block

Add the subheading text displayed in the hero banner. Similar configurations to Heading block. 

Button Block

Button label: Add content for the button

Button Link: Search or insert a link