What is a mega menu?
A mega menu is a navigation menu that neatly organizes many links and categories and is a great way to organize complicated menu structures. Using the correct menu layout will allow your customers to easily find the desired products or collections and should help with conversions.
Symmetry supports a full-width mega menu to provide customers with quick and easy storefront navigation. It offers both simple dropdown menus and full width menus with text and images.
How to set up a mega menu
Steps
- If you have not already done so, create a nested menu in the Shopify admin area Content > Menus. Read How to set up drop-down menus for more information. To create a mega menu like the screenshot above, ensure you have a Multi-Layer structure. Meaning you have heading layer 1, heading layer 2 & menu links inside layer 2.
- Be sure to create a three layer nested menu.
- Open the Theme Editor, and click on the Header section.
- Pick the main navigation menu in the Menu setting within the Navigation area of the settings.
- Choose the Menu alignment. Left, Center or Underneath. The alignment will switch to Underneath if the links do not fit beside the logo.
- Choose a Featured link. Enter the title of a link to highlight it in a different color, for example, 'Sale'. Separate with a comma and a space if more than one link is required (e.g. Sale, New in, Bestsellers) Set the color in Theme settings > Colors > Featured link color.
How to set up menu promotions
Two types of menu promotion can be created within your main navigation menu. These images are attached to individual menu items and can be used to draw attention to specific promotions.
Steps
- Open the Theme Editor, and in the Header Group open the Header section.
- Click Add block and select either a Small menu promotion or a Wide menu promotion. Combining small and wide promotions can create a rich, engaging navigation menu.
-
Wide menu promotions make use of the browser real estate. Use them to promote something special.
-
Small menu promotions are small adverts that sit within the navigation grid. Use them to promote new collections, sales or announcements. Choose a vertical column or carousel layout for small menu promotions on mobile using the Mobile navigation setting Enable carousel layout for menu promotions.
-
Small menu promotions can also be used to create an image-only navigation. Add a single level heading link (e.g. BRANDS) in your menu (managed in the Shopify admin Content > Menus), and set up four small menu promotion blocks for that heading link.
How to set up the mobile menu
Symmetry offers the possibility of a distinct mobile menu to ensure an uncluttered and sleek design on smaller screens. The theme also includes settings to control the mobile menu link behaviour, crucial to guide customers quickly through your store. Further customize the mobile experience by showing additional featured products at the bottom of the mobile menu.
Steps
- Open the Theme Editor, and click on the Header section.
- To show a different menu to customers using mobile devices, pick a Mobile menu within the Mobile navigation area of the settings. To create a new menu go to the Shopify admin area and choose Content > Menus > Add menu. If no menu is added here then the main Menu selected in the settings above will be used.
- Control the mobile navigation behaviour for parent links using the setting Enable parent link to open dropdown menu. (versions after 7.0.0) A 'parent link' is a link which has links nested underneath it. Choose whether tapping this link on mobile will open the next layer of the menu or be used for navigation to another page. Tapping the arrow next to the link will always open the next menu layer.
- A carousel of featured products can be shown under the mobile menu links. Create a single layer menu containing direct links to products by going to the Shopify admin area and choosing Content > Menus > Add menu. Select Enable featured products and choose the Featured products title. A great way to highlight some best sellers or sale items directly in your mobile navigation.
- Additional quick links added in the announcement bar will be shown at the bottom of the mobile menu. Refer to the announcement bar guide.
FAQs
Why are my menu promotions not showing?
Make sure to enter the exact name of your top-level link, in the link name input.
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 Link name in the menu promotion block matches the menu item 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 Link name matches the translated menu item. In this way the system can pair the menu promotion block to the correct top level menu item.
Why is my active link underline showing on more than one link?
Your main navigation menu will show an underline beneath the active link or when it is hovered over. The only other instance when an underline appears is when the assigned URL points to your home page. As an example, the navigation items in the below screenshot all point to the homepage:
Tip
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