Mega menu

The Mega Menu block lets you create expanded navigation for a chosen menu item.

Add a Mega Menu

  1. Open Header in the theme editor.
  2. Click Add block.
  3. Select Mega Menu.
  4. In Menu Item Name, enter the exact name of the top-level menu item.
  5. Choose whether the mega menu should be full width.
  6. Add promotional images, headings, text, and links if needed.
  7. Save.

Important

The Menu Item Name must match the menu item text exactly. For example, if your navigation item is Shop  , enter:

Shop

If the menu item is called Collections  , enter Collections  . Do not enter the URL, handle, or collection name unless that is the exact visible menu item text.

Mega Menu Block Settings

  • Menu Item Name: Connects the Mega Menu block to a top-level navigation item. When customers hover or open that navigation item, this mega menu content is shown.
  • Full width: Makes the mega menu span the available header/menu width. Use this for menus with many columns, large promotional images, or broad navigation groups. Leave it off for a smaller, more compact menu.

Mega Menu Promotion Settings

Each Mega Menu block includes two optional promotion areas. These are useful for highlighting important destinations inside the menu, such as a new collection, campaign, sale, lookbook, or Showcase page.

Promotion settings:

  • Image: The visual shown in the promotion area. Use this to draw attention to a collection, product range, campaign, or editorial page. For example, a New arrivals   promotion could use a lifestyle image from the newest collection.
  • Image ratio: Controls the crop shape of the promotion image. Use Square for an even promo tile, or Rectangle (3:4) for taller campaign images. If important parts of the image are being cropped, try the other ratio or upload an image with more space around the subject.
  • Heading: The main text for the promotion. Keep it short and action-oriented, such as New arrivals  , Explore the showcase  , Winter collection  , or Made to order  .
  • Text: Supporting copy below the heading. Use one short sentence to explain why customers should click. Example: Discover the latest furniture, lighting, and objects for the season.  
  • Link: The destination for the promotion. Link to the relevant collection, product, page, blog article, or Showcase collection.

Promotion Examples

Example for a collection:

Heading: New arrivals
Text: Fresh pieces for the season.
Link: New arrivals collection

Example for Showcase:

Heading: Showcase
Text: View current projects and visual studies.
Link: Showcase collection

Mega Menu Tips

  • Use promotions sparingly. One or two strong promotions are easier to scan than several competing messages.
  • Keep headings short so the menu stays clean on smaller screens.
  • Use images with similar crops across Promotion 1 and Promotion 2.
  • If the mega menu does not open, check that Menu Item Name exactly matches the top-level menu item.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.