What is a mega menu?
A mega menu is a navigational tool that organizes a large number of links and categories efficiently, making it ideal for structuring complex menus. Use mega menus for some of the top menu links in your store. The right type of mega menu can help customers to find the products or collections that they are looking for quickly, which may ultimately boost conversions.
Beautify offers four distinctive types of mega menu block, each designed to enhance user navigation and improve the overall store experience. In addition, Beautify provides the ability to feature promotional images which can be used to highlight many aspects, such as special offers, key products, important pages or simply showcase beautiful product imagery.
What are the four types of mega menu?
In addition to a standard Shopify menu which can show up to three menu tiers, Beautify provides four types of mega menu:
- Columns menu - Three tier column layout, where the second tier is the column heading
- Collection tabs menu - Two tier menu designed for links to collections, where products cards are shown in tabs
- Collection cards menu - Two tier menu of collection cards
- Promos menu - Images with links
Use all of the mega menu types, or just one. Beautify has the flexibility to create different menu styles to suit any store.
Menu: Columns
The Columns mega menu features a traditional layout with images and columns of links. For best results, the menu link chosen for a columns menu should be a three tier menu. The second tier will be a clickable heading, and can show collection images if it contains links to collections. The third tier will be shown as a column of links. Two additional promotional images can also be shown in the menu.
Tip
In the example image, the second menu tier contains links to a variety of collections (e.g. Best Sellers, New, Lips) and the third menu tier contains links to products from those collections.
How to add a Columns menu
Steps
- In the Header section, use one of the existing blocks or select Add block under the Header section and choose Menu: Columns
- Assign the Columns mega menu to a link in the main menu by entering the name of a top level link into the Link name setting. The link chosen should have three tiers.
- If the second tier contains links to collections, select Show column heading images to show the collection image at the top of each column and select a Collection image source and Image aspect ratio.
- To show additional promotional images and links, go to the Promotions setting and select an Image aspect ratio. Under the Promotion 1 settings, select an Image, input optional text and links. If desired, repeat the process for the Promotion 2 settings.
Menu: Collection tabs
This menu is designed to show collections and their products. Each collection is displayed as a separate tab. Clicking a collection name will change the tab and the products that are shown.
The menu link chosen for a Collection tabs menu should follow a two tier structure. The second tier must contain links to collections. Product cards are shown automatically.
Tip
In the example image, the top tier is Cosmetics and the second tier contains links to a variety of cosmetics collections (e.g. Face, Lips, Eyes & Brows). Product cards showing the first products in these collections are displayed automatically.
How to add a Collection tabs menu
Steps
- In the Header section, use one of the existing blocks or click Add block and add the Menu: Collection tabs block.
- Assign the Collection tabs mega menu to a top level link in the main menu by entering the name of that link into the Link name setting. The menu link chosen for a collection tabs menu must be a two tier menu which contains links to collections.
- Choose the number of Rows of product cards to show. Only select Show cutout cards for collections where the product images have a transparent background and are suitable for the cutout card layout.
- In the Promotions setting, select an Image aspect ratio.
- Go to the Promotion in tab 1 settings, select an Image, input optional text and choose from several formatting options available. This promotion will show when customers click on the first tab in the menu.
- Go to the Promotion in tab 2 settings, select an Image, input optional text and choose from several formatting options available. This promotion will show when customers click on the second tab in the menu.
- A maximum of five promotions can be added, so repeat the above process for Promotion in tab 3, Promotion in tab 4 and Promotion in tab 5.
Tip
Menu: Collection cards
The menu link chosen for a Collection cards menu must follow a two-tier structure, containing links to collections. This menu displays second-level links as collection cards, making it ideal for showcasing a large number of collections at a glance. If you need to display third-level links, consider using a standard three tier Shopify menu or the Columns mega menu instead.
The menu link chosen for a Collection cards menu should follow a two tier structure. The second tier must link to collections.
How to add a Collection cards menu
Steps
- In the Header section, select Add block under the Header section and choose Menu: Collection cards
- Assign the Collection cards mega menu to a top level link in the main menu by entering the name of that link into the Link name setting. The menu link chosen for a collection cards menu must be a two tier menu which contains links to collections.
- In Cards, select the Card style to determine how the collection name is shown and whether the product count is displayed.
Tip
Menu: Promos
The Beautify Promos menu shows up to five promotional images with links. Add quick links to certain products, collections, or highlight special sales. This menu can be particularly effective when used on a top level link that doesn't have a dropdown. This makes it possible to create a simple image-only navigation.
How to add a Promos menu
Steps
- In the Header section, click Add block and add the Menu: Promos block.
- Assign the mega menu to a one tier link in the main menu by entering the name of that link into the Link name setting. The promos menu can work well on a top level link without dropdowns.
- In the Promotions setting, select an Image aspect ratio. This will apply to all the images.
- Select an Image and add a Link for up to five promotions. Add text or a button and use the position and alignment options available to arrange the content.
- Select a Color scheme for each promotion and choose whether to tint the image to improve legibility.
FAQs
Why isn’t my mega menu showing?
Double check that the link name you’ve entered exactly matches the name of the top level link as it appears in the Content > Menus page of the Shopify admin area. Sometimes link names could have a space at the end or beginning which would need to be reflected in the theme settings.
My store has multiple languages, can I still use mega menus?
Add a block for each language ensuring that the Link name matches the translated menu link. In this way the system can pair the Menu block to the correct top level menu item.
How can I use a different image for a collection?
An image metafield with the namespace and key theme.icon can be used in the mega menu of type Menu: Columns. Promotional images can also be used as an alternative way to add an image that links through to a collection.
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