How to create a mega menu?

This theme comes with mega menu support, and this instruction shows you how to setup the menu.

💡 Note: This article discusses the simplified mega menu, which has been a feature since the theme’s initial release. Starting with Concept v4.0.0, we introduced a new style called the Tabbed Mega Menu. For guidance on configuring the Tabbed Mega Menu, please refer to this article.

On this page

• The look of a mega menu
• Setting up mega menu
• Mega menu block settings

The look of a mega menu

• In Concept, you can create a mega menu in which its contents are arranged in columns, like this:

  

• The mega menu is a combination of two parts: menu items and promotions:

  

Setting up mega menu

1. First, you need to setup your menu in multiple levels by using the native Shopify navigation. To learn how to create menu in multiple levels (dropdown), please check out the official Shopify documentation. Below is an example of a menu structure to accommodate the mega menu in the very first screenshot:

   

2. In your theme settings, click Header in the section list, navigate to the Menu setting and choose the menu you just created above.

   

3. To continue setting up the mega menu, click Add Mega menu to add a mega menu block:

   

   • In the Mega menu setting, just type the name of the menu item that contains the mega-menu. Please note that the name entered in Menu item must match the name of the menu items. Here's an example in which the mega-menu is contained within the Shop item:

     

   • In the Menu item setting, you can optionally upload up to 5 images for different promotions. These images will be displayed in the mega menu banner.

     

     Here's an example of the Collections menu with 5 promotions:

     

   • Check the mega menu block settings for details.

Mega menu block settings

Section settings	Settings	Description
Mega menu
	Menu item	Enters the name of the menu item that you want to contain the mega menu. Please note that the name entered in Menu item must match the name of one of the first-level menu items.
	Show mega menu images	When a second level item of navigation links to a collection with an image, this will have the image displayed above the title of the link. Here's an example: Headphones second level item: This is because the Headphones item is linked to a collection that has image:
	Button label	The button text. Leaves the label blank to hide the button.
	Button link	The URL of the button.
Promotion
	Image	The image that you want to display.
	Image ratio	The image ratio for the blog post images: Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped. Square - Crops the images to 1:1 ratio. Portrait - Crops the images to 2:3 ratio. Landscape - Crops the images to 3:2 ratio. Wide - Crops the images to 16:9 ratio.
	Heading	The promotion title.
	Subtext	Promotion description text.
	Overlay text on image	Activates the Overlay text on image option. If this option is disabled, the text will be displayed below the image.
	Link	The URL that you want to link to.
	Tag	Your custom text that is displayed on a product page to provide additional information about the product.
	Text color	The color of the text.
	Overlay text color	The ovelay color of the text. Text overlay opacity can be set from 0 to 100%.

Need Further Assistance

If you encounter any issues or need additional help with your Concept theme, please reach out to our support guys via our Ticket System for assistance within 8 hours.

Scan the QR code below to join our WhatsApp community for updates, news, and announcements.

Join our community