Navigation and Megamenu
About:
The precondition to having a menu within the theme is creating it within your Shopify backend inside the Online Store > Navigation.
A menu gives your customers the quickest way to access relevant content available in your store, and it can range from products, collections, and blog pages to custom pages.
There are two default menu options available on every single page:
Main Menu & Footer Menu
The main menu is where your customers will find the quickest way to your products, collections and information about your business.
The footer menu is usually displayed as items across the width of the footer. A customer will look at your footer menu for information about your store policies and contact information.
Tutorial: How to create and edit your navigation:
How to transform the menu into a megamenu
The Image and text card feature is an innovative way of displaying relevant information across your store. This allows you to promote products or content across your store easily.
In order to activate the megamenu, you will have to add at least one "Image and text card block to your header and link it to your designated menu.
-
Go to your theme's Navigation in the customizer and expand it.
-
Add an Image and text card block
-
Link it to the 1st level menu link title that you wish to transfom into a megamenu by entering the name of the menu into the "Menu link title" box. (i.e. if the “Shop” collection menu includes a drop-down with multiple components, you’ll have to enter the same “Shop” name so that you associate the image and text card with this collection).
-
Finish configuring the Image with text card as per your prefferences.
Additional customisation options of this feature include:
- Color scheme (chosen per your preference and design colour palette).
- Image
- Heading and subheading
- Content position
- Link (you can choose a link within your store where the customer will be redirected to)
Note: If only one card is present, it should be aligned to the right of the container
Types of menus:
1. Classic menu with no images and text cards:
2. Megamenu - You can add up to 5 Images with text cards to the menu link title.
Example 1:
Example 2:
Example 3:
Was this article helpful?
Have more questions? Submit a request