MEGA MENU USER GUIDE. Phone: Extension version: 1.0 Magento Compatibility: CE 2.

Transcription

1 Phone: MEGA MENU USER GUIDE Extension version: 1.0 Magento Compatibility: CE 2.0

2 Table of Contents 1. INTRODUCTION HOW TO USE AND CONFIGURE Manage Megamenu Create new Top Menu Item Create new Left Menu Item Edit Menu Item Cache Management Settings... 21

3 1. INTRODUCTION Do you know how long customers stay on web pages? Surprisingly, it s only 10-20s on average (NNGroup, 2011) whereas you have a variety of products and categories to show. So as not to let customers leave soon, tell them the shortest way to what they are looking for. Magento Mega Menu extension (a.k.a Magento Navigation Menu) is your solution to create the best sitemap right on the main navigation. No technical knowledge required! You can flexibly set up your wanted menu with different content showing-off. One more thing, you don t need to worry about running site with turtle speed. Magento Mega Menu extension doesn t affect your site speed for sure. Let s take a look at listed Features below! In the next Part How to use and How to configure, we will go into details of each feature. Outstanding features: Quickly Create Magento Custom Menu Create horizontal & vertical Magento navigation menu for your site (Featured) Easily create different types of menu items. To show a menu item as product listing or category listing, admin can choose a menu type then select products/ categories to be shown. There are many menu types available, including Content only, Contact form or Anchor text, etc. (Featured) Add new type of menu: Dynamic Products Listing by Category(New) Quickly create a menu bar in which menu items are categories of your site. Re-index cache (use generated HTML code of your menu) to update changes, not affecting your site performance (Featured) Easily add, delete and edit menu items Export the menu list to CSV/XML file Easily Configure Menu Content and Style Set featured products/ categories in menu content Add labels to highlight products that you want, such as Hot, New, 50% OFF, etc. (New) Able to arrange the position of Menu items

4 Support multiple Menu effects: Hover, animate, toggle. When Customers hover over a Menu item, a list of your products will be displayed. Customize the style of menu: width, menu color, icon, etc. Possible to configure the style of menu content: size, position for content & number of columns Add custom CSS code to create your own menu style without editing CSS file Able to choose the arrangement of category items shown in category menu type Optimize Menu with Mobile Menu Configuration Choose your own breakpoint in backend to control the viewport width at which the menu will be changed to mobile version. Flexible configure menu style & content to be shown in mobile, like what you did for menu in PC Others Responsive Magento Mega Menu extension (Hot) Support multiple stores Support multiple languages Easy to install and configure Open source 100% License Certificate valid for 1 live Magento installation and unlimited test Magento installations (No license key required)

5 2. HOW TO USE AND CONFIGURE This section will show you how to configure Mega Menu extension to create your own menu. It is very fast and easy! There are two tabs in back-end: Manage Megamenu and Settings Manage Megamenu In this tab, you can: - Create Menu items, such as: Home, Categories, Contact, etc. - Edit Menu items: after creating you can easily edit your menu. It is unnecessary to have your Developer edit for you like before. - Find Menu items you want with given filters. - View the list of menu items or export to CSV/XML file.

6 Create new Top Menu Item Go to Back-end > Mega Menu > Manage Megamenu, click on the Add New Megamenu button, you will be redirected to Edit Mega Menu Item page. This is the guide to fill in data: General Information tab: - Name: Title of the menu item, such as Home or Contact - Store View: Select store(s) that you want to show this menu item. - Link: The address of the landing page when Customers click on the menu item. You can leave blank if the menu item doesn t lead to any page. For example, Contact menu item allows Customers to fill in contact form right in the menu without directing Customers to go anywhere. - Sort Order: The order of the menu item on menu bar. - Menu Item Icon: This field allows you to upload image for menu items. Supported file types are.jpeg,.jpg,.gif,.png with recommended size to be 15x15px. - Menu Type: Select the position that you want to show this menu. To create Top menu item, please select Top menu for this field Your menu will be shown as bellow:

7 - Status: You can enable or disable the menu. Content Information tab: In this tab, you can configure the form and detailed information of the menu item. The detailed information of the menu item includes 4 content blocks: General Configuration, Main content, Feature content, and Header & Footer Content. Depending on Content Type you choose, the Main Content will change respectively. General configuration section: Before configuring the content, you need to select Width and Alignment Type for menu information in this section.

8 There are 4 alignment types for the menu content to appear. For example: If you select From left menu, your menu content will appear from the left of menu bar to the right: If you select From right menu, your menu content will appear from the right of menu bar to the left:

9 If you select From left item, your menu content will appear from the left of menu item that you are adding: If you select From right item, your menu content will appear from the right of menu item that you are adding: Main Content: Our extension gives you 7 types of main content, including: Anchor Text, Static Category Listing, Dynamic Category Listing, Default Category Listing, Product Listing, Product Grid, Content, Dynamic Products Listing by Category.

10 Now, let s move on to each type of menu: - Anchor text type allows you to create a simple menu item. When Customers click on the menu title, they will be redirected to the page linked to the title. - Static Category Listing If you choose Static Category Listing, you need to fill enough information required in backend:

11 Especially, you need to configure Arrange Category Items by field to list all items of each category in one column or automatically arrange items of category in columns equally. The menu will be shown in frontend as following: - Dynamic Category Listing In version 3.1, a new menu type is added that allows you to flexible design your own menu. Configure it in backend: Then, the menu will be shown in frontend as below:

12 - Default Category Listing With this type of menu, you just need to choose categories you want to show: It will be shown in frontend as below

13 - With Product listing types, you need to enter the column number you want to show, Products Box Title, after that you select products list in the Products field: And your menu will be shown in frontend as bellow: - With Product Grid type, configuration for this type is similar to Product Listing type but on menu content this type will show products list you select with more information such as product image, product name and price:

14 - If you choose Content type, Menu Content field will be shown for you to enter the information you want to show in main content part. - Dynamic Products Listing by Category is similar to Dynamic Category Listing. This menu types allow you to show products filtered by category in a dynamic style:

15 Featured Content section: In this section, you must to select width of featured content in menu content. For example: If menu content width is 100%, width of featured content is 20%, so width of main content will be 80%. Our extension gives 3 types of featured content for you to choose, including: Product, Category and Content.

16 If you select Category or Product type, you also need to enter the value into Featured Column Number field and Featured Box Title field similar to Product Listing type of Main content. Please refer Main Content section > Product Listing type for more details. On your menu, it will show on Feature content part with the information of categories you selected such as categories list, image of each category or the information of products list such as name, image, price and short description. With Product type, it will be shown as bellow: With Category type, it will be shown as bellow: If you select Content type, it is similar to Content type of Main Content section. It will show you the Featured Content field to enter the information you want to show on your menu:

17 Add content for header, footer You can configure the information in Header & Footer Content section or make a quick configuration for content of menu item by clicking on each part of the sample layout (Header content, Main content, Footer content) and you will be immediately navigated to its configuration part to add content.

18 In the text editor form, you can add text and image. Fill out data you want to show and save your changes. You can see the Menu item is added to the list in Menu Manager Page as below: The menu item which is successfully added will be displayed in front-end as follows: Create new Left Menu Item Similar to Create new Top Menu, you also must to configure all required fields in General Information tab and Content tab. Please refer Create new Top Menu for details.

19 * Notes: With left menu, the Alignment Type just has 2 options for you to select. They are From top menu (the menu content will appear from the top of menu bar down) and From top item (the menu content will appear from the top of menu item you are creating). And the width of left menu item is from the right of menu bar to the right of the page. On you website, the left menu will be shown as bellow: Edit Menu Item

20 If you want to edit any menu item, you just need to click on its row or link Edit in Action column. The Edit Menu page will be shown for you edit the field in General Information tab and Content Information tab: After editing, please remember to save your work by clicking on Save Megamenu button or Save and Continue Edit button Cache Management Refresh Cache is an innovation in our Mega Menu extension. You can enable/disable Cache when editing menu items for convenient preview in front end: You just need to click on the Refresh Menu Cache button; the system will refresh cache automatically.

21 2.2. Settings Go to Back-end > MegaMenu > Settings. This page has 5 sections, including: General Configuration, Top Menu Configuration, Mobile Version Configuration, Left Menu Configuration and Customize Styles. General Configuration: - Enable Mega Menu: allow you to enable/ disable the extension. - Menu Effect: allow you to configure the effect of menu. There are three types: Fade: menu item will be displayed immediately when you hover on menu title. Slide: this effect is similar to Fade but menu item will be displayed more slowly Toggle: menu item will only be displayed when you click on menu title Top Menu Configuration:

22 This section includes configurations for the top menu. - Responsive Menu: allow the display fit with the tab size respectively - Top Menu alignment: allow you to choose the way to display the top menu bar. There are three types for you to choose:

23 Left: your top menu items will be arranged from the left of your site to the right. Right: your top menu items will be arranged from the right of your site to the left. Justify: menu items will be justified both to the right & left. - Menu Item height: allow you to configure the height of the top menu bar. - Size to change menu to Mobile version: if the device size is lower than the number you enter into this field, the menu will be changed to Mobile version. - The other configurations: allow you to customize your menu items style to fit with your site, including: menu item size, menu background color,

24 submenu background color, active menu item background color, menu item color, active menu text color, submenu box title color, submenu main text color, submenu link color and text label. Left Menu Configuration: Similar to Top Menu Configuration, Left Menu Configuration enables you to customize the left menu items styles except Menu alignment filed and Menu item height field. Please refer to Top Menu Configuration part for details. Mobile Version Configuration:

25 In this section, you can customize you menu item style when the menu is changed into mobile version. This section allows you to flexibly configure mobile menu such as anchor background color, size to change menu to Mobile version, mobile item font size, text label, mobile item text color, mobile item background color, active mobile item background color, mobile submenu box title color, mobile submenu main text color, mobile submenu main link color. Besides, in Mobile Effect field, you can configure how to display the menu on mobile version. There are two options for you to choose: Blind and Slide.

26 On mobile, your menu bar will be shown as bellow: When you click on your menu item, it will be displayed:

27 Customize Styles: If you want to style your own menu without having to edit CSS file, you have an option to insert CSS code as below: You can change any style, any menu position with custom CSS code. Remember to click on the Save Config button to save your work. We hope that you will find this user guide helpful during using Magestore Mega Menu extension END