Add promotional banners, product picks, and image column layouts directly inside your store's navigation menu.
Overview
Sampo's mega menu extends your navigation with rich content blocks that appear alongside your sub-menu links. Each block is attached to a top-level main menu item by name and displays when that item is opened — in both the mobile drawer and the desktop submenu, whether it is set to Drawer or Dropdown.
The same content renders in both places, but the layout differs: the dropdown is a wide, multi-column area, while the drawer is always a single column because a drawer submenu panel never grows past the drawer's own width. For that reason the column counts, area widths, and dropdown aspect ratios apply to the dropdown only, and banners and column images have a separate aspect ratio setting for the drawer.
Block types
Mega menu blocks are added from the Header section in the theme editor. There are three block types.
Megamenu / Banners
Displays up to ten promotional images alongside the sub-menu links. Each banner has an optional subheading, heading, and link, with a shared aspect ratio and text alignment. The texts are placed under the image, with the subheading above the heading.
| Setting | Type | Default | Description |
|---|---|---|---|
| Parent menu item title | Text | — | The exact name of the main menu item this block attaches to. Mandatory and case-sensitive. |
| Menu columns in dropdown | Range | 3 |
How many columns the menu links are split into. Between 1 and 6. Dropdown only — the drawer always uses a single column. |
| Banner area width in dropdown | Range | 40% |
Width of the banner column beside the menu links. Between 20% and 100%. Use 100% when there are no menu links to show. |
| Menu and content order | Select | Menu first | Whether menu links or banners appear first (left to right). |
| Banner columns in dropdown | Range | 2 |
How many columns the banners are arranged in. Between 1 and 10. |
| Banner image aspect ratio in dropdown | Select | Square (1:1) | Shape applied to all banners in this block when the menu opens as a dropdown. Options: Natural, Portrait (2:3), Portrait (3:4), Square (1:1), Landscape (4:3), Landscape (16:9). |
| Banner image aspect ratio in drawer | Select | Landscape (4:3) | Same, for when the menu opens in the drawer — usually on mobile. |
| Text alignment | Text alignment | Left | Alignment of the subheading and heading under the banner image. |
Up to ten banners can be added per block. Each banner slot has its own Image, Subheading, Heading, and Banner link fields. A banner is shown only when it has an image; the subheading, heading, and link fields appear in the editor once an image is selected. A link makes the whole banner clickable.
Megamenu / Products
Displays a curated set of products alongside the sub-menu links. Products can come from a collection or be selected individually.
| Setting | Type | Default | Description |
|---|---|---|---|
| Parent menu item title | Text | — | The exact name of the main menu item this block attaches to. Mandatory and case-sensitive. |
| Menu columns in dropdown | Range | 3 |
How many columns the menu links are split into. Between 1 and 6. Dropdown only. |
| Products area width in dropdown | Range | 40% |
Width of the products column beside the menu links. Between 20% and 100%. Use 100% when there are no menu links to show. |
| Menu and content order | Select | Menu first | Whether menu links or products appear first. |
| Product columns in dropdown | Range | 3 |
How many columns the products are arranged in. Between 1 and 6. |
| Select collection | Collection | — | Products from this collection are shown in the mega menu, in the collection's current sort order. |
| Select products | Products | — | Manually selected and arranged products. Takes precedence over the collection when both are set. Up to 20 products. |
| Number of products to show | Range | 6 |
Maximum number of products displayed. Between 1 and 12. |
| Show 'View all' link | Checkbox | Enabled | Adds a link to the selected collection. Available with collection selection. |
Megamenu / Columns
Displays an image above each menu link column. Use this block for visual category navigation: the first image sits above the first column of links, the second above the second, and so on.
The Menu columns in dropdown setting also determines how many image slots are available — set it to 4 and four column image slots appear. A maximum of six columns can have an image.
| Setting | Type | Default | Description |
|---|---|---|---|
| Parent menu item title | Text | — | The exact name of the main menu item this block attaches to. Mandatory and case-sensitive. |
| Menu columns in dropdown | Range | 3 |
How many columns the menu links are split into, and how many column image slots are available. Between 1 and 6. Dropdown only. |
| Column image aspect ratio in dropdown | Select | Landscape (16:9) | Shape applied to all column images in this block when the menu opens as a dropdown. Options: Natural, Portrait (2:3), Portrait (3:4), Square (1:1), Landscape (4:3), Landscape (16:9). |
| Column image aspect ratio in drawer | Select | Landscape (4:3) | Same, for when the menu opens in the drawer — usually on mobile. |
| Heading position | Select | Bottom center | Position of the heading on top of each column image. |
| Heading style | Select | Body text | Typography or button style applied to column headings. Options: Heading, Body text, Subheading, Primary, Secondary, Link. Buttons appear disabled if the image link is not set. |
Each column slot has its own Image, Heading, and Image link fields. The heading is optional text on top of the image — use [br] for a line break. The link makes the whole image clickable. The heading and link fields appear in the editor once an image is selected.
Setup
Steps
- From your Shopify admin, go to Online Store → Themes.
- Click Customize next to your active theme.
- In the left sidebar, click Header.
- Confirm the correct Main menu is selected in the Header settings.
- Scroll down to the Blocks area and click Add block.
- Choose a block type: Megamenu / Banners, Megamenu / Products, or Megamenu / Columns.
- In Parent menu item title, enter the exact name of the top-level menu item the block should appear under (for example,
New). The field is case-sensitive. - Configure the block's content and layout settings.
- Click Save.
The Parent menu item title field is case-sensitive. If a block does not appear in the menu, check that the title exactly matches the menu item name, including capitalisation. Add one mega menu block per top-level menu item.
The order of blocks in the theme editor determines the display order of content inside the menu. Drag blocks to reorder them.
Submenu type
Mega menu blocks work with both desktop submenu types. You can switch between Drawer and Dropdown with the Desktop submenu type setting in the Header section settings. The setting is available for header layouts that show the menu in the header — layouts where the menu itself opens from a drawer always use the drawer submenu.
When Dropdown is selected, the number of menu link columns is controlled by the Menu columns in dropdown setting on each block. In the drawer, links are always shown in a single column.
Navigation link formatting
The sub-menu links that appear in the navigation area of a mega menu block support the same special title patterns as the top-level menu. Enter them in Shopify's menu editor on the relevant sub-menu items. Sampo supports two levels of sub-menu links: a sub-menu item's own child links are rendered as a smaller group under it.
Dividers
Add a sub-menu item with --- in the title to insert a horizontal divider between links in the navigation column.
Badges
Append :::badge-name to a sub-menu item title to display the link with a badge style — for example, Jackets:::new displays "Jackets" with the New badge colors.
The built-in badge names are sale, preorder, new, soldout, and rating. Custom badges defined in Theme settings → Product badges → Custom badge definitions can be used as custom- plus the badge name, for example Outlet:::custom-outlet.
Emphasized links
Add *** anywhere in a sub-menu item title to render it in an emphasized style — for example, ***View all.
Manual column splits
By default, the Menu columns in dropdown setting distributes sub-menu links evenly across the available columns using a mathematical split. If you need uneven columns — for example, 5 items in the first column and 2 in the second — you can control the split manually using ||| in a sub-menu item title.
Add a sub-menu item with ||| in its title at the point where you want a new column to begin. The number of ||| items in the menu determines the total column count automatically, overriding the Menu columns in dropdown setting for that parent item.
The ||| marker is stripped from the visible title, so you can combine it with a regular title — for example, |||Accessories — if you want the first link in the new column to carry a visible label. Use ||| alone if you only want a column boundary without a link.
The ||| column split applies to the mega menu navigation area in the dropdown. In the drawer, links are always shown in a single column and ||| is stripped from the title. With a Megamenu / Columns block, the column count from ||| also decides which column images are shown, up to six.
Increase discovery with in-menu promotions
Surface your best-selling or highest-margin products in the mega menu so customers encounter them while navigating, not only after reaching a collection page. Stores that promote products at the navigation level often see higher add-to-cart rates from customers who were browsing an unrelated category.
Make category navigation visual
Use Megamenu / Columns with an editorial image above each link column. Visual navigation helps customers orient themselves faster and shortens the path to a product page.