Theme Helpcenter

Documentation

Navigation and Megamenu

navigation_and_megamenu_1.png

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:
Image and text cards - Precondition to activate the Megamenu:

navigation_and_megamenu_2.png

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.

Menu link title: In this field, you’ll have to enter a 1st level item available in your menu to link the image and text card to its parent element (i.e. if the “Summer” collection menu includes a drop-down with multiple components, you’ll have to enter the same “Summer” name so that you associate the image and text card with this collection).

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

navigation_and_megamenu_3.png

Types of menus:

1. Classic menu with no images and text cards:

standard.png

2. Megamenu - You can add up to 5 Images with text cards to them.

Example 1: m1.png Example 2: m2.png **Example 3: ** m3.png

Contact Us
Was this article helpful?

Have more questions? Submit a request