To install Navigation with Mega Menu for website. You must first initialize the Main Menu. After logging in to Shopify's Shop Dashboard you can go to the Online Store> Navigation > Add menu.
Refer to the instructions at https://help.shopify.com/manual/sell-online/online-store/menus-and-links.
For example, on the product demo, we created three navigation menus: Features (Mega Menu 1), Perfume (Mega Menu 2), Blog (Mega Menu 3). Each of this navigation will be used for each mega menu in the next section
Demo: https://perfomy-theme.myshopify.com/
Step 1. Creat Main Menu
- Add 3 Drop-down Menu: Features, Perfume, Blog. More detail about Add drop-down menu could found here: https://help.shopify.com/manual/sell-online/online-store/menus-and-links#create-a-drop-down-menu
Sub-menu: Mega Menu 1, Mega Menu 2, Mega Menu 3 will not display when you enable Mega Menu so you could link it to anywhere you want (May be Homepage)
- Go to Online Store > Theme > Customize Theme. At General Setting > Header Go to NAVIGATION - MENU select Main menu for your website
Step 2. Creat Mega Menu Navigation
- Create new Navigation use the same name as Mega Navigation 1: Features; Mega Navigation 2: Perfume; Mega Navigation 3: Blog.
The configuration in the form as follows:
- Go to Customize Theme > General settings > Mega Menu to enable Mega Menu option
- You have 3 Mega Menus: Mega Menu #1, Mega Menu #2 & Mega Menu #3 (May vary depending on the theme you purchase)
Step 3. Add Mega Menu (Navigation) Content
Follow the steps below to setup Mega Menu :
- Go to Mega Menu #1 (or Mega Menu #2, #3) > Menu item and select the Mega Menu Navigation which you created in Step 2
- Each Megamenu will consist of 2 blocks (2 rows). Each block will have a width divided into 12 grid columns.
- The content of Block 1 supports splitting up to 4 columns supporting the display of link menus (menu item, multiple menu items refer https://help.shopify.com/manual/sell-online/online-store/menus-and-link), Product items link, or image with a link.
- The content of Block 2 supports up to 2 columns, supports image display with link Depending on the mega menu structure you want to set, you can customize the width of the columns to your liking (3/12, 4/12, 6/12, etc ...).
- Setting Content
- For each Mega Menu, you can have up to 4 columns
- Each column, you can choose the Content Components and input the width for this column. The Content Components are
- Menu item
- Multiple menu items
- Product item
- Image
- None.
- IF Content Components is Menu item
- Step 1: Go to Navigation > click Add menu to create a menu which you want to set is Mega Menu
- Step 2: If you choose the Content Components is Menu item, please input a title in the Title field and choose a menu item in the Menu item field.
- IF Content Components is Multiple menu items
- If you choose the Content Components is Multiple menu items, you need to create an intermediate menu. With intermediate menu, you can use a lot of menus in a column. For example, you want to display 2 menu items: "Page Templates" and "Collection Templates" in a column
- Step 1: Go to Navigation > click Add menu to create 2 Menus with names are Page Templates and Collection Templates
- If you choose the Content Components is Multiple menu items, you need to create an intermediate menu. With intermediate menu, you can use a lot of menus in a column. For example, you want to display 2 menu items: "Page Templates" and "Collection Templates" in a column
- Step 2: Go to Navigation > click Add menu to create the intermediate menu with a name such as Megamenu-Col4. It contains 2 menus: Pages Templates, Collection Templates
- IF Content Components is Product item
- If you choose the Content Components is Product item, please input title in the Title field and choose a product item in the Product item field.
IF Content Components is Image
- If you choose the Content Components is Image, please input a title in the Title field, an image in the Image item field and link in the Image link field.
