Foodly theme allows creating not just simple dropdowns but mega menu for collections. This article is about Visually Enriched Mega Menu with special areas for images or icons.
Note! To use this type of menu, you need to set up collections of the store. Before you jump on creating this menu, please, check our instructions how to create a collection and customize it. Also, keep in mind that max number of collections for this menu is 4 collections.
When everything is set up with collections it's time to go through the following steps to add an appealing mega menu to your store navigation.
The main steps to go through to add Visually Enriched Mega Menu:
- Go to Online Store > Navigation
- Click on 'Main menu' to add an extra main menu item. If you already have an item for the Mega Menudropdown skip this step and next step.
- Click on Add menu item button of the Online Store > Navigation > Main menu page
- Type in the name of new Main menu item which will trigger Mega Menu dropdown. For instance new Main menu item name is "Mega Menu". Click Add button to save new Main menu item.
- After adding new Main menu item save changes in Main menu and go back to Navigation.
- Click on 'Add menu' button in the top right corner of the Online Store > Navigation
- Type in a title of a new menu. It should be exactly the same as the one in the Main menu item. For instance "Mega Menu".
- Add menu items as many as you need. Max is 4. Make sure to save new Menu.
- The last adjustment should be done in Theme Editor. Navigate to Online Store > Themes > Customize theme > Sections > Header
- In 'Main menu item' dropdown list, choose a menu item that was created or assigned earlier in step 4
- After all these steps you might see the mega menu in the main navigation of your store.
- To add images and description text to the mega menu, navigate to Products > Collections.
- Open the one you assigned to mega menu item and type in copy into description field and upload image in the right pane. This information will be automatically pulled into Visually Enriched Mega Menu. Note! There is word amount restriction. To keep layout stick together and ensure the proper look and feel, the max number of words is 25 words to be displayed in the description. If a copy is longer than that it'll be truncated.
- In the result of all these steps, mega menu will look similar to this
If you have any suggestions on this matter don't hesitate and leave your thoughts in the comments bellow 📬 If there are any questions regarding your own store please submit a support request 🚑