Mega menu

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on the mega menu block
3. Company XYZ documentation on using video
4. Company XYZ documentation on icons
5. Company XYZ documentation on banner colors settings
6. Shopify documentation on the theme editor
7. Company XYZ documentation on visibility settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this block to turn one top-level navigation item into a large dropdown with grouped links and optional promotional content. It is a good fit when your header needs to surface many destinations without feeling cramped, and you can add multiple Mega menu blocks to build out a broader navigation system. For a broader overview of theme structure, see Shopify documentation on sections and blocks. See the Mega menu reference for additional setup guidance.

Note

On mobile, Menu and Mega menu blocks are combined into a single navigation interface. Review the full mobile navigation after adding or renaming blocks so the combined result still feels clear.

Core settings

Core settings define the top-level label, the menu it opens, and whether extra navigation aids or promotional content appear.

Set the Title to the label customers should see in the header, then choose the Menu that should open from that item. You can also enable a banner, a features bar, and “view all” buttons for sub-menus when you want the dropdown to guide shoppers toward broader category pages instead of only deeper links.

Tip

“View all” buttons work best when sub-menus represent major categories or campaigns. They give customers a clear path to the parent destination without forcing a narrow choice first.

Alignment settings

These settings fine-tune how content sits within the available space on desktop. They matter most when the block is stretched wider or uses a more expansive layout.

If alignment changes seem minor, check the layout settings first. Layout choices determine how much space the block gets, and alignment usually acts as a secondary adjustment within that space.

Layout settings

Layout settings control how much horizontal room the block takes in the header and where it sits on desktop.

Use Fill available space when you want this block to expand and help balance the header row. Choose the desktop layout that best matches your overall header structure, especially if you want this navigation item to feel more centered or span more width.

Review layout and alignment together. A full-width or stretched layout can change the visual balance of the whole header, not just this block.

Banner background

If you enable the banner, this group controls the media shown behind it. You can use an image or video, plus separate mobile media when the desktop asset does not crop or scale well on smaller screens.

Use Cover for immersive visuals and Contain when the full image needs to stay visible. Keep banner backgrounds simple enough that the navigation still feels easy to scan.

For video setup guidance, see using video.

Caution

Heavy or busy background media can make navigation harder to use. If the banner competes with the links, simplify the media or strengthen the overlay.

Banner foreground

This group controls the content layered over the banner background, including text, icons, and the main button. Any fields left blank are simply not shown, so it is easy to keep the banner minimal.

Use the alignment controls to position content where it reads best over your chosen media. Short headings and concise supporting text usually work better here than long promotional copy.

You can add an emoji or supported icon name for the icon and button icon fields. For naming help, see the icon guide.

Choose a button style and layout that support the banner rather than dominating it. If you use a full-block link style, links inside the subheading are removed, so that option is best when the whole banner should act as one clear destination.

Treat the banner as a quick promotional assist, not a second navigation system. If you add a strong message and a button, keep the surrounding menu structure especially clean.

Banner foreground media

This group adds an image on top of the banner content area, separate from the background. It is useful for logos, product cutouts, or small supporting artwork.

Adjust the image style and maximum width so the media supports the message without overpowering it. Full-width foreground media can work, but it needs extra care in a navigation context because it can quickly dominate the dropdown.

If you add a link to the media, make sure it does not compete with the main button or full-block banner link behavior.

Banner colors

These settings override the broader banner color choices for this block only. Use them when this mega menu needs its own campaign styling or when your selected media needs stronger contrast support.

Overlay settings are often the most useful place to start, since a better overlay can improve readability without forcing you to recolor every text element. For more guidance, see Banner colors.

Standard block settings

Visibility settings

Use visibility controls to show this block on desktop, mobile, or both. This is most helpful when you are building different navigation patterns for different screen sizes.

Because mobile combines menu styles into one interface, make sure any device-specific visibility choices still leave customers with a complete and understandable set of navigation paths. For editor-specific setup details, see Shopify documentation on the theme editor. More detail is available in Visibility settings.

Usage notes

1. Keep labels familiar. Use short, clear top-level titles so customers can predict what kind of links each dropdown contains.
2. Check both viewports. Review the desktop and mobile results after changing layout, alignment, visibility, or media, since each can behave differently.
3. Use fallback styling intentionally. Blank or default-style colors usually preserve the surrounding design, while explicit colors, gradients, or media make the block feel more independent.
4. Protect readability. When using image or video backgrounds, adjust overlay, colors, and copy length so links and calls to action remain easy to scan.
5. Limit competing clicks. If the banner includes a button, linked media, or full-block linking, make sure there is still one obvious primary action.