ecommerce megamenu joomla hikashop

Maximenu CK is fully integrated into the ecommerce extension Hikashop. You can manage your ecommerce megamenu for Joomla directly in the categories settings, or using a fast edition popup. You can list your categories automatically into a single megamenu or include your shop categories into any submenu.

  1. 1. Installation
  2. 2. First steps
    1. 2.1. Create the Maximenu module
    2. 2.2. Configure the module to load the categories
  3. 3. Setup the menu
    1. 3.1. Overview
    2. 3.2. Create the columns
    3. 3.3. Fullwidth submenu
    4. 3.4. Flat display in submenu
    5. 3.5. Hide on mobile, desktop and icons
    6. 3.6. Set column heading
    7. 3.7. Add a description
  4. 4. Combine normal menu and the categories listing
    1. 4.1.Create the normal menu module
    2. 4.2. Create the submenu listing

1. Installation

First download the ZIP file that contains the extension. Go into your website administration in the menu >> Extensions >> Extension manager >> Install.

install 1

Click on the button to search for the archive that you just downloaded. Then click on Upload & Install. Joomla displays the success message.

install 2

Now the extension is installed and ready to be used. You can find it in the menu >> Extensions >>Plugins.

install enable

You must check that the plugins are installed and enabled. It shall be enabled by default during the installation process.

 

2. First steps

2.1. Create the Maximenu module

At this step, you shall already have installed the Maximenu CK module in your website, as it will not work without it. Go in the Modules Manager >> New >> Maximenu CK, give it a title and publish it on all pages in a template position (for example position-1 if you are using the template Protostar)

creer module 1

creer module 2

Then save and you shall see the Maximenu CK module in your page. By default Joomla! creates a menu module type mod_menu in the position-1, so you should unpublish it to only have the Maximenu CK showing.

2.2. Configure the module to load the categories

In the module editing, go in the Source tab and select Hikashop in the list

configure module

Then select the options that you want to use for your menu. At the beginning you can leave them by default, only choose the Menu Itemid to be Category listing. The Menu Itemid is the menu link item that is linked to the Hikashop categories layout, it will be used to tell to hikashop what are the settings for the categories layout and also used for the urls.

hikashop options

This is how the menu shall look like on your website (using the demo data of Hikashop)

preview 1

3. Setup the menu

3.1. Overview

You can set the options in 2 ways :

- Directly in the categories listing with the Maximenu CK button in the toolbar of the Hikashop component

overview 1

 

- In the Hikashop category edition page

overview 2

You will get the same options as in the popup, but here you can set it directly when editing the category. You can use both the popup or the category editing page, the settings are the same. In the documentation we will focus on the poup method which is easier and faster. Here is a screenshot of the categories tree that we will use in the examples for the documentation

example tree

3.2. Create the columns

We will create a column on each subcategory of Shoes, I mean Kids, Men and Women. Click on the Maximenu CK button to open the popup and click for each category on the Create a column button. By default it will give a column width of 180px, you can change this value if you want.

create columns

You will see the columns that are created, the 3 categories are horizontally aligned.

create columns 2

Then you will get your submenu near to the Men item

create columns 3

3.3. Fullwidth submenu

We can create a fullwidth submenu with a simple click. Click on the Fullwidth button to make the submenu of Shoes take the full width of the menu.

create columns 4

To have the column fit in the fullwidth submenu, you can create them with a width in %. For example we will give 33% for each of the 3 columns Here we get our 3 columns aligned in the fullwidth submenu

create columns 5

3.4. Flat display in submenu

Sometimes you need to display the children categories directly under the parent category, without dropdown nor flyout. For each 3 categories Kids, Men and Women, click on the Stop dropdown (flat display) button to make it flat with its direct children

flat 1

And here is what you should get

flat 2

3.5. Hide on mobile, desktop and icons

You can also use the other options to hide your categories on mobile, or desktop (also on both ! ) and you can select an icon from the list. Just click on the buttons, there is nothing special to explain here as the option is self explanatory.

mobile 1

3.6. Set column heading

In our example we have 3 categories Men, Women and Kids that are in top of each column. The best would to use them as heading.

Edit the 3 categories, and set the option Type of item on Heading

heading 1

This will transform the menu item type in a heading type. You can then customize it using your CSS or the Maximenu CK Params interface. Here the parent category is no more clickable and is used only as column title.

heading 2

If you want to keep the category as a link and also give it a special style, you can use the Li tag css class to add any class to style the item

heading 3

Then use your CSS to set the design you want. Or simply use the Html tag option to transform your menu link into a title with the title tags, like H2.

heading 4

Here is the example of how it looks like

heading 5

3.7. Add a description

For each category you can give a description. This is usefull to give more meaning to your menu items and give some information to your visitor. Go in the Maximenu CK interface and set the description in the field.

description 1

It will be added immediately to your menu

description 2

4. Combine normal menu and the categories listing

This is a scenario that we can see in many websites. For example you want to have the menu items in the menu bar for the home, the contact page, etc and also have your categories listed automatically in a submenu. You can do it !

4.1.Create the normal menu module

This step is standard as you will need to show the normal menu items at first. Create a Maximenu CK module and publish it in a template position, and set it to load a normal menu (here the Main Menu)

combine a 1

You will get your menu links without submenu in our example

combine a 2

4.2. Create the submenu listing

Go in the admin >> Menu >> edit your menu (Main Menu) and create a new menu item that will will be the parent of the categories. This can be any menu item type, just the one you want. Here is our menu structure with the new Shoes menu item.

combine b 1

We will then create the menu item that will load our categories automatically in the menu. Create a new item and select the type Maximenu CK Hikashop :

combine b 2

You will get the options in the menu item edition :

combine b 3

You shall select the Menu Itemid which is the Hikashop menu link used for your listing that will tell how to display them in the page Then select the Root category to display, here the Shoes category is what we want so that all children will be displayed in our submenu. Don’t forget to set the parent item for your link, to put it under the Shoes menu item that we have created previously

combine b 4

This is now the menu structure that you shall get :

combine b 5

That’s it, your menu will load automatically all the children categories of Shoes in the submenu

combine b 6

You can then use the settings that we have seen previously in the Chapter II to create a fullwidth flat submenu with columns :

combine b 7

And the result :

combine b 8

 

Download Maximenu CK Pro

 

Fast and powerful creation, customizable and responsive.

Read More

Favorites extensions

logo maximenuck 110 logo pagebuilderck 110 logo slideshowck 110template creator ck large 449

Save
Cookies user preferences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accept all
Decline all
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline