Skip to main content

Building your Menu - Components

Learn how to use components to build your menu page.

Written by Nuno Batista

Define Structure and Goals

We recommend beginning with some introspection to define the primary purpose you want to achieve with your menu.

A clear objective will guide your design choices and ensure your menu serves both your business goals and your customers needs.

There are many different paths you can take, depending on your strategy:

  • Focus on Organization – If you have a large store with an extensive product catalog, prioritizing structure is essential.

  • Focus on Visual Appeal – Your menu should reflect your brand's identity. A vibrant and colorful home page paired with a plain, minimalist menu creates a disconnect.

  • Focus on PromotionsPosition your best deals or top-selling products prominently within the menu to create urgency and a sense of necessity for your customers.

  • Focus on Themes – Tailor your menu to reflect seasonal themes, holidays, or special events.

  • Focus on Brands – If your audience prefers to shop by brand, structure your menu around the brands you sell.

By choosing the path that best aligns with your store’s identity and customer behavior, you can create easier your menu’s structure.

You can read our article about menu best practices, if you want to deep dive into menu possibilities.

Collections Blocks

NAPPS platform is based on blocks, to make it accessible to everyone. Based on that, you can find always on the left side of our platform all the components that you can use to build your menu. 

In the menu page you can find 3 categories of blocks: collection, products and banner.

Collection Blocks

Collection Banner

This block was specially created to let your creativity be used it's based on images, so you can upload an image inspired on the collection you will add to the action. 
On the right bar, you will find all the settings you can make to give this component to life.

Final result of a Collection Banner.

After adding the photo, don’t forget to add the collection or sub-collection you pretend to redirect your client.

Collection Text

This block allows you to create a traditional navigation menu, making it easy for customers to browse your app and access the pages, collections, or categories they need.

Final result of a Collection Text.

This type of menu allows you to keep a clean and organized menu, highly effective when you have a lot of products.

Besides defining the title of this section, you can change their color, add a tag (as you can see in the previous image) with a text of your preference and define the background and text color.

Brands List

This block is ideal if you have a lot of brands being sold in your store, specially because they are organized alphabetically. You’re customers will find the specific brand that they are looking for in no time.

Final result of a Brands List.

When clicking in this section, the brands you have added will show as a list and it will be connected to the collection created to that specific brand.

Collection Grid

The Collection Grid Block provides a flexible way to display your collections with a variety of layout and styling options.

You can customize the block by choosing:

  • A layout with 1, 2, or 3 columns

  • An image aspect ratio of Portrait, Square, or Landscape

  • Whether to display collection titles at the top, bottom, or hide them entirely

With these customization options, you can create different layouts and styles to match your app's design and showcase your collections in the way that best fits your brand.

Final result of a Collection Grid.

The one present in the example is a 2 column block with the aspect radio portrait (2:3).

Last Seen Products

This block is very similar to the Product Carousel presented in the previous chapters.

This block will automatically search for your clients previous seen products.

Final result of a Last Seen Products.

Multi Tab Menu for Maximum Impact

Instead of using just one menu for everything, take advantage of multi page to highlight content more strategically taking into consideration the time of the year or what you are highlighting. For instance, you can:

  • Use a custom menu for your Holiday Collection, featuring festive colors and highlight it with banners.

  • Set up a focused menu for Promotion & Sales, making it easier for users to browse discounted items. Using text colors or tags.

  • Tailor menus for specific language groups or regional preferences. Using the multi tab option, creating segmentation in the menu.

By organizing your Menu multi tabs with intention and flexibility, you’ll create a smoother, more intuitive experience that keeps users engaged and leads them to the right products faster.

menu+zippy.jpeg (946×1934)
Did this answer your question?