How to Configure Vertical Mega Menu in Sj JMart Template

Joomla Views: 503 Added Date: July 18, 2020 SmartAddons Like
Joomla News: How to Configure Vertical Mega Menu in Sj JMart Template

Sj JMart is one of the best Joomla templates based on JoomShopping component. With flexible design, Sj JMart is an ideal solution for fashion, technology, accessories or wide range of online store.

 

The responsive Joomla template - Sj JMart comes with lots of amazing features that help you easily and quickly build an online store. Specially, Sj JMart supports vertical mega menu by using Sj Mega Menu Joomla module then you can show various content in your menu from links, custom Html, modules, banners...

In this article, we will show you how to configure the Vertical Mega Menu as same as the Sj JMart template demo step by step. By understanding how to custom in Sj JMart Joomla website template, you can custom, create your own vertical menu for your website with this Joomla template.

How to Configure Vertical Mega Menu in Sj JMart Template Step by Step

1. Create "Vertical Menu LTR" Menu

Go to "Menus" » "Manage" » "Add New Menu". Create "Vertical Menu LTR" menu.

2. Install & Config Sj Mega Menu Module

  • Install Sj Mega Menu Joomla extension.
  • Go to "Extensions" » "Modules" » Find "Mega Menu" » Select "Sj Menu Menu" module, rename to "Vertical Menu LTR" to distinguish to vertical mega menu on RTL layout.
  • Config the module as below images.

How to Configure Vertical Mega Menu in Sj JMart Template Step by Step

How to Configure Vertical Mega Menu in Sj JMart Template Step by Step

How to Configure Vertical Mega Menu in Sj JMart Template Step by Step

3. Create & Config Custom Html Modules

As the Sj JMart Joomla theme demo, we need to create 4 custom Html modules then display them in Vertical Menu LTR's sub-menus. To create custom Html module, go to "Extensions" » "Modules" » "New" and choose "Custom" type and use these code snippets.

3.1: Custom Html - Vertical menu 1

3.2: Custom Html - Vertical menu 2


3.3: Custom Html - Vertical menu 3


3.4: Custom Html - Vertical menu 4


4. Config "Vertical Menu LTR" Menu

Go to "Menus" » "Vertical Menu LTR" » "Add New Menu Item" to create sub-menus for "Vertical Menu LTR" menu.

4.1: Menu "Electronics"

  • Menu Item Type: URL
  • Menu: Vertical Menu LTR
  • Parent Item: Menu Item Root
  • Set menu icon in "Link Type" » "Link Image"

4.1.1: Menu "Fashion"

  • Menu Item Type: Category (then select the category you want to show)
  • Menu: Vertical Menu LTR
  • Parent Item: Electronics

4.1.2:  Do the same with "Beauty", "Jewelry & Watches" and "Smartphones & Tablets" menus.

4.2: Menu "Smartphones & Tablets"

  • Menu Item Type: URL
  • Menu: Vertical Menu LTR
  • Parent Item: Menu Item Root
  • Set menu icon in "Link Type" » "Link Image"

In "Sj Mega Menu: Options" Tab: Drag & drop the "Custom Html - Vertical menu 2" module.

How to Configure Vertical Mega Menu in Sj JMart Template Step by Step

4.3: Menu "Health & Beauty"

  • Menu Item Type: URL
  • Menu: Vertical Menu LTR
  • Parent Item: Menu Item Root
  • Set menu icon in "Link Type" » "Link Image"

In "Sj Mega Menu: Options" Tab: Drag & drop the "Custom Html - Vertical menu 4" module.

How to Configure Vertical Mega Menu in Sj JMart Template Step by Step

4.4: Menu "Computers & Networking"

  • Menu Item Type: URL
  • Menu: Vertical Menu LTR
  • Parent Item: Menu Item Root
  • Set menu icon in "Link Type" » "Link Image"

In "Sj Mega Menu: Options" Tab: Drag & drop the "Custom Html - Vertical menu 1" module.

How to Configure Vertical Mega Menu in Sj JMart Template Step by Step

4.5: Menu "Jewelry & Watches"

  • Menu Item Type: URL
  • Menu: Vertical Menu LTR
  • Parent Item: Menu Item Root
  • Set menu icon in "Link Type" » "Link Image"

In "Sj Mega Menu: Options" Tab: Drag & drop the "Custom Html - Vertical menu 3" module.

How to Configure Vertical Mega Menu in Sj JMart Template Step by Step

4.6: Menu "Toys & Hobbies"

  • Menu Item Type: URL
  • Menu: Vertical Menu LTR
  • Parent Item: Menu Item Root
  • Set menu icon in "Link Type" » "Link Image"

Do the same with the other menus which do not contain module.

Now, you have already had a beautiful vertical mega menu as the Sj JMart eCommerce Joomla template demo.

Not only the Sj JMart template supports vertical mega menu, but lots of our Joomla templates also include vertical mega menu. You can use this guide to set up vertical menu in other Joomla themes using Sj Mega Menu module as well.

Thanks for reading!



Reviews (0):

Rate this: 
Send