Skip to main content
All CollectionsDesign Your App
How To Build Navigation Menu Like A Pro?
How To Build Navigation Menu Like A Pro?

Everything you need to know about Shopney’s menu features and pro tips on how you can build one that meets your customers’ needs.

Lara Soley avatar
Written by Lara Soley
Updated over 3 weeks ago

The navigation menu is the backbone of your app, providing structure and ease of use. Since shopping apps are designed for a seamless mobile experience, a well-organized menu is essential, making your customers’ shopping experience more intuitive and enjoyable.

Therefore, keep your menu as simple as possible and avoid adding too many items to it. Otherwise, it will make navigation overwhelming rather than helpful. Your customers should be able to find what they need quickly- nothing more, nothing less.

This article explains how to structure your app’s navigation menu effectively and why it matters.

  • Helps customers find what they need quickly

  • Ensures smooth navigation throughout the app

  • Includes essential shortcuts for a better user experience

  • Minimizes confusion and enhances usability

Let’s go through each section to see how you can build the best navigation menu!

💡Tip

We suggest you learn the basics of the menu section of the Shopney dashboard before diving into the details. If you haven’t done so yet, check out this article first.


The Menu Item Types and The Way They Function

There are different types of menu items designed for different purposes. In the following section, you will learn about each one in detail and how to configure them properly for your mobile app.

1. Showcase

The Showcase (Home Page) item opens the mobile app’s home page whenever it’s tapped. All menu elements only require a basic name and icon configuration, then it is ready for use.

📌 Important Note

The first menu item at the top is always the default opening page of your app. To maintain a seamless experience, make sure the Showcase menu item remains at the top.

💡Tip

To enhance your app design and improve user experience, check out this article to see how easily you can set up the Multi Showcase feature and create engaging Multi Landing Pages.

2. Wishlist

The Wishlist menu item displays products that customers have added to their favorites by tapping the ❤️ (heart) icon. Adding this item to your menu allows your customers to access their favorite products and purchase them with ease quickly.

3. Recently Viewed

As the name indicates, this item displays the list of products the user has previously viewed.

4. Cart

This item displays the cart and the products added to it. If your app already has a cart icon in the top navigation bar, you may not need this, as both serve the same function.

5. My Orders

This item allows users to view the list of previously purchased products.

6. All Products

This item displays your store’s entire Shopney-available inventory in the specified order.

7. Web URL

While keeping your customers on your mobile app is ideal, you may want to drive traffic to a landing page on your store or another website for additional information. With this item, your customers can open a web page within the app with just a single tap. All you need to do is simply configure the basic settings and insert the web link in the menu item configuration panel on the right-hand side.

8. Notifications

The notification item opens the list of push notifications your customers have received so far. They can browse past notifications and navigate to collections or products if they are still available.

9. In-App Messages

This item allows your customers to open the in-app live chat and start a conversation. Just like the Cart item, if your app already has a message icon in the top navigation bar, you may not need this, as both serve the same function.

💡Tip

To manage conversations from your mobile app as well and not just from your Shopney dashboard, you can use our Shopify Inbox integration for free. Here is more information if you’d like to check it out.

10. Search

This item functions the same way as the search bar on your app’s showcase (home page).

11. Sub-Collections

This item allows you to categorize your products further, giving your customers a more guided shopping journey. In other words, a Sub-Collection is the item that enables you to list multiple sub collections under the main collections. It’s the only item that requires additional configuration.

After the setup, your collections will be displayed as shown below in your preview or live app, depending on the Sub-Collection Type you choose.

collections, sub collections, category tree, Shopney dashboard, Shopney, app design

To learn how to set them up easily, you can check out the link below:

12. Loyalty

The loyalty item allows your customers to access their rewards profiles. Once you’ve completed the necessary steps and activated the related integration, you can add this item to your menu to make it available for use.

💡Tip

We highly suggest utilizing our loyalty integrations. They play a key role in customer retention by rewarding repeat purchases and encouraging long-term engagement. The loyalty programs keep customers coming back, ultimately boosting sales and lifetime value. To learn more about one of our most-loved loyalty integrations, feel free to check out this article.

13. My Account

My Account item serves as a summary of your customer’s data and profile. It includes Favorites, Recently Viewed Items, Orders, Addresses, and Account Info. Instead of listing Favorites, Recently Viewed Items, and Orders separately in the menu, you can combine them all under My Account for a more streamlined experience.

Shopney, my account, my orders, app design

14. Collapsable Menu

A collapsible menu is a sub-menu tool that can organize secondary pages such as blogs, policies, and other informational content. You can easily add it by dragging and dropping item number 1 into the selected menu items area (2), as shown in the screenshot below. Once added, click on item number 2 to open the section where you can insert collapsable items.

Shopney design editor, showcase, Shopney, app design, blogs, pages

Shopney design editor, showcase, Shopney, app design, blogs, pages

You can use Web URLs, Pages, Blogs, and even another collapsible menu within a collapsable menu, allowing you to create a nested collapsable menu. These pages open in a web view within the app. However, if you want to give them a more native look, let us know, and we'll remove the headers and footers from the web pages.

💡Tip

In the left panel menu style, the top section will grab the most attention, while the lower section will be less prominent—especially if you have more than 6-7 items. Keep this in mind when organizing your menu to ensure key items are easily accessible.

In the bottom bar menu style, only the top 4 items in your main menu will be visible. The rest will be tucked under the More section, accessible via the hamburger icon on the right-hand side, as shown. To ensure a smooth user experience, place the most important and frequently used items in these top four spots.

Now that you know how to easily design your menu, check how it will look on your preview and live app:

app design, navigation menu, Shopney, preview app, live app

Watch the Video Tutorial

You can watch our step-by-step video tutorial for a more in-depth understanding of building a pro navigation menu for your mobile app effortlessly.


Need Help?

If you encounter any issues, our support team is here to assist you:

  • Contact our support team via live chat in your Shopney dashboard.

  • Visit our Help Center.


Related Articles

Did this answer your question?