Mega menu

Overview

The Mega menu block creates a flexible and visually impactful dropdown within the main navigation. It allows you to combine standard navigation with promotional banners, feature highlights, and interactive elements, providing a seamless and engaging browsing experience. This block is especially valuable for highlighting products, collections, and special offers directly within your menu.

⚠️ Important: The Mega menu block helps visitors quickly discover featured items, access categories, and engage with seasonal or promotional content—all from one advanced dropdown.

Menu settings

Menu settings determine which navigation menu appears and how you blend links with promotional elements. These options ensure that your menu structure supports your merchandising strategy and enhances user engagement.

1. Select a Menu to display. The default is main-menu.

2. Enable Show banner navigation item to insert a banner as a menu entry for high-impact promotions.

3. Use Show features bar to showcase a horizontal row of highlighted links or collections. This is enabled by default.

4. Turn on Show view all buttons to display a "view all" link at the end of each menu group. This setting is enabled by default.

   1. "View all" buttons allow users to access full collections or lists easily.

Layout settings

Layout settings control how content in the block is arranged and aligned across devices. Adjusting these options creates a polished, readable navigation experience.

1. Activate Fill available space to make the dropdown stretch across the entire container.

2. Set Navigation alignment (desktop) to left, center, right, or full width, with left as the default.

   1. Changing alignment can help your navigation match your site's design and improves usability on large screens.

Banner background settings

Banner background settings let you build striking, responsive banners with images or video. Visual backgrounds help your menu stand out and provide an immediate branding opportunity.

1. Choose Background image fit — contain, cover (default), or default.

2. Add a Background image for desktop view.

3. Set a Mobile background image to optimize appearance on small screens.

4. Add a Background video, or use a Mobile background video if you want video on mobile as well.

   1. Specific media for mobile ensures crisp visuals and improved performance.

Banner foreground content

Foreground content appears above the banner background and includes headings, buttons, and icons. Use these settings to drive attention to featured promotions or calls to action.

1. Adjust Horizontal alignment and Vertical alignment (top, center, or the default bottom) for your content.

2. Add an Icon and a Caption for additional context.

3. Enter a main Heading, and select its Heading type from paragraph, H1–H6, with H2 as the default.

4. Provide a Subheading for supporting details.

5. Add a Button icon for visual emphasis on your call to action.

6. Set the Button text and Button link for navigation.

7. Enable Open link in a new tab if you want the button to open in a new browser tab. The default is off.

8. Pick a Button style: primary, secondary, extra large, plain, small, small secondary, or circle.

9. Select a Button layout: icon left, icon right, or icon only.

10. Choose a Link style: button, full block, or full block with button.

    1. Strong calls to action and well-placed visuals help drive clicks and user engagement.

Banner foreground media

Foreground media lets you add further emphasis by placing an image over the banner, suitable for campaigns and special features.

1. Upload an Image for the menu foreground.

2. Choose an Image style: default, rounded corners, or circle.

3. Set a Maximum image width, from 0 to 1600px, 160px as the default.

4. Add a Link for the image to direct users to a targeted page.

   1. Foreground images enhance both discovery and menu interactivity.

Banner color settings

Banner color settings control gradients, overlays, and the palette for text, icons, and backgrounds. Adjusting these ensures clear branding and high accessibility.

1. Apply a Banner background color and Banner background gradient for a layered look.

2. Set the Banner border, Heading, Icon, Subheading, and Text color to fit your brand.

3. Add a Banner overlay color or Banner overlay gradient to improve contrast.

4. Adjust the Banner overlay opacity from -2% (default) to 100%, in steps of 2.

   1. Improving contrast with overlays is important for readability, especially on busy background images or videos.

Visibility settings

Visibility controls let you decide where and when the Mega menu block is displayed. This guarantees the right menu appears on the right device at the right time.

1. Set Visibility to show the block everywhere, desktop only, or mobile only. The default is do not hide.

Editor settings

Editor settings help you identify your block while working in your store's editor, making organization simple and efficient.

1. Assign an Editor title for use within the editor. The default value is Mega menu.

   1. Unique editor titles streamline navigation and menu management.

Available in sections

You can use the Mega menu block in the following section:

1. Main navigation

💡 Tip: Test your Mega menu block on both desktop and mobile. Optimize all imagery, use overlays for contrast, and make sure your links are clear and descriptive for users of all abilities.

⚠️ Important: Always review overlay opacity and contrast. Combine clear calls to action and alt text on images to create a navigation experience that's easy, accessible, and inviting for all visitors.