The Mega Menu transforms a standard navigation dropdown into a wide, visually rich panel that combines your submenu links with promotional content — images, videos, and call-to-action cards. Instead of a narrow list of links, customers see an eye-catching layout that highlights collections, new arrivals, or seasonal campaigns right inside the navigation.
Mega Menus are available on desktop only. On mobile, the menu items display in the standard drawer navigation, with promotional content shown as a horizontal scrollable row beneath the submenu links.
You can add up to 5 Mega Menu blocks to your header, each attached to a different top-level menu item. Each Mega Menu can contain up to 5 promotion cards with images or videos.
The Maison theme ships with two Mega Menu examples in its demo:
"Shop" menu — Submenu links on the left + 3 promotion cards on the right:
"Collections" menu — No submenu links, 4 promotion cards filling the full width:
On this page
- How Mega Menu works
- Set up your navigation
- Add a Mega Menu block
- Add promotion cards
- Control promotion layout
- Verify your Mega Menu
1. How Mega Menu works
The Mega Menu works by matching a menu title you set in the Theme Editor to a top-level link in your store's main navigation. When a customer hovers over that menu item on desktop, instead of a regular dropdown, a full-width panel appears showing:
- Submenu links on the left — pulled automatically from your navigation menu structure (child links and grandchild links).
- Promotion cards on the right — images or videos with optional text overlays and buttons that you configure in the Theme Editor.
If the menu item has no child links (no submenu), the promotion cards expand to fill the entire panel width.
2. Set up your navigation
Before adding a Mega Menu, make sure your store's navigation is properly set up. The Mega Menu pulls its submenu links directly from your navigation menu structure.
How to check your navigation
- From your Shopline admin, go to Online Store > Navigation (or Menu).
- Open your Main menu (the one assigned to your header).
-
Verify your menu structure. For example:
Main Menu ├── Shop ← top-level link (Mega Menu will attach here) │ ├── Living Room ← child link (shown in mega menu panel) │ ├── Bedroom ← child link │ ├── Kitchen ← child link │ └── Dining Room ← child link ├── Collections ← another top-level link │ ├── New Arrivals │ └── Best Sellers └── About
The top-level link title (e.g., "Shop") is what you'll enter as the Mega Menu's menu title in the next step. The child links beneath it automatically appear as the submenu inside the mega menu panel.
3. Add a Mega Menu block
Now that your navigation is ready, add a Mega Menu block to your header section in the Theme Editor.
Steps
- From your Shopline admin, go to Online Store > Design.
- Under Current Theme, click Design (or Customize) to open the Theme Editor.
- In the left sidebar, find the Header section.
- Click Add block inside the Header section.
- Select Mega menu from the block list.
-
In the Menu title field, enter the exact title of the top-level navigation link you want to convert into a Mega Menu (e.g., "Collections").
That's it — the block is now linked to that menu item. The next step is adding promotional content inside it.
4. Add promotion cards
Promotion cards are the visual content displayed alongside your submenu links in the Mega Menu panel. Each promotion card can show an image or video with an optional text overlay, button, and link.
How to add a promotion
- Click on your Mega menu block in the sidebar.
- Click Add block inside the Mega menu block.
- Select Promotion.
- Configure the promotion settings (detailed below).
You can add up to 5 promotion cards per Mega Menu block.
4.1 Media settings
Each promotion card has a media background — either an image or a video.
Media type
- Image — Upload or select an image from your media library. You can also set the image fit (Cover or Contain) and provide alt text for accessibility.
- Video — Choose between uploading a video file or pasting an external video URL.
Aspect ratio
Controls the shape of the promotion card. Options include: Auto, 1:1 (square), 2:3, 3:4 (default — tall portrait), 4:3, 3:2, 5:4, and 16:9 (wide landscape). Choose an aspect ratio that matches your content — tall images work well for product photography, while wider ratios suit lifestyle or banner-style images.
Border radius
A slider from 0 to 100 pixels. Set to 0 for sharp corners, or increase for rounded corners. A value around 8–12px gives a subtle, modern look.
Overlay
You can add a color overlay on top of the image to improve text readability. Adjust the overlay opacity (0–100%) and choose an overlay color. A dark overlay at 20–30% opacity works well for white text on light images.
Link
Set a URL that the entire promotion card links to. Enable Open in new tab if you want the link to open in a new browser tab.
4.2 Card content & text overlay
Each promotion card can contain a Promotion card child block that adds a text overlay on top of the media. This child block supports a variety of content elements:
- Title — A heading displayed over the image.
- Subheading — A smaller text line above or below the title.
- Description / Rich text — A paragraph of text.
- Button — A call-to-action button (e.g., "Shop Now").
- Image / Video — Embed additional media inside the overlay.
- Divider / Spacer — For layout spacing.
Color customization
The promotion card has a Override colors toggle (on by default) that lets you set custom text color, button text color, button background color, and even a button gradient. This ensures your text is readable regardless of the background image.
Layout & spacing
You can control the flex layout of the card content (direction, alignment, gap) and adjust padding around the text overlay. By default, content is aligned to the bottom-left with 20px padding on all sides.
5. Control promotion layout
Each promotion card has a Size setting that controls how much horizontal space it takes up in the Mega Menu panel. This is set as a percentage width.
The submenu links column takes up 25% of the panel width. The remaining 75% is available for your promotion cards. If there are no submenu links, promotions take the full 100%.
Common layout examples
| Layout | Promotions | Size per card |
|---|---|---|
| 3 equal cards | 3 | 33% each (default) |
| 2 equal cards | 2 | 50% each |
| 1 large + 2 small | 3 | 50% + 25% + 25% |
| 4 equal cards | 4 | 25% each |
| 1 full-width card | 1 | 100% |
6. Verify your Mega Menu
After setting everything up, preview your store in the Theme Editor on desktop view and hover over the menu item you configured. Use this checklist:
- The Menu title in the Mega Menu block exactly matches a top-level navigation link.
- Hovering over that menu item opens a full-width panel instead of a narrow dropdown.
- Submenu links appear on the left (if you have child links in your navigation).
- Promotion cards appear on the right with the correct images/videos.
- Text overlays are readable against the background (adjust overlay opacity if needed).
- Promotion links navigate to the correct pages when clicked.
- On mobile preview, the menu opens normally in the drawer with promotions as a scrollable row.
Need Further Assistance
If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our website for assistance.
Share:
Enable the size chart on product pages
Set up color swatches