Customize top navigation menu

1. Introduction

The top navigation menu makes it easy for customers to explore your store by highlighting key pages, collections, or links. A well-organized menu with clear, intuitive labels is key to keeping visitors engaged and reducing bounce rates, you can customize it to align with your brand and enhance the shopping experience.

To start customizing top navigation menu, go to your EasyStore Admin > Channels > Online Store > Navigations.

2. Hide Home and/or Catalog

2.1 At start, you will see 2 system default navigators, indicated by a lock icon:

Home – This navigator always directs visitors to your homepage
Catalog – This navigator displays all product collections, including sub-collections in a dropdown list

2.2 These 2 system default navigators can not be removed, but you can rename or hide them.

Edit the navigator > rename or uncheck Navigator publish date to hide > Save.

3. Add new navigator

3.1 To add more navigators on top navigation menu, click Add navigation button > select Main Menu.

Next, select navigator type and fill in / select the relevant details:

Link

3.2 Use this navigator type to direct visitors to any page, it can be a page within your online store or an external web page, just paste the page link under URL and handle.

Page / Blog / Collection

3.3 Use these navigator types to conveniently direct visitors to a content page, blog or a product category within your online store, just select the page from the drop-down menu.

If you haven’t had these pages created, refer guides below:

Store Locator / Voucher

3.4 Use these 2 navigator types to direct visitors to your store locations or direct logged-in customers to their voucher page. You don’t have to fill in or select anything as the page is fixed.

If you haven’t set up locations or voucher yet, refer guides below:

3.5 Give the navigator a name which will appear on the main menu.

3.6 Tick Navigator publish date and select the date you want to publish > OK, to publish immediately, just click Now > Save.

4. Navigator by apps

4.1 Some of the installed apps will auto-create a navigator on your main menu, with a lock icon.

Example:

5. Delete navigator

To delete navigator, edit the navigator > Delete this navigation.

6. Create drop-down list

6.1 To form a drop-down list, use drag-and-drop method to create a sub-navigator. You can form up to 3 tiers of drop down.

6.2 For Collection type navigator, the sub-collections created under Admin Panel > Products > Collections will auto form drop-down list as well.

6.3 You can also use drag-and-drop method to arrange navigators.

7. Add plain text navigator (not clickable)

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

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

7.2 Then, when create navigator, choose Link and put #.

8. Adjust gap size between navigators

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

Attached GIF image for extra reference:

9. Customize Quick Links footer

Steps 3 to 5 above work the same for Quick Links footer.

Updated on: 01/08/2025

Was this article helpful?

Thank you!