The Mega Menu is designed to give you as much versatility as you need, chances are you’re already familiar with Mega Menus thanks to Amazon and Wal-Mart.
These leading forces in e-commerce are the reason Mega Menus even exist and the conversion rates don’t lie. Mega Menus keep everything tidy, in one place, giving your customers a glance at your entire store in one click.
Use Megamenu – Toggles the Mega Menu on and off.
Use Default Collection Link – Select a collection here to display a selection of products on the Mega Menu Itself.
Display Title and Price Of Product in Default Collection – Toggles off these settings.
27 STEPS
1 The first step is to open your Shoptimized theme config and navigate to the mega menu settings.
![Step 1 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=1&width=800&height=600&mobile_width=450&mobile_height=400)
2 Use Megamenu – Toggles the Mega Menu on and off.
![Step 2 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=2&width=800&height=600&mobile_width=450&mobile_height=400)
3 Use legacy megamenu instead of new megamenu from sections, we suggest leaving this unchecked and configuring mega menus via sections for all new theme setups.
![Step 3 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=3&width=800&height=600&mobile_width=450&mobile_height=400)
4 Use Default Collection Link – Enable this if you would like to display a selection of products on the Mega Menu Itself.
![Step 4 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=4&width=800&height=600&mobile_width=450&mobile_height=400)
5 Display Title and Price Of Product in Default Collection – Toggles off these settings.
![Step 5 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=5&width=800&height=600&mobile_width=450&mobile_height=400)
6 Default collection on mega menu shown here.
![Step 6 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=6&width=800&height=600&mobile_width=450&mobile_height=400)
7 Change Background Color – Changes the background color of the Mega Menu itself.
![Step 7 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=7&width=800&height=600&mobile_width=450&mobile_height=400)
8 select color
![Step 8 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=8&width=800&height=600&mobile_width=450&mobile_height=400)
9 You can preview the background color when hovering over the mega menu.
![Step 9 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=9&width=800&height=600&mobile_width=450&mobile_height=400)
10 Select List Title Font Color – Changes the list title font color.
![Step 10 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=10&width=800&height=600&mobile_width=450&mobile_height=400)
11 Applied List title font color.
![Step 11 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=11&width=800&height=600&mobile_width=450&mobile_height=400)
12 Select List Title Font Size – Adjusts the title font size.
![Step 12 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=12&width=800&height=600&mobile_width=450&mobile_height=400)
13 Select List Title Font Style – Change the list font style. Lighter, Normal, Bold, and Bolder.
![Step 13 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=13&width=800&height=600&mobile_width=450&mobile_height=400)
14 Applied List Title Font and Size and List Title Font Style.
![Step 14 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=14&width=800&height=600&mobile_width=450&mobile_height=400)
15 Select Link Color – Changes the collection link color.
![Step 15 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=15&width=800&height=600&mobile_width=450&mobile_height=400)
16 Select Link Hover Color – Changes the collection link hover color.
![Step 16 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=16&width=800&height=600&mobile_width=450&mobile_height=400)
17 Select Link Font Size – Changes the collection link font size.
![Step 17 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=17&width=800&height=600&mobile_width=450&mobile_height=400)
18 Select Link Font Style – Changes the collection link font style.
![Step 18 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=18&width=800&height=600&mobile_width=450&mobile_height=400)
19 Applied Link color and Link Hover Color and link font size and font style.
![Step 19 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=19&width=800&height=600&mobile_width=450&mobile_height=400)
20 Select Custom Link Color – Changes the custom link color at the bottom of the Mega Menu.
![Step 20 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=20&width=800&height=600&mobile_width=450&mobile_height=400)
21 Select Custom Link Hover Color – Changes the custom link color at the bottom of the Mega Menu.
![Step 21 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=21&width=800&height=600&mobile_width=450&mobile_height=400)
22 select Custom Link Font Size – Changes the custom link font size at the bottom of the Mega Menu.
![Step 22 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=22&width=800&height=600&mobile_width=450&mobile_height=400)
23 select Custom Link Font Style – Change the custom link font style. Lighter, Normal, Bold, and Bolder.
![Step 23 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=23&width=800&height=600&mobile_width=450&mobile_height=400)
24 select Megamenu Line height – Adjusts spacing between Mega Menu categories.
![Step 24 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=24&width=800&height=600&mobile_width=450&mobile_height=400)
25 Put First Custom Link Heading
![Step 25 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=25&width=800&height=600&mobile_width=450&mobile_height=400)
26 First custom link goes here.
![Step 26 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=26&width=800&height=600&mobile_width=450&mobile_height=400)
27 Mega menu custom links.
![Step 27 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1606198&step_number=27&width=800&height=600&mobile_width=450&mobile_height=400)
Here's an interactive tutorial for the visual learners
https://www.iorad.com/player/1606198/Demostore---Mega-menu-settings
Look And Feel
Background Color – Changes the background color of the Mega Menu itself.
List Title Font Color – Changes the list title font color.
List Title Font Size – Adjusts the title font size.
List Title Font Style – Change the list font style. Lighter, Normal, Bold, and Bolder.
Link Color – Changes the collection link color.
Link Hover Color – Changes the collection link hover color.
Link Font Size – Changes the collection link font size.
Custom Link Color – Changes the custom link color at the bottom of the Mega Menu.
Custom Link Hover Color – Changes the custom link color at the bottom of the Mega Menu.
Custom Link Font Size – Changes the custom link font size at the bottom of the Mega Menu.
Custom Link Font Style – Change the custom link font style. Lighter, Normal, Bold, and Bolder.
Megamenu Spacing – Adjusts spacing between Mega Menu categories.
Custom Links – Custom links allow you to link to resources within your site or outside. They are optional and provided for your convenience. Tick or untick to enable or disable them.