Everything you need to set up and customize mega menus in your Boardwalk header — from linking navigation items and organizing link columns to adding promotional image cards.
A mega menu is an expanded dropdown panel that appears when a visitor hovers over or clicks a top-level navigation item in your store's header. Unlike a standard dropdown that shows a simple list of links, a mega menu displays your navigation links in organized columns and can include promotional image cards — making it ideal for stores with large catalogs or multiple collections.
In the Boardwalk theme, mega menus are created using two blocks that work together inside the Header section: the Mega Menu block and the Menu Card block. The Mega Menu block connects to a specific item in your navigation bar and automatically generates link columns from your menu structure. Menu Card blocks nest inside a Mega Menu to add clickable promotional images alongside the links. Together, they let you build rich, visual navigation panels without any custom code.
Follow these steps to add a mega menu to any top-level navigation item in your Boardwalk header.
Before adding a mega menu in the theme editor, you need
to set up your navigation links. Go to
Online Store → Navigation in your
Shopify admin. Open the menu that your header uses (often
called "Main menu"). Add or edit a top-level item (for
example, "Shop") and nest child items beneath it — these
child items will become the columns in your mega menu. If
you want grouped links within a column, add a third level
of nested items beneath each child.
Note: The mega menu automatically reads your menu structure from Shopify. You do not type or paste links into the mega menu block itself — it pulls them directly from the navigation menu you assigned in the Header section settings.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. You'll be working
inside the Header section, which is accessible from any
page in the editor.
Click on the Header section in the sidebar, then click Add block and choose Mega menu from the list. A new Mega Menu block will appear in the sidebar.
Click on the Mega Menu block you just added. Use the Menu position slider to choose which navigation bar item this mega menu should be attached to. Position 1 is the first item in your navigation, position 2 is the second, and so on. The mega menu will automatically display the child links of that menu item.
To add promotional images alongside your navigation links, click Add block inside the Mega Menu block and choose Menu card. Each card displays an image with an optional button label overlay. You can add multiple cards — they will appear to the right of the link columns.
Select a color scheme for the mega menu panel to match your store's branding. You can also set a separate color scheme on each Menu Card block for visual contrast.
Click Save in the Theme Editor. Hover over the navigation item in your preview to verify the mega menu panel, link columns, and any promotional cards are displaying as expected.
These settings are available when you click on a Mega Menu block inside the Header section.
Determines which top-level navigation item this mega menu is attached to. Position 1 corresponds to the first item in your navigation bar, position 2 to the second, and so on. The mega menu will automatically display the child links of the selected item. Range: 1 to 10.
Select any defined color scheme to style the mega menu panel background and text. This controls the background color, link colors, and column heading colors within the dropdown.
Menu Card blocks are nested inside a Mega Menu block to add promotional images alongside your navigation links. Each card is a clickable image that can link to any page, collection, or URL in your store.
The promotional image displayed on the card. For best results, use images that are at least 800px wide. If no image is set, a placeholder graphic will be shown.
An optional text label that appears as a button overlay on top of the image. Use this to add a call to action like "Shop New Arrivals" or "View Collection." Leave blank to show the image without a label.
The URL that the entire card links to when clicked. You can link to any page, collection, product, or external URL.
Controls the shape of the card image. Options:
Square, Landscape (4:3),
Portrait (3:4), or
Widescreen (16:9).
Sets the width of the card in pixels. Range: 180px to 400px. Use this to control how much horizontal space each promotional card takes up within the mega menu panel.
Select a color scheme for this individual card. Use a different scheme from the parent mega menu to create visual contrast, or match it for a unified look.
The mega menu reads your Shopify navigation menu automatically — you do not need to manually enter links into the block. Understanding how your menu structure translates into columns and links will help you get the layout you want.
If a child menu item has its own nested items beneath it, the mega menu renders that child as a column heading with its nested items displayed as a list of links below it. This is the most common pattern — for example, a "Women" heading with links to "Dresses," "Tops," and "Accessories" below it.
If a child menu item has no nested items beneath it, the mega menu renders it as a standalone clickable link in its own column. This is useful for linking directly to a specific page like "Sale" or "Gift Cards."
Tip: You can mix both patterns within the same mega menu. Some columns can have grouped links under headings while others are standalone links — the layout adjusts automatically based on your menu structure.
The Mega Menu blocks include features that work automatically — no apps or custom code needed.
The mega menu automatically generates columns from your Shopify navigation structure. When you add or rearrange menu items in your Shopify admin, the mega menu updates to match — no need to edit the block itself.
Add one or more Menu Card blocks to display clickable promotional images alongside your link columns. Cards appear to the right of the navigation links and include a subtle zoom effect on hover.
Each Menu Card can display a button label overlaid on the image. When a visitor hovers over the card, the button inverts its colors for a polished interactive effect.
The mega menu panel fades in and out smoothly when a visitor hovers over the associated navigation item, providing a polished and professional feel.
Links within the mega menu automatically highlight the page the visitor is currently viewing, helping them understand where they are in your store's navigation.
Menu Card images automatically load at the appropriate size for the visitor's screen, keeping your store fast without sacrificing image quality.
On smaller screens, the mega menu layout adapts automatically. Link columns and promotional cards reflow to stack vertically so the content remains accessible and easy to read.
Online Store → Navigation. If there
are no child items, the mega menu will have no links to
display.
Online Store → Navigation in your
Shopify admin. The mega menu will update to reflect
your changes.