Megamenu

The Megamenu section enhances your Classic Menu by allowing you to create advanced, multi-column dropdowns that display collections, products, images, and custom content.

Location: Header → Header Design → Classic Menu -> Megamenu

The Megamenu section allows you to create advanced dropdown navigation with multiple columns, images, and grouped menu items. It provides an organized and visually appealing way to display collections, categories, or promotional content directly within your main navigation. This section is available only within the Classic Menu and is designed to enhance the user experience on stores with extensive catalogs.


Megamenu — Options Overview

Category

Option / Setting

Description / Available Values

General Settings

Open megamenu

Enables preview of the megamenu inside the Shopify theme editor. This option only functions in the admin panel to simplify editing and layout adjustments.

Mega menu item name

Enter the exact name of the main menu item that should trigger the megamenu when hovered or clicked.

Grid for menus

Set how many columns are displayed in the megamenu layout. Range: 2–8 items.

Submenu font size

Defines the font size hierarchy for submenu content. Options: Big, Small, Small-Big, Big-Small.

Heading link size / Submenu link size

Controls the text size of main headings and submenu links within the megamenu.

Group menu items

Groups menu links under shared headings for better organization. This feature works only with menu items that do not include a third submenu level.

Items alignment

Sets horizontal alignment of menu items inside the megamenu. Options: Left, Center.

Images for Level 2 Items

Image hover effect

Controls the visual effect applied to images when hovered. Options: Basic theme settings, Disable, Zoom in #1, Zoom in and rotate, Zoom in #2, Zoom out #1, Zoom out #2, Slide, Shine.

Image ratio

Defines the aspect ratio of images used in the second-level menu items. Options: Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), Widescreen (16:9).

Images for menu items #1–#16

Add up to 16 individual images to represent each second-level menu item. Each image can correspond to a specific collection, product, or category.

Colors (Desktop)

Heading

Sets the color of main headings in the megamenu.

Heading hover

Defines the color of headings when hovered.

Link

Sets the default link color for submenu items.

Link hover

Defines the link color when hovered.

Background

Controls the background color or gradient for the megamenu area.

Shadow

Adds or customizes the shadow below the megamenu for better depth and visibility.

Last updated