Customize top navigation menu

1. Introduction

When customers can’t find what they’re looking for on your homepage, they’ll often turn to the navigation menu or links section to browse categories or topics that match their interests. A well-organized menu with clear, intuitive labels is key to keeping visitors engaged and reducing bounce rates.

The top navigation menu makes it easy for customers to explore your store by highlighting key pages, collections, or links. You can customize it to align with your brand and enhance the shopping experience.

This article focuses on customizing the main menu navigation. The process is similar for the Quick Links Footer, except that the footer does not support dropdown lists.

The navigation links on your store can be managed through EasyStore Admin by navigating to Channels > Online Store > Navigation. There are three types of navigation links you may find in the main menu bar:

System default navigators (locked) – Pre-set links that cannot be modified.
Manually added navigators – Links that you create and customize.
Navigators auto-created by installed apps – Links automatically generated by certain apps.

✅ 2.1 System default navigators (locked)

Home and Catalog are system default navigators, indicated by a lock icon.

Home – This navigator always directs visitors to your homepage. It cannot be removed or hidden, but you can rename it.
Catalog – This navigator displays all product collections, including sub-collections in a dropdown list. You can rename it to something like Shop All to better match your store’s branding.

Although these two navigators cannot be removed, you can rename or hide them by clicking Edit, unchecking Navigator publish date, and then clicking Save.

✅ 2.2 Manually added navigators

You can add various types of links to your main menu, including pages, blogs, collections, store locators, and vouchers. Click the links below for detailed steps on how to create each type of navigation:

Links and Pages – Direct visitors to external websites or internal content pages within your store.
Blog – Link to your blog articles to share updates and stories. (Works the same way as a page-type navigator.)
Collections – Showcase specific product categories such as promotions or new arrivals.
Store Locator – Link to your store locations set in Settings > Locations.
Voucher – Add a voucher page to your navigation for easy customer access.

✅ 2.3 Navigators auto-created by installed apps

Some of the installed apps e.g. Contact Form Plus and Help Center will auto-create a navigator on your main menu. Example:

✅2.4 Navigators for available Vouchers

Direct customers to a dedicated page where they can view and claim available vouchers. This helps your customers to easily find discounts and promotions, encouraging them to complete their purchases.

Example on how it will be showing on your Storefront:

Once clicked, they will be redirected to the My Vouchers page, making it easier for them to access discounts and promotions.

3. Drop-down list

A drop-down list will be auto-formed below the main navigator whenever there is a sub-navigator. Use the drag-and-drop method to create a sub-navigator and changing navigator order.

Existing sub-collections created under Admin Panel > Products > Collections will automatically appear as dropdown options under the collection-type navigator.

4. Add plain text navigator (not clickable)

Go to EasyStore Admin > Channels > Online Store > Edit Source > site-nav.liquid > replace the highlighted part with codes below

{% if link.url != "/#" %} href="{{ link.url }}" {% endif %}

Then when create navigation, choose Link and put #

5. Adjust gap size between navigators

Go to EasyStore Admin > Channels > Online Store > Edit Source > assets/base.css > look for .header__menu-item > replace 1.2 rem with your preferred padding size > Save

💡 Tips:replace with either 1.4rem or 2rem and so on depending on their preferred size

Attached GIF image for extra reference:

📌 Note: This is available for Candy, WAVE, LUCKY and X-Force only

Step 1 : Click on Channels > Online Store > Edit Source and select timber.scss file

Step 2 : Look for .site-nav__dropdown { around line 2300 and find

Step 3 : Change the flex-wrap: wrap; to flex-wrap: nowrap;

Step 4 : Save and here's the result

Before:

After:

Updated on: 25/02/2025

Was this article helpful?

Thank you!