SM Megamenu 2x

SM Megamenu is an upward trend for web design especially e-commerce stores. If your site involves a variety of products, thus, a number of categories, Mega Menu is what you have to put in to consideration. The reason is that Mega Menu offers an effective way to improve website usability and navigation!
It takes your customers fewer clicks, thus, saves their time to get to where they really want. Using this module it can be possible for you to display not only category list but also special products, banners or contact form, etc.
This guide will help you install SM Megamenu.

1COMPATIBLE WITH MAGENTO

This module is fully compatible with Magento Community Edition version 2.1.x.

2REQUIREMENT

To install this module you must have a working version of Magento already installed. If you need help installing Magento, follow below sites and tutorials from magento.com, hope everything that you need are there.


3INSTALLATION

  • Step 1: Download and extract the extension’s package on your computer and navigate inside the folder.
  • Step 2: Upload the folder named as app & pub from the package to the root of your Magento site on your server
  • Step 3: To active SM Megamenu, go to root of your site using putty or others.
    • 1. Please type the following command into the dialog to active module:
    • 2. After running successfully the first command, type the following command into the dialog to flush cache on our Magento store

  • Step 4: Go to Administration page to configure the extension
  • Important Note:

    • After installing extension, you should logout first and then login Admin Panel to ensure all functions work normally.
    • You should disable all caches in cache management in the installation and configuration process.

4CONFIGURATION

4.1 Layout Demo

You could see the appearance of SM Megamenu module as following:

4.2 How to show “SM Megamenu” module?

  • If you want to display this module on any page that you want, please go to Content -> Page -> Edit Home page item ->Tab Content, add this code to a position:

4.3 Set Up

Log in to Admin, go to SM Mega Menu then create list Menu Items. The following guide is step by step to create list Menu Items for your menu:

  • STEP 1: ADD MENU GROUP
  • Go to SM Megamenu -> Add New Menu -> Menu Group

  • STEP 2: CREATE MENU ITEMS IN THE GROUP
  • To create menu items in the group, In the Admin Panel you go to Menu Manager -> Select “Menu Group” -> Edit.

    Go to Menu Items to create Item

    You can refer which likes as our demo

    4.4 Create Horizontal Megamenu

    • Sortable Categories Items Please click Here to view.

    4.4.1 Create “All Mega Menu” menu

    • Backend of “All Mega Menu” menu: Please click Here to view.
    • Backend of ‘Column 1′: Please click Here to view.

    Note: Do the same with item ‘Column 2′, ‘Column 3′, ‘Column 4′, ‘Column 5′, ‘Column 6′

    • Backend of ‘Add Contents Video’ in the ‘Column 1′: Please click Here to view.

    Note: The item named ‘Add Media Element’, ‘Add Google Map’, ‘Text 1′, ‘Text 2′, ‘Text 3′ having same menu level (Level 3) as item ‘Add Contents Video’ could have the same configuration. However, you should be aware that the Parent Item of them is different.

    • Backend of ‘Video 1′ in the ‘Column 1′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Media Element 1′ in the ‘Column 2′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Google Map’ in the ‘Column 3′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Element Text 1′ in the ‘Column 4′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Element Text 2′ in the ‘Column 5′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Element Text 3′ in the ‘Column 6′: Please click Here to view.

    Copy and paste the following code into the content:

    4.4.2 Create “Features” menu

    • Backend of “Features” menu: Please click Here to view.

    Copy and paste the following code into the content editor:

    4.4.3 Create “Best Seller” menu

    • Backend of “Best Seller” menu: Please click Here to view.
    • Backend of ‘Column 1′: Please click Here to view.

    Note: Do the same with item ‘Column 2′, ‘Column 3′, ‘Column 4′, ‘Column 5′, ‘Column 6′

    • Backend of ‘Men’ in the ‘Column 1′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Women & Accessories’ in the ‘Column 2′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Out Door & Sports’ in the ‘Column 3′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Health Care Devices’ in the ‘Column 4′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Home & Kitchen’ in the ‘Column 5′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘Fishing’ in the ‘Column 6′: Please click Here to view.

    Copy and paste the following code into the content:

    4.4.4 Create “Flyout” menu

    • Backend of “Flyout” menu: Please click Here to view.
    • Backend of ‘Column 1′: Please click Here to view.
    • Backend of ‘ThemeForest’: Please click Here to view.

    Note: Do the same with item ‘GraphicRiver’, ‘PhotoDune’, ‘Creattica’, ‘MicroLancer’, ‘ActiveDen’

    • Backend of ‘Column 1′ in the ‘EnvatoSites’: Please click Here to view.
    • Backend of ‘Tuts+’ in the ‘Column 1′: Please click Here to view.

    Copy and paste the following code into the content:

    • Backend of ‘We are Envato’ in the ‘Column 1′: Please click Here to view.
    • Backend of ‘Support Center’ in the ‘Column 1′: Please click Here to view.

    4.4.5 Create “Grid” menu

    • Backend of “Grid” menu: Please click Here to view.
    • Backend of ‘Column 1′: Please click Here to view.
    • Backend of ’1 column’ in the ‘Column 1′: Please click Here to view.
    • Backend of ’5 column’ in the ‘Column 1′: Please click Here to view.
    • Backend of ‘Column 2′: Please click Here to view.
    • Backend of ’2 column’ in the ‘Column 2′: Please click Here to view.
    • Backend of ’4 column’ in the ‘Column 2′: Please click Here to view.
    • Backend of ‘Column 3′: Please click Here to view.
    • Backend of ’3 column’ in the ‘Column 3′: Please click Here to view.
    • Backend of ‘Column 4′: Please click Here to view.
    • Backend of ’4 column’ in the ‘Column 4′: Please click Here to view.

    Note: Do the same with item ’2 Column’

    • Backend of ‘Column 5′: Please click Here to view.
    • Backend of ’5 column’ in the ‘Column 5′: Please click Here to view.

    Note: Do the same with item 1 Column’

    • Backend of ‘Column 6′: Please click Here to view.
    • Backend of ’2 column’ in the ‘Column 6′: Please click Here to view.
    • Backend of ‘Column 7′: Please click Here to view.
    • Backend of ’1 column’ in the ‘Column 7′: Please click Here to view.

    4.4.6 Create “Contact Form” menu

    • Backend of “Contact Form” menu: Please click Here to view.

    Copy and paste the following code into the content:

    4.4.7 Create “Shop By Product” menu

    • Backend of “Shop By Product” menu: Please click Here to view.

    Copy and paste the following code into the content:

    4.5 Module Configuration

    Note: We used the images of module’s installtion on Magento 2.1.x to illustrate

    In the Administrator Page, navigate to Stores -> Settings -> Configuration and find SM Megamenu to configure.

    Let’s look at the parameter in detail:

    General Options

    • Enabled Extensions: Enable or disable the module displaying on Frontend area.
    • Select Mega Menu: Allow to choose Mega Menu.
    • Select Template: We support 2 templates for presenting of menu (Horizontal and Vertical)
    • Select Effect: We support effects for Mega menu (CSS/Animation/Toggle).
    • Start Level: Level to start rendering the Menu at
    • End Level: Level to end rendering the Menu at

    Advance Setting

    • Caching: Allow to choose to cache the content of module.

    4.6 How to override the configuration in backend?

    Let’s start override the configuration, go to Content -> Page -> Edit Home page item ->Tab Content

  • How to override “Select Template” param.
    In tab Content, add this code theme="Horizontal" or theme="Vertical"
  • How to override “Select Effect” param.
    In tab Content, add this code effect="Css" or effect="Animation" or effect="Toggle"

  • How to override “Start Level” param.
    In tab Content, add this code start_level="1" or start_level="2"...
  • How to override “End Level” param.
    In tab Content, add this code end_level="1" or end_level="2"...
  • 55. SUPPORT

    Thank you so much for using this module, your support is truly appreciated. If you have any questions that are beyond the scope of this document, please feel free to contact us via our Support Tickets System

    ×