Mega Menu Settings

Summary of the mega menu settings (these settings affect the functionality of all of the mega menu's) - Includes options for look and feel.
Written by Jonathan Diaz
Updated 3 months ago

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

2 Use Megamenu – Toggles the Mega Menu on and off.

Step 2 image

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

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

5 Display Title and Price Of Product in Default Collection – Toggles off these settings. 

Step 5 image

6 Default collection on mega menu shown here.

Step 6 image

7 Change Background Color – Changes the background color of the Mega Menu itself.

Step 7 image

8 select color

Step 8 image

9 You can preview the background color when hovering over the mega menu.


Step 9 image

10 Select List Title Font Color – Changes the list title font color.

Step 10 image

11 Applied List title font color.

Step 11 image

12 Select List Title Font Size – Adjusts the title font size.

Step 12 image

13 Select List Title Font Style – Change the list font style. Lighter, Normal, Bold, and Bolder.

Step 13 image

14 Applied List Title Font and Size and List Title Font Style.

Step 14 image

15 Select Link Color – Changes the collection link color.

Step 15 image

16 Select Link Hover Color – Changes the collection link hover color.

Step 16 image

17 Select Link Font Size – Changes the collection link font size.

Step 17 image

18 Select Link Font Style – Changes the collection link font style.

Step 18 image

19 Applied Link color and Link Hover Color and link font size and font style.

Step 19 image

20 Select Custom Link Color – Changes the custom link color at the bottom of the Mega Menu.

Step 20 image

21 Select Custom Link Hover Color – Changes the custom link color at the bottom of the Mega Menu.

Step 21 image

22 select Custom Link Font Size – Changes the custom link font size at the bottom of the Mega Menu.

Step 22 image

23 select Custom Link Font Style – Change the custom link font style. Lighter, Normal, Bold, and Bolder.

Step 23 image

24 select Megamenu Line height – Adjusts spacing between Mega Menu categories.

Step 24 image

25 Put First Custom Link Heading

Step 25 image

26 First custom link goes here.

Step 26 image

27 Mega menu custom links.

Step 27 image

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.

Did this answer your question?