SwissUpLabs Logo

Amazon Menu

Top Menu

Don’t have a menu yet? Create simple menu, activate it the config and come back!

Amazon Menu

  1. Navigate to Swissup > NavigationPro page, open menu to edit.

    Please note, that you need to create Departaments item and move all categories inside it.

    You can use a link to CMS page for the Deparataments item. Referenced CMS page can utilize EasyCatalogImages widget to list all of your categories.

  2. Click Menu Settings button.
  3. Set CSS Class value to navpro-amazon, and Maximal Depth value to 3. This will limit number of loaded navigation levels.

    General Settings

  4. Change Second Level Dropdown Settings:

    Second level dropdown settings

    Subacategories Settings:

    Option Value
    Columns Count 2
    Columns Direction Vertical
    Nested Levels Per Dropdown 2

    HTML Content Settings:

    Option Value
    Content Upload image with Insert Image button
  5. Save Menu Settings and see the result on Frontend.
  6. The rest of the top level links are the links to the cms pages. Following CSS helpers are used for them:

    • text-small — Added to decrease links size
    • ml-auto — Added to the “Help” item to move it and all next the items to the right edge.

P.S. If you’d like to apply additional changes to the specific dropdown only, you can select the item in the tree and edit Dropdown Settings fields for this particular item.

Available since 1.1.0

Our settings for top navigation will show the first 3 category levels only. So, we need to create sidebar menu that will show subcategories of currently viewed department.

Amazon Sidebar screenshot

  1. Create simple menu
  2. Navigate to Content > Widgets
  3. Create new Navigationpro widget with following settings:

    Layout Updates

    Layout Update Settings

    Widget Options

    Amazon Sidebar Menu Settings

  4. Save the widget.

Next up

Edit this Page