Homepage → Shoptimized Theme → Header & Menu → Mega Menu Setup

Mega Menu Setup

Learn how to configure the multiple mega menus that the theme supports.
Written by Jonathan Diaz
Updated 2 months ago

Setting up your mega menu is as easy as 1, 2, 3! You can have up to 8 mega menus displaying on your store. Use what makes sense for your store. Don’t worry, it looks scary, but it’s actually very simple!

Each mega menu supports up to 9 navigations, you must first create the navigations in the back end of Shopify, you'll find the section in Online Store > Navigation. An example of a navigation could be 'Men's Clothing' that contains Jeans, Shirts, Shorts Collections. Another nav might be 'Women's Clothing' with the relevant women's clothing collections under it.

After you have created the navigations, simply link them inside of your chosen mega menu. 

14 STEPS


1 The first step is to open your Shoptimized sections and navigate to the Menu section.

Step 1 image

2 Now scroll down and enable Use Megamenu.

Step 2 image

3 Custom links can be added to the mega menu by selecting this option here. Add the links in the corresponding entry fields below.

Step 3 image

4 Click here to begin the configuration of the first mega menu. 

Step 4 image

5 Now click enable Megamenu.

Step 5 image

6 Give your mega menu a name in the 'Menu Text' box, you can also include a link for your mega menu heading if you so wish to do so.
Scroll down and click Select collection to pick your mega menus default collections.

Step 6 image

7 Click Select menu

Step 7 image

8 Next select the navigations in the order you would like to display them on your mega menu.

Step 8 image

9 Repeat the process of adding navigations to your mega menu.

Step 9 image

10 You can also add Icons to your navigations as indicated here.

Step 10 image

11 With your mouse, hover Shop to preview the navigations with icons if you included them.

Step 11 image

12 By selecting a default collection you can display promotional products on the mega menu itself.  

Step 12 image

13 With your mouse, hover Shop

Step 13 image

14 Default collection shown here.

Step 14 image

Here's an interactive tutorial for the visual learners

https://www.iorad.com/player/1615495/Demostore-Mega-menu-setup

Menu Text – Here is where you put your menu title. This affects the Menu label itself. You will see “Mega Menu Demo” change yours to fit your store. Ex: “Store Menu”.

Submenus – Submenus are the collections you link to. Just click “Select Menu” and choose the navigation you wish to display in your mega menu.

Mega Menu Icon – You’re free to change icons to your own custom icons if you wish. Icons must be 75×75 pixels or less.

Did this answer your question?
close-image
full-image