Safe as Milk themes can be customized with a multi-column, nested navigation (Mega Navigation). This allows links from your main menu to trigger a multi-column mega navigation. Customers will find it easier to navigate your online store if you group products, collections or pages together.
To promote specific products, collections or landing pages, you can add text and an image to your Mega Navigation.
Headings cannot be clicked
NB The first links/headings will not be clickable if there are sub links. If they do not have sub links, they will still be clickable. It’s because clicking the first link on mobile view would be frustrating. The user might think they are opening a sub-menu, but the trigger/header link would open a collection page. Sub menus would not be possible.
Tip: Make the first link into an “everything” type link. For example, if your header is titled ‘Tees and knits’ then create the first link ‘All Tees & Knits’. Then add the rest of the tees-and-knits sub links below it. You can see that in action here https://venue-theme-morning.myshopify.com/
Create a nested menu within the admin
- Head to the navigation area of your Shopify admin https://myshopify.com/admin/menus
- You can create a new menu named ‘My MegaNav’ or something similar, or edit an existing one.
- Use the editor to add your most important links into the new My Mega Nav’ menu. These links are typically: ‘Store’?About us? ‘Blog’ ‘Contact us’. Refer to this page for more information on menus.
- Select one of the following menu items as the header/trigger in your Mega navigation menu: Usually, ‘Store’ is used.
- To add menu items to the new Store’ drop-down menu, click ‘Add menu item’. Click on ‘Add menu items’ to enter the name and select a destination.
- Click and drag menu items to nest under that header item (see GIF below).
- Select Save menu
Add your new nested menus to your store
- Head to the themes area of your Shopify admin https://myshopify.com/admin/themes
- To open the theme editor, click the Customize link
- Click on the Section Header on the panel to the left.
- Select the menu area and the dropdown that you have created. In this instance, it is ‘My MegaNav’
- Click the checkbox to enable the Mega Navigation function (see image below).
- To save your changes, click the Save link
- Make sure the dropdown works as it should.
Add image and text to your multicolumn nested Menu
To promote specific products, collections or landing pages, you can add text and images to your Mega Navigation. You can see that in action here https://venue-theme-morning.myshopify.com/
There are many options.
- Image recommended at 600px. This is great for “Sale” style graphics
- Image link – The whole image can be turned into a clickable hyperlink
- Heading – To make it look like a blog post, you can add a heading to the image below.
- Text – As Above
- Link label – You can add a link to a page with an arrow and a style text link in ‘Learn More’.
- Link – Where you want the link text to be.
A sample of menu structure
The mega navigation that you can see that in action here https://venue-theme-morning.myshopify.com/ was created like this in the admin.
A website with an eCommerce store will benefit from effective navigation in two ways. It helps organize products and collections, and it makes it easier to locate them for customers. Shopify’s drop-down menu can be an effective solution to problems that often occur in shops with thousands or hundreds of products.
Shopify must offer a simple way to create a responsive menu that is easy to navigate. You can easily organize your products in an intuitive and smart way with Shopify. This will improve the usability of your eCommerce website and appeal to your target audience.
How do you use Shopify’s menu and its features? What prospects can you show when you use the right eCommerce menu design Let’s find out how Shopify stores can make use of the drop-down menu and which themes support it.
All eyes on mega menu
You can create a large, user-friendly Shopify store by using several methods. These products are easily accessible from one Shopify mega-menu without any usability issues.
Shopify’s mega menu offers many options. By reducing the number of clicks, site visitors can quickly reach lower-level products. What are the other benefits of the Shopify multilevel menu?
- Shopify allows you to nest multiple products under different sub-menu sections.
- You can easily merchandise products by placing them on the top of Shopify’s multi-level menu. You can group the items under “Best Sellers” or “Newest Products em>
- Shopify’s drop-down menu can be set up and modified without the need for a technician.
- Shopify allows for a sidebar menu as well horizontal navigation bars. These help tidy up the layout.
A Shopify multi-level dropdown menu with Shopify’s search function makes it intuitive and simple to use. A multi-level Shopify menu is a better choice than Shopify’s generic links lists, which can lead to confusion for users. Let’s take a look at the basics of creating mega menus and their peculiarities, based on Shopify’s current theme.
How to create a drop down menu in Shopify
It is important to learn how Shopify adds drop-down menus. You can add a top-level item in the navigation link to the main menu. The platform displays submenus links at lower levels in a drop-down list. Users can hover over the main menu to navigate to the desired level.
This type of navigation, also known as “nesting”, can be used to create a mega menu in Shopify. It can have up two levels following the top-level. Set up multiple link lists in the Shopify admin’s Navigation section to create a nested dropdown menu.
This type of content organization can be very effective if you know how to set it up. Let’s take a look at the essential steps to create a mega menu on Shopify.
1. Start with the right topic
Shopify’s drop-down menu is the best place to start your search. While some themes permit multi-layered navigation, others do not.
It is important to choose the right theme from the Shopify theme shop. This will reduce friction when you develop your own drop-down menu design. Each theme is unique in its submenus, with different layouts and visibility preferences. Navigation on tablets and mobile phones is not always possible. To get a better understanding of all the features, it is recommended to test the theme.
2. Choose the correct naming
Any user who wishes to view your online store’s inventory will see the name of the top-level navigation element. The name of the top-level element in the navigational canvas acts as the title for the entire subset of products. It is important to remember that it is very important. Keep it simple and don’t use industry-specific information.
You may have products that fall under multiple categories. These categories should contain relevant information that does not create ambiguity. Do not duplicate options as they can confuse users.
3. Keep the drop-down menu brief
Browsers will have a difficult time scrolling through pages that require scanning. It is better to have as few options in your Shopify drop-down menu as possible. Too many sub-categories can hinder usability and make your products look cluttered. It may be beneficial to group similar items into larger collections. It is important to adjust the Shopify mobile menu to fit different screen sizes due to the popularity of mobile shopping. Shopify themes that support two-row columns can also be used by mobile customers.
These steps, which show how to create subcategories within Shopify, work best when combined with some design guidelines for a drop down menu.
Guidelines for Shopify Sub-Collections
- Mobile users have different needs. Some mobile devices make it difficult to hover over the link. You can activate Shopify sub-categories by tapping.
- Limit the choices – Your Shopify submenu shouldn’t slow down your client’s journey through your website.
- Sticky navigation: Shopify categories and subcategories are “sticky” to a page when the user scrolls it.
- Avoid using jargon, cliches, and other unusual labels. Clear terms are important. Label the information clearly and precisely.
- Avoid unprofessional web designers and developers. Get inspired by trusted resources to help you create the website of your dreams.
Shopify is a strong platform that allows users to add functionality to their store via third-party apps. What are they?
Which Shopify mega-menu app should you use
Shopify has a lot of developers who are available to help you create mega drop-down menus. These extensions don’t require any coding knowledge and can be used with virtually any Shopify theme.
Let’s take a look at the Shopify menu apps that have the highest ratings:
It doesn’t matter how many products or collections you have on Shopify, the goal is to make navigation as easy and as user-friendly as possible. Every step in your shop should be clear and direct your customers to the products they want. You should know the best way for your target audience to navigate through the products. This will make it easier for web designers and other specialists to create amazing websites.
