Search Login

JMS Megamall

Download pdf verion

Automatically installation of the theme

  1. First of all you download archive
  2. Login to your back-office

 

  • Go to "Preferences -> Themes"
  • Click on "Add new theme" button on right hand
  • Click on "Add file" button for choosing theme you want to install (JMS Megamall has 3 themes with different layouts), then click Save button
  • After that you will JMS Megamall theme in theme listing.
  • Choose JMS Megamall , then click "Use this theme" button
  • On this step you will get information about theme installation status. Please mark all items (modules) you want and click "Save" button
  • Next step will inform you about modules installation status, and images settings update. Click Finish button

Congratulations! You have installed your new theme and to check it out, go to the front-end of your online shop and take a look at it!

Please check more JMS Megamall modules for making site looking better.

 

Manually installation of the template

 

If you want to install this theme manually, you have to do following steps:

  1. Download and extract it locally.
  2. Upload the "themes" folder contents to the "/themes" directory on your server.
  3. Login to your back-office and go to "Preferences" -> "Themes'.
  4. Now select "jms_megamall" theme in the "Theme appearance" section below
  5. Click to "Save" button
  6. Upload the "/modules" folder contents to the "/modules" directory on your server.
  7. Install each uploaded modules in back office, please remember to install JMS Setting module first. How to work with prestashop modules please read here http://doc.prestashop.com/display/PS16/Managing+Modules+and+Themes

Congratulations! You have installed your new theme and to check it out, go to the front-end of your online shop and take a look at it!

Configuring images

The dimensions of images are adapted to the design of this theme. We advice you to set the image dimensions according to the following screenshot:

To configure product image dimensions open PrestaShop admin panel, go to Preferences -> Images. In some cases after image dimensions changes you need to regenerate images.

JMS Megamall have lots of modules used. Some are prestashop default module and some are developed by Joommasters team for JMS Megamall from scrach or slightly modified prestashop default modules.

JMS setting for theme

This module allows you to configure JMS Megamall theme, it has 6 tabs in Setting part

General setting :

  • Theme skin: choose skin color for website
  • Theme width: configure default width
  • Responsive: esponsive mode enable/disable.
  • Setting panel: Show or Hide setting panel on front
  • Use Google Font : Enter google font family it will be loaded when use this theme.
Body : configure color, background, size for body of site

  • Background color: choose color background for website
  • Background Image: you can choose pattern for background from list
  • Font Size: choose font size.
  • Text Color: choose color for text
  • Link Color: color for link
  • Link Hover Color: color for link hover
  • Price Color: color for price
  • Product Name Color: color for product name
  • Blog Title Color: color for title of blog
  • Blog Date/View Color: color for blog date/view
Header : configure color, background, size for header of site

  • Background color: choose color background for website
  • Background Image: you can choose pattern for background from list
  • Text Color: choose color for text
  • Link Color: color for link
  • Icon Color: color for icon
Topbar : configure color, background, size for topbar of site

  • Background color: choose color background for website
  • Background Image: you can choose pattern for background from list
  • Text Color: choose color for text
  • Link Color: color for link
  • Icon Color: color for icon
Mainmenu : configure color, background, size for mainmenu of site

  • Background color: choose color background for main menuwebsite
  • Background Image: you can choose pattern for background from list
  • Font Size: choose font size.
  • Text Color: choose color for text
  • Link Color: color for link
  • Link Hover Color: color for link hover
  • Icon Color: color for price
  • Submenu link color: color for submenu
  • SubMenu Link Hover Color: color for submenu link hover
  • Dropdown Background Color: color for background dropdown
  • Dropdown Background Image: choose background image for dropdown
  • Group Color : color of menu item what set Group is Yes
Footer : configure color, background, size for footer of site

  • Background color: choose color background for website
  • Background Image: you can choose pattern for background from list
  • Block Title Color: choose color for title of block
  • Text Color: choose color for text
  • Link Color: color for link
  • Icon Color: color for icon

You can drag modules from left side to hooks on right side or drag modules from this hook to other hook.

In case frontend display not good after installation, you should check again hook of modules, modules should stay in hooks like image above.For some default modules of Prestashop, maybe you have to uninstall then install them again.

JMS Drop mega menu

It is a powerful mega menu for prestashop, supports responsive theme .

Configuring JMS Drop megamenu

Params for each menu item:

  • Name: Title will be display of menu item.
  • Parent: Choose parent of this menu item.
  • Menu Type:Choose type of menu item, has 9 types are product, category, link, cms, manufacturer, module, html, separator, supplier.
    • For product type, will display an input box for filling product id.
    • For category type, will display a select box for choosing category.
    • For cms type, will display a select box for choosing cms.
    • For link type, will display an input box for filling link.
    • For manufacturer type, will display a select box for choosing manufacturer.
    • For supplier type, will display a select box for choosing supplier.
    • For module type, will display 2 options are Show or Hide menu title, and display a select box for choosing module will display.
    • For html type, will display 2 option are Show or Hide menu title, and display text area for filling html.
  • Show title: show title of menu or not.
  • Menu Icon: menu has icon or not.
  • Icon class: choose class for Icon if you choose Menu Icon is yes.
  • Full width: configure submenu will be full width or not, choose yes for what main menu you want to have full width submenu.
  • Group: choose yes if you want this menu is head of 1 column, example you create 1 submenu with name is "Categories", choose Group is Yes, then create submenus of this menu are categories, you will have a column with title is "Categories", below are categories.
  • Column of Sub menus: Configure count of columns of sub menus
  • Width of Sub menus: Configure with of submenu in pixel
  • Width: If this menu is in level 2 you can use this value to change width for column, choose value from 1 to 12 .
  • Target: Choose trigger when click on this menu item, has 4 types are sefl, parent, blank, top.
  • Active: Active or not.

JMS Slider layer module

Jms Slider Layer is an all-purpose slide displaying solution that allows for showing almost any kind of content with highly customizable, transitions, effects and custom animations. Frontend of module :

General setting

  • The mode of the slider : Slider Mode (boxed, fullwidth, fullscreen).
  • Slider Class Suffix : Class Suffix for slider, this class added to cover div of slider.
  • Touch Enabled : Enable Swipe Function on touch devices.
  • Delay : The time one slide stays on the screen in Milliseconds
  • Grid Height : This Height of the Grid where Layers are displayed in Pixel. This Height is the Max Height of the Slider in Fullwidth Layout and in Responsive Layout. In Fullscreen Layout the Grid will be centered Vertically in case the Slider is higher than this value.
  • Grid Width : This Width of the Grid where Layers are displayed in Pixel. This Width is the Max Width of the Slider in Responsive Layout. In Fullscreen and in FullWidth Layout the Grid will be centered Horizontally in case the Slider is wider than this value.
  • Slider Shadow : The shadow style of the slider box. .
  • Spinner : The Layout of Loader. If not defined, it will use the basic spinner.
  • On Hover Stop : Stop the Timer if mouse is hovering the Slider. Caption/Layer animations are not stopped !! They will just play to the end.
  • Hide Timer Bar : Hidden the Timer Bar.
  • Timer Bar Position : The Position of timer bar.
  • Use Google Font : Enter google font family it loaded when use slider.
Navigation setting

  • Keyboard Navigation : Allows to use the Left/Right Arrow for Keyboard navigation when Slider is in Focus.
  • Navigation Type : Choose type of the "bullet/thumbnail" bar
  • Navigation Arrows : Choose position of the Navigation Arrows.
  • Navigation Style : The style of Bullets and Arrows if the navigation type is 'Bullet'.
  • Navigation Horizontal Align : Horizontal Align of the Navigation bullets / thumbs (depending on which navigation type was selected).
  • Navigation Vertical Align : Vertical Align of the Navigation bullets / thumbs (depending on which navigation type was selected).
  • Navigation Horizontal Offset : The Horizontal Offset position of the navigation depending on the aligned position.
  • Navigation Vertical Offset : The Vertical Offset position of the navigation depending on the aligned position.
Image setting

  • Image Resize : image resize setting for background image: Yes or No.
  • Image Width : This Width of image in Pixel. This Value use for resize image and Max-Width.
  • Image Height : This Height of image in Pixel. This Value use for resize image and Max-Height.
  • Thumbnail Width : This Width of image in Pixel, use for resize thumbnail
  • Thumbnail Height : This Height of image in Pixel, use for resize thumbnail
Slides list

Detail slide - General setting

  • Title : name of slide.
  • Transition : The appearance transition of this slide.
  • Slot Amount : The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy.
  • Master Speed : The speed of the transition in "ms". default value is 300 (0.3 sec).
  • Delay : A new delay value for this Slide. If it is defined, it will overwrite the default delay time in general setting of the module.
  • Link : A link on the whole slide pic.
  • Target : The target of the Link for the whole slide pic.
  • Ken Burn : Yes or No
  • Background Repeat : Yes or No
  • Background Position : position of background
  • Background Position End : For Ken Burns Animation. This is where the IMG will be animatied
  • Background Fitting : choose type of fitting
  • Background Fitting End : Use only a Number . i.e. 300 will be a 300% Zoomed image where the basic 100% is fitting with width or height.
  • Active : Active or Not
Detail slide - Background & Thumbnail

If background type is Yes

  • Background Image : upload background image
  • Thumbnail : Please upload thumbnail image to modules/jms_sliderlayer/images/prestashop_document/jms_megamall/thumbs/ folder.If use Default it will get thumbnail of background image.

If background type is No

  • Background Color : choose color
  • Thumbnail : Please upload thumbnail image to modules/jms_sliderlayer/images/prestashop_document/jms_megamall/thumbs/ folder.If use Default it will get thumbnail of background image.
Detail slide - Layers manager

It has 4 parts:

  • Part 1 : grid view of layers, where you can view all layers in this slide, grad and drop layers to position you want
  • Part 2 : 3 buttons what allow you to add more layers : text layer, image layer and video layer
  • Part 3 : list of layers in this slide, you can drag and drop for changing ordering of layers, also can delete layer as you want
  • Part 4 : when you click on layer on list part or click on layer on grid part, detail of that layer will display on left side

Add layer text: Enter text or htm you want to show

Add layer image: Chose image from list to show

Add layer video: select type of video (vimeo or youtube), fill id of video , video width and video height

Detail of layer text

  • Title : name of layer.
  • Layer Class : class in css of layer. These are Styling classes created in the settings.css You can add unlimited amount of Styles in your own css file, to style your captions at the top level already
  • Data X : Possible Values are 'left', 'center', 'right', or any Value between -2500 and 2500
  • Data Y : Possible Values are 'top', 'center', 'bottom', or any Value between -2500 and 2500.
  • Start : The timepoint in millisecond when/at the Layer should move in to the slide
  • End : The timepoint in millisecond when/at the Layer should move out from the slide
  • Incoming Animation : choose effect when this layer income on slider
  • Outgoing Animation : choose effect when this layer outcome on slider
  • Easing : The Easing Art how the layer is moved in to the slide
  • Text or html : Fill text or htl will show
  • Incoming Split Text : Split Text Animation (incoming transition) to 'words', 'chars' or 'lines'. This will create amazing Animation Effects on one go, without the needs to create more layers
  • Outgoing Split Text : Split Text Animation (incoming transition) to 'words', 'chars' or 'lines'. This will create amazing Animation Effects on one go, without the needs to create more layers
Detail of layer images

Same as layer text , only have more 1 field

  • Select Image: Please upload layers image to modules/jms_sliderlayer/images/prestashop_document/jms_megamall/layers/ folder, then choose image as you want
Detail of layer images

Same as layer text , only have more 4 fields

  • Video Source : choose type of video is youtube or vimeo
  • Video ID : fill ID of video
  • Video Width : width of video
  • Video height : height of video
  • Video Autoplay : video auto play when load or not

Advance Footer

It is advanced footer module for Prestashop

Row 1 :

  • Information: Block CMS
  • My account: Block my account footer
  • Shop: custom html
  • Follow Us: custom html
  • Newsletter : block newsletter

Row 2 :

  • Copyright : custom html

This module supports multi rows, each row has multi blocks, each block has some 3 options : Custom Html, Assign module and Link.

  • Title : title of row
  • Class : class of row
  • Active : active or not

Detail of each block

  • Title : title of block
  • Show Title : show title or not
  • Width: % width of this block in row
  • Row: choose row for block
  • Block type: choose block type
  • Html content: html content for Custom html type of block

  • Module assign :choose module when you choose Block type is Assign module
  • Hook : choose hook function of module

This module supports to drop and drag rows and blocks, module will auto save

JMS Ajax search module

This module allows you searching product at frontend with ajax. Frontend of module :

Backend of module

  • Number of products to be displayed : display price or not.
  • Show Description : show description or not
  • Description character limit: limit charaters of description
  • Show Price: show price or not
  • Show Image: show image or not

JMS Advance Blog

This module allows you manage article and show them at frontend as blog. Frontend of module :

Backend of module

Configuration of module

  • Title: title of module blog
  • Limit: limit of articles will be show in blog module
  • Show Image : show image or not
  • Thumb Width: thumb width
  • Thumb Height: thumb height
  • Show Description : show description or not
  • Show Readmore : show readmore or not
  • Show Category : shwo category or not
  • Show Date : show date or not
  • Show Description : show description or not
  • Show Views : show views or not

Detail category

  • Title: title of cateogry
  • Alias: alias
  • Parent Category: parent category, default is Root
  • Description: description
  • Image: image of category
  • Active : active or not

List articles

Detail article

  • Title: title of cateogry
  • Alias: alias
  • Category: category
  • Introtext: introtext of article, it will be displayed on blog module
  • Fulltext: full text will be displayed in detail article at frontend
  • Image: image of article, it will be displayed on blog
  • Meta Description: meta description
  • Meta Keywords: meta keywords
  • Active : active or not

JMS brands slider module

This module allows you showing a slider of brands logo. Frontend of module :

Backend of module

  • Auto play : auto play or not.
  • Number of items : number of items will load
  • Number of items show: number of items will show each time

Detail each brand

  • Image : choose image.
  • Title: title
  • URL: url of brand logo when click on it
  • Active: active or not

JMS Contact Information

This module will allow you to display your e-store's contact information in a customizable block.

JMS Custom Html Botcontent block

You can add html to this module for displaying at hook BotContent.

Frontend of module :

HTML code in backend:

						<div class="block-content">
		<h3>Free Shipping with order over 200$</h3>
		Nam commodo sem eu mollis temus. Curabitur nec gravida quam. Praesent neque est, vulputate ac congue eget, facilisis eget erat.</div>
						
						

JMS Custom Html Home

You can add html to this module for displaying at hook Home.

HTML code:

<div class="col-xs-12 col-sm-6 col-md-6 col-cmd-12"><a href="#"><img src="/themes/jms_megamall/img/demo/sale.png" alt="" /></a></div>
		<div class="col-xs-12 col-sm-6 col-md-6 col-cmd-12"><a href="#"><img src="/themes/jms_megamall/img/demo/headphone.png" alt="" /></a></div>

JMS Custom Html Top

You can add html to this module for displaying at hook Home.

HTML code:

<div class="col-xs-12 col-sm-12 col-md-4 col-cmd-12">
		<div class="service-box">
		<h3>14 days <br />return</h3>
		<span class="moneyback-icon"> </span></div>
		</div>
		<div class="col-xs-12 col-sm-12 col-md-4 col-cmd-12">
		<div class="service-box"><span class="service-intro">Our service will give you the best satisfaction that you can feel quickly.</span><span class="bestservice-icon"> </span></div>
		</div>
		<div class="col-xs-12 col-sm-12 col-md-4 col-cmd-12">
		<div class="service-box">
		<h3>24/7 <br />Support</h3>
		<span class="support-icon"> </span></div>
		</div>

JMS New products block

This module allows you showing a slider of new products. Frontend of module :

Backend of module

  • Products to display : Define the number of products to be displayed in this block.
  • Number of days for which the product is considered 'new'
  • Always display this block: Show the block even if no new products are available.

JMS On sale products block

This module allows you showing a slider of on sale products. Frontend of module :

Backend of module

  • Number of products to be displayed: Define the number of products to be displayed in this block.

Other modules

Best sellers module and banner module : overwrite them from default module of prestashop