Hero banner

This section offers high flexibility to create visually engaging hero areas with layered content, motion elements, and strong branding.

---

The Hero banner is a high-impact section used to showcase key visuals, promotions, or brand messaging at the top of a page. It supports images, videos, and flexible content positioning for maximum visual appeal.

1. Our guide to set up a Hero banner section:

Steps:

• In the theme editor, click Add section.

• Locate Hero banner.

• Click Save.

2. Section settings

• Media:

  • Image / Mobile image: Upload banner images for desktop and mobile.

  • Video: Upload a video. Video overrides image if both are set.

  • Image link: Make the banner clickable.

  • Media overlay opacity: Adjust overlay darkness for better text readability.

  • Desktop banner height: Small, Medium, Large or Custom.

  • Custom height: Adjust from 250px to 850px. Applies only when Custom is selected.

  • Adapt to image size: Keeps original image ratio (overrides height settings, not applied to video).

• Content settings:

  • Description: Add supporting text.

  • Content width: Control content container width.

  • Button label & Button link: Add label and assign link for CTA button.

  • Use outline button style: Switch between solid and outline styles.

  • Content position: Place content anywhere on the banner (top/middle/bottom + left/center/right).

• Colors: Customize colors specifically for this section (overrides theme defaults if set):

  • Text color

  • Button label color

  • Button background color

  • Button outline color

• Mobile layout

  • Mobile banner height: Adjust height specifically for mobile devices from 150px to 750px.

  • Mobile content alignment: Controls how content is aligned on mobile screens.

3. Heading block settings

• Heading: Main title displayed on the banner.

• Font size scale: Scales the heading relative to the base font size for stronger visual impact.

• Heading position: Allows independent positioning from other content elements.

• Block spacing:

  • Top padding: Adds spacing from the top edge. Only applies when position is set to Top.

4. Scrolling text block settings

• First / Second / Third text: Add looping scrolling messages.

• Text size: Adjust the size of the scrolling text.

• Text position: Choose the position of scrolling text on the banner.

• Direction: Defines the scrolling direction of content across the banner.

• Speed: Controls how fast the announcements move: Slow, Normal or Fast.

• Block spacing:

  • Top padding: Adds spacing from the top edge. Only applies when position is set to Top.

5. Logo image block settings

• Image: Upload logo for desktop.

• Mobile image: Upload a separate logo for mobile display.