How to create a mega menu by drag & drop for your online store using the free Shopify app
As you all know, a mega menu is a category menu that can be displayed either horizontally or vertically on your website. Large menus will have submenus, and submenus will have corresponding headings. You can also add to your mega menu not only links but also images, videos, and many other great things. Because of that great feature, more and more stores want to add it to some of their stores to make their store look more impressive. In the previous article, I introduced the best Mega Menu apps, and now, I will show you how to install this application in more detail through the Mega Menu Pro app. Mega Menu Pro is a visual, drag and drop, fully customizable, and responsive menu builder for Shopify. This app supports different content types for the menu and enables you to create an amazing mobile menu with a smooth browsing experience. Let’s install and enjoy the benefits that it brings.
To download the application, you must first log in to the Shopify Apps Store, search for the application name Mega Menu Pro, then click Add App. Then you can see the app permission window. Here click on the Install app button. After that, the app will be installed in your store.
After successful installation, you can go to the app dashboard to set up the configuration. In this section, I will guide you on how to add a new menu to your online store. The developer has optimized Mega Menu Pro with a user-friendly interface to help you easily create an eye-catching mega menu.
Step 1: From the Mega Menu Pro app’s menu window, click on Add new menu button.
Step 2: On Add menu pop-up, select the menu you want to add.
The Basic menu section includes 6 menu templates for the horizontal menu. Similarly, the Tab menu section includes 6 menu templates for the vertical menu.
Menu templates and Tab templates provide 12 pre-made mega menu templates with demo data. You can select the pre-made mega menu and then customize it as you want.
Step 3: After a new menu has been added, on the sidebar you will find the general settings for the new menu.
Similar to the basic menu, you can customize the general settings after adding a new tab menu.
Click the Save button to save your newly added menu.
2. Add a new column
After creating a new menu, we will start adding menu columns. Each menu is built from one or several columns, you can customize the number of columns and their width size.
From the Mega Menu Pro app menu window, select the menu you want to add a new column.
Click Add new column button under the menu item to create a new column. There are 12 columns available for each menu.
Hover your mouse pointer over the column then click on the Edit icon to customize column width. You can also duplicate or delete a column.
3. Add a new block
Let’s fill different contents into your menu. Each content will be contained in a block. Mega Menu Pro allows you to add 8 types of blocks into your mega menu:
- Text/HTML
- Image
- Collections
- Pages
- Blog
- Blog posts
- Products
- Contact form
Click Add block button on each column to add a new block. You can duplicate, edit or delete a block. You can drag and drop any block to your preferred position.
Mega Menu Pro app provides a lot of design options to enable you to customize your mega menu and make it compatible with your current theme.
- Fonts: On this tab, you can select a different font and font size for a specific menu element
- Colors: Similar to Fonts, you can also pick a color for different menu elements
- Transition: Select a transition effect you want to apply to your mega menu. Mega Menu Pro app supports 4 types of transition effects: default (none), slide down, scale down, zoom in.
- Mobile: Mega Menu Pro app provides 4 mobile menu types to display your mega menu on mobile devices.
Thanks to Mega Menu Pro, you can quickly create a mega menu within minutes with the live editor, manage menu elements, change menu layout, color, font, background, etc. as you wish, and showcase your products, promote events to get more sales. Don’t miss this great opportunity to increase sales for your store.
