Hero banner #1 - #2

by Admin on Oct 22, 2025

The Hero banner section offers a striking, full-width display designed to capture visitor attention immediately. Ideal for highlighting key products or campaigns.

1. Section Components

Section	Hero banner	Display a full-width banner to capture attention.
Available block	*Heading*	Add a heading to the section.
	Text	Add text to the section.
	Button	Add a button to the section.
	Logo list	Add a list of logos (up to 6) to the section.
	Rating	Add rating stars and message to the section.

2. Location & Setup

To add & set up the Hero banner section:

Open the Shopify Theme Editor (Online store > Themes > Customize)
Decide where you want to place the new section.
Click “Add section”.
Select “OT: Hero banner (#number of variant)”.

3. Highlight Features

Flexible content composition: Combine multiple content blocks such as heading, text, button, logo list, and rating to craft a rich and persuasive hero message.
Customizable layout options: Control the banner’s height, ratio, and image position for both desktop and mobile views.
Integrated logo and rating display: Showcase partner logos or brand trust elements directly within the banner to boost credibility.

4. Common Use Cases

🤔 How to set up the Hero banner section?

Here's how to set up the section:

STEP 1: Add the Hero banner section to your desired location

STEP 2: Set up blocks

Under Hero banner section, add these blocks and open their settings panel to customize:

Block	How to set up?
Heading	Enter Heading. Wrap some text in [...] to highlight it. Choose the highlight style at Marker.
Text	Enter Text for further description. Add an Icon. You can use SVG code or custom image to add your own icon.
Button	Add Button label and paste Button link to redirect customers. Choose Button size and color.
Logo list	Upload logos (up to 6). (Optional) Enter some text/message.
Rating	Choose the number of Rating stars (1-2). Choose the Star size and color. Enter some Text if you wish.

STEP 3: Customize the Hero banner section look

Click on the Hero banner section to open its settings panel:

Upload an Image to the section for a visual enhancement. You can also upload one for mobile devices separately.
Adjust the image corner, height, and ratio.

STEP 4: Click “Save” when done.

🤔 How to adjust Hero banner section look?

STEP 1: Click on the Hero banner section to open its settings panel.

STEP 2: Customize the layout

At Layout settings group, you have options to:

Set image position on desktop and mobile.
Enable to use the banner as a hero banner.

STEP 3: Customize the text

At Text settings group, you can:

Style how the content is aligned and the Content position.
Choose font and size for the heading and body text.
Adjust Icon size and Icon thickness.

STEP 4: Customize section layout

At Section layout settings group, you can:

Adjust section margin and padding.
Adjust section width, content width, or gap between text and image.
Adjust the section corner.

STEP 5: Customize colors

At Color settings group, choose colors for section elements such as section background, text, heading,...

STEP 6: Click “Save” when done.

5. Layout Recommendations

The Hero banner section has 2 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us!

📂 Hero banner #1

Check out demo here.

📂 Hero banner #2

Check out demo here.

6. Support Information

Need help? Contact our support team at Omni Themes Support .