Mega menu

Neatly organize complex menu structures.

What is a mega menu?

A mega menu is a navigation system that organizes large numbers of links and categories into a clean, structured layout. It’s an effective way to simplify and present complex store menus. Using the correct menu layout will enable customers to find their desired product ranges quickly and should help with conversions.

In addition to a simple inline dropdown menu, Alchemy offers a full width column mega menu and a drawer menu for desktop. Mobile devices and smaller screens will always use a drawer menu. 

How to set up the menu

The Alchemy theme offers three types of menu:

  • An inline menu with simple dropdowns.
  • A full width inline mega menu with columns and images. The theme automatically uses this full width mega menu style when menus have three layers of nested links. 
  • A drawer menu which can be used on larger screens and is always used on mobile. Use large typography and promotional images to create a bold layout. 

Tip

In the Alchemy theme, the menu will always revert to a menu drawer if there is insufficient space to show the links inline.

How to set up an inline dropdown menu

Select Show inline menu to use this layout. Two level menus will be shown as simple dropdowns on larger screens. Menus are managed in Shopify's admin area Content > Menus. (Read How to set up drop-down menus for more.) This menu is best used for a simple menu with a small number of links. 

Alchemy-simple-menu.png

How to set up a full width mega menu

In a mega menu links are shown in columns. To create a full width menu menu ensure your menu link has three nested levels. Create the menu in Shopify's admin area under Content > Menus. (Read How to set up drop-down menus for more.)

Steps

  1. Create a three layer nested menu in the Shopify admin area Content > Menus. A three layer menu has a top link, second level links which will be displayed as column headings, and third level links. 
  2. Open the Theme Editor, and click on the Header section.
  3. In the Navigation settings, select the menu to be used in the Menu setting.
  4. Set the menu type to show a horizontal row of links by choosing Show inline menu. The inline menu will appear on the left or it can be centered if the Logo sits to the left using the Align left when inline menu visible setting.
  5. Set the Font size for the inline menu.
  6. Configure the Contact Information settings. Select Show in mega menus to show links at the bottom of the inline mega menu. Social account links are managed in Theme settings > Social media.

Tip

This menu will not wrap onto two lines on a smaller screen but instead, will be replaced with the drawer menu.
Column mega menu in alchemy

How to set up the drawer menu

Alchemy has a drawer menu which is used on mobile and when an inline row of links won't fit in the space available. It can also be selected as the default menu for larger screens. 

Steps

  1. Create a menu in the Shopify admin area Content > Menus. (Read How to set up drop-down menus for more.)
  2. Open the Theme Editor, and click on the Header section.
  3. In the Navigation settings, select the menu to be used in the Menu setting.
  4. Deselect Show inline menu.
  5. Set the Font size for the drawer menu. This will apply on large screens.
  6. Configure the Contact Information settings to show additional information at the bottom of the menu drawer. Social account links are managed in Theme settings > Social media.
  7. Choose whether to show the Country/Region selector and the Language selector in the menu drawer. 

Tip

Experiment with larger font sizes for greater impact.

Weave-menu.png

How to set up menu promotions

Draw attention to linked menu items by showcasing eye-catching images in your navigation menu. 

Steps

  1. Expand the Header section. To add a promotion click Add menu promotion. 
    menu-promo-alchemy.png
  2. In the Menu promotion settings, add the Menu item, which should be an exact copy of any top level link in the menu. e.g. 'Shop'. 
  3. In Details, add the Image and Heading, Link text and Link URL as required.
  4. Add an image Overlay tint if this helps the text to remain legible over the image. 

Tip

It is recommended to add no more than one or two menu promotion images for each menu. Be sure to choose a consistent shape and check the amount of overlay text is appropriate for the image size. 

Main menu inline - with images - Alchemy  Mobile menu drawer - with images - Alchemy

FAQs

How do I set up a transparent header?

Refer to our Header guide for more information about setting up the header.

Why are my menu promotions not showing?

Make sure to enter the exact name of your top-level link, in the link name input Where to show. Be sure to check the text entered in the Menu item setting matches the menu item exactly. Check for spaces or additional characters.

My store has multiple languages, can I still show menu promotions?

Yes. If you are using a translation app, check that the translation for the Menu item in the menu promotion block matches the menu link name exactly. It may be necessary to review or refresh the translations in your app. Alternatively, add a menu promotion block for each language ensuring that the Menu item matches the translated menu link. In this way the theme can pair the menu promotion block to the correct top level menu item.

How do I center an inline menu?

In the Logo settings of the Header section select Align left when inline menu visible to move the logo to the left and center the navigation. 

Bring your business ideas to life with Shopify

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!

Contact us