Why we don't suggest scrollbar in submenu?

Why we don't suggest scrollbar in submenu?

For merchant who has long list of menu items and want a scrollbar to scroll inside a submenu.
There are reasons why we DON'T recommend users to add a scrollbar to a long menu:
Although we provide a features to allow you to add scrollbar inside a submenu, we still do not recommend to do it, because:
  1. Confuse users: Browser already has its own scrollbar, so if we add another scrollbar it will confuse user sometimes, making users not know which scrollbar to scroll
    For example: User is hovering on menu and wants to scroll down the page, but it will scroll down the menu instead.

  2. User might not scroll down: The purpose of a mega menu is to show all items for overview and quick navigation, so you shouldn't hide items in a scroll menu. The chance that user don't scroll menu is very high.

  3. Increase searching time: To find a category item at the bottom of a submenu with a scrollbar, user needs to hover or click on the top menu item to open submenu, scrolldown to find a menu to open, it takes around 5 seconds to find a correct target.

Therefore, we recommend to find another way to organize your menu to avoid scroll. 
You can try:
  1. Use Mega menu instead of Flyout
  2. Use Tab menu instead of Mega
  3. Use smaller images to optimize space
  4. Use Masonry to optimize space (instruction)
  5. Reduce vertical gap between items (contact us for help)
  6. Reduce font size of menu items
  7. Increase menu width (instruction)


    • Related Articles

    • How to add scrollbar to your submenu?

      Warning: Basically, we DON'T suggest adding a scrollbar. Read reasons & other solutions here: Why we don't suggest scrollbar in menu?  For Flyout menu, can only add scroll bar if flyout menu has 1 level. How to add scrollbar to your submenu? But ...

    • Submenu settings

      There are 3 types of Submenu: Flyout (tree) menu, Mega menu & Tab menu. Click the pencil button to edit a parent item and choose among the 3 types.   1. Flyout menu settings When selecting Flyout Submenu type, your menu will be displayed as a normal ...

    • How to import Smart Menu's demo store menu

      You can use Smart Menu’s demo store menu as a reference and fully customize it to your liking. This article will help you to get exactly the same menu with our demo store with just two-click importing.       1. Install Smart Menu on Shopify Apps ...

    • Setup Google reCaptcha v2 to all Contact Forms

      Google reCaptcha is a free and popular service to prevent your site from being abused and spammed by bots. This article will show you how to quickly setup Google reCaptcha v2 Site Key and Secret Key. First, visit the Google reCaptcha website. Click ...

    • Tips for better promoting

      Affiliate Marketing can be a significant source of income for everyone. We create Qikify Affiliate program to support the many Shopify developers, merchants … who take time to share our products. To support you maximize your Affiliate Marketing ...