Foodly theme allows creating not just simple dropdowns but mega menus of two types 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. We recorded a screen for you to show how to enable megamenu. Have a look.
Also, there is an article provided by Shopify how to enable dropdowns, it includes a supporting video.
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 with dropdown and choose All collections from the dropdown list. If you already have an item for the dropdown skip this step
- Click on 'Add menu' button in the top right corner of the Online Store > Navigation
- Type in the name of the mega menu item. It should be exactly the same as the one in the Main menu
- Add menu items as many as you need
- 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.
- 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 2
- 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 🚑