“Mega Menu for CS-Cart” Documentation by “ThemeHills” v1.0


Mega Menu for CS-Cart logo

“Mega Menu for CS-Cart”

Created: 06/06/2017
Compatibility: 4.3.x - 4.5.x
By: ThemeHills
Email: support@themehills.com

Thank you for purchasing this add-on. If you have any questions that are beyond the scope of this help file, please feel free to contact us. Thanks so much!


Table of Contents

  1. Installation
  2. Change the color scheme
  3. Menu settings
  4. Category settings
  5. Block settings
  6. Change styles

A) Installation - top

Uploading

  1. Download the add-on
  2. Go to Admin panel > Add-ons > Manage Add-ons
  3. Click on [+] to open upload modal window
  4. Please choose whatever is comfortable to you:
    - Local: zip archive is saved on your computer
    - Server: zip archive is uploaded on your server
    - URL: you have a direct link to the zip archive
  5. After you selected the zip archive corresponding to your current version of CS-Cart please click Upload & install
  6. Clear cache on your computer, choose Administration > Storage > Clear cache

Activation

  1. Open add-on settings page Admin panel > Add-ons > Manage Add-ons > [TH] Mega Menu
  2. In Activation tab insert License key
  3. Save the settings and go back to Manage Add-ons page
  4. In same line with the name of the add-on, click Active
  5. Clear cache on your computer, choose Administration > Storage > Clear cache

Make sure that the add-on status is Active

That's all, the add-on is installed


B) Change the color scheme - top

  1. Go to Admin panel > Add-ons > Manage Add-ons > [TH] Mega Menu
  2. After editing, save the changes by pressing Save

C) Mega menu - top

Create Mega Menu

  1. Go to Admin panel > Design > Menus
  2. Click on [+] to open "New menu" modal window
  3. Enter name and please click Create
  4. Select new menu
  5. Click on [+] to open "New item" modal window

The menu items of the 1st level have two types

  1. Full category tree (1) - display all categories and category banners

  2. Default - display menu items and submenu


    Options:
    • Display type - specifies how to display submenu
    • Float right (9) - sets the alignment of the element on the right edge
    • Icon (2) - the image for the menu item
    • SVG Icon (2) - field to insert SVG code

The menu items of the 2nd level have two types

  1. Default (8) - menu items display as menu by default
  2. Text (7) - display wiziwig content

For example to create the menu item "Contacts", follow these steps.

Create item "Contacts", select

Create sub-item "Info"

In the visual editor, choose the mode "Code" and insert the following html:


	<h4><i class="icon-tt-pin"></i> Address:</h4>
	<p>3993 Hanover Street, <br>New York, NY 10016
	</p>
	<p><br>
	</p>
	<h4><i class="icon-tt-mail"></i> Email:</h4>
	<p><a href="mailto:sales@example.com">sales@example.com</a>
	</p>
	<p><br>
	</p>
	<h4><i class="icon-tt-phone"></i> Phone:</h4>
	<p>+1 917-722-7425
	</p>
	<p>(free call)
	</p>
	<p><br>
	</p>
	<h4><i class="icon-tt-clock"></i> Opening hours</h4>
	<p>10:00 — 6:00
	</p>
	<p>From Monday to Friday
	</p>
		

D) Category settings - top

Full category tree

It created automatically. Content is defined in the settings page, category


E) Block settings - top

When the menu is ready, go to Admin panel > Design > Layouts and create Mega Menu block in the settings, select previously created menu

Important! Mega menu for the main menu of the site, it is therefore recommended to use only one menu of this type.


F) Change styles - top

Style files add-on should not be changed, this can lead to incorrect work of the add-on. If there was a need to redefine or add styles, please use Theme editor for this

  1. Go to Design > Themes
  2. Press Visual Editor in front of the currently active layout
  3. In the new tab, you will see your shop with Theme editor panel
  4. In CUSTOMIZE selector choose Custom CSS
  5. In textarea your can add your styles
  6. After editing save your changes by pressing Save and press [X] to close editor

Once again, thank you so much for purchasing this add-on. As we said at the beginning, We'd be glad to help you if you have any questions relating to this add-on. We will try to help within the terms and conditions.

ThemeHills

This documentation cannot be copied or distributed without express written permission from ThemeHills

Go To Table of Contents