Banner menu

by Admin on Oct 03, 2025

1. What is the Banner Menu?

A Banner Menu is a mega menu layout where dropdown items are organized into multiple Banners. It's ideal for showcasing categories like collections, product types, or promotions in a visually clean structure.

2. When to use the Banner Menu?

Grab attention with bold visuals: Ideal for showcasing seasonal campaigns, product highlights, or brand stories using large, clickable images.
Turn your menu into a mini promotion area: Pair banners with text and call-to-action buttons to drive traffic directly from the navigation.
Balance aesthetics and utility: Great for lifestyle or fashion brands that want their menu to feel more like a curated lookbook.
Add a premium or editorial feel to your store: Use it to elevate your brand perception through strong imagery and minimal link clutter.

3. How to set it up?

To make a Banner menu fully yours, there are 3 processes to go through:

Process 1. 🤔 Give the main menu a title

STEP 1: Go to Online Store > Themes > "Customize".

STEP 2: In the Theme Editor, under Header, find the Header section.

STEP 3: Click "Add block", then tap on the Banner menu.

STEP 4: 📌 Important step: Give the main menu a title:

Enter the menu title in the Menu Item field.

⚠️ Note: You must enter this field for your menu to appear on the site.

STEP 5: Click "Save" when done.

Process 2. 🤔 Add banner images

STEP 1: Still in the Banner menu setting panel, find the Banner 1 setting group.

STEP 2: In the Image setting, click "Select" to assign an image as the banner.

STEP 3: Add the content & adjust the look:

Add the content to the banner, such as Heading, Text, and Button label.
Adjust the Text size, Text alignment, and Button style.

STEP 4: (Optional) Make the text appear on the banner:

Toggle on Text overlay setting.
Drag to adjust the Overlay opacity.

STEP 5: Click "Save" when done.

⚠️ Note: You can add up to 4 banners. This guide covers Banner 1 setting group - to add more, repeat the same steps for Banner 2, 3, and 4.

Process 3. 🤔 Customize the Banner menu

You've finished with the two most important processes. However, there is still some more work to do to achieve that final result. Depending on your needs, just find the corresponding guide below and take action:

📌 3.1. To attach a link for the main menu:

In Theme Editor > Header section > Banner menu block > Click to choose or enter a link in the Menu item link field.

(Optional) Turn on the setting to open the link in a new tab.

📌 3.2. To add a label to the menu:

In the Theme Editor, go to Header section > Banner menu block > Scroll down and find the Menu Label section on the right panel. From here, you can:

STEP 1: Enter the text you want to show on the label into the Label field.

STEP 2: Change the text & label color.

STEP 3: Add an icon to the label, choosing one of the 3 ways:

Method 1: Choose from the Icon drop-down list.
Method 2: Find an icon from the Icon library, copy and enter its name into the Use another icon field.
Method 3: Upload a custom icon image.

STEP 4: Save when done.

⚠️ Note: Leave everything blank to remove the label.

📌 3.3. To change the text color for the banner menu:

In the Theme Editor, go to Theme Settings tab > click on Schemes > scroll to Header, and you can change the Text color.

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