• created: 27/11/2014
• latest update: 28/11/2014
• by: Joommasters.com
• email: This email address is being protected from spambots. You need JavaScript enabled to view it.
• skype: tungpscnc or nguyenngochai84

Automatically installation of the theme

Manually installation of the template

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

1. Download and upload jms_styleshop.zip to the "/themes" directory on your server.
2. Login to your back-office and go to "Preferences" -> "Themes'. Click "Add new theme" button on right top.
3. In Import from FTP part, select "jms_styleshop.zip" file in select box, then click Save button.
4. After that you will JMS Styledshop theme in theme listing.
5. Choose JMS Styledshop , then click "Use this theme" button
   
6. On this step you will get information about theme installation status. Please mark all items (modules) you want and click "Save" button
   
7. 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!

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 Styledshop have lots of modules used. Some are prestashop default module and some are developed by Joommasters team for JMS Styledshop from scrach or slightly modified prestashop default modules.

JMS setting for theme

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

General setting :

• Theme skin: choose skin color for website
• Theme width: configure default width
• Responsive: responsive mode enable/disable.
• Theme laytout: Full width or boxed
• Product List Layout : full width of site or has column on left
• Setting panel: Show or Hide setting panel on front

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.

Example Women menu item :

It has 5 sub menu items, each item is 1 column, detail of Dresses menu item

Detail of Girl menu item (girl image on right side of submenu)

JMS Vertical menu

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

Configuring JMS Vertical menu

My team edit JMS Vertical menu from JMS Mega menu module, so it has same parameters but somw works, some not. We will update it later with full version

JMS Slideshow module

Jms Slideshow is . Frontend of module :

Params in backend and list slides

Params for each slide

• Background image: background image for this slide
• Small image: small image for this slide
• Title : title of slide
• Class: class for effect of this slide, have 7 classes : lefleft, leftright, rightright, updown, downdown, rupup, rupdown
• URL: link for readmore button
• Description : description of slide
• Active : active or not

Advance Footer

It is advanced footer module for Prestashop

Row 1 :

• Contact Infor: Block contact information
• Themes: Custom Html
• Features: Custom Html
• About us: Custom html

Row 2 :

• Newsletter : Block newsletter
• Follow us : Block social

Row 3 :

• Question : Custom Html
• Shipping : Custom Html
• News : Custom Html
• Map : Custom html

Row 4 :

• Payment logo : Block payment logos
• Copyright text : 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 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 : show 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

Featured products block

This is default module allows you showing a slider of featured products. Frontend of module :

JMS New products block

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

Backend of module

• Products to display: number of products will display
• Number of days for whick the product is considered New:
• Always display this block: show block even if no new product

JMS Deal block

This is module allows you showing a slider of on special products what you want to discount price in a timeline. 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 be show each time

Below is deal list where you can add new, edit, delete, enable or diable a deal

Detail a deal

• Product: when you type in this field some charaters, it will have a dropdown box with products what has those charaters in name
• Exprice time: set time for count down
• Active: active or not

JMS Custom Html Topsl block

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

Frontend of module :

HTML code in backend:

				<div class="row">
<div class="col-md-4 col-lg-4 col-sm-4">
<div class="free_ship">
<div class="icon"> </div>
<div class="content_topsl">
<p>free shipping</p>
<em>On order over $100</em></div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<div class="money_back">
<div class="icon"> </div>
<div class="content_topsl">
<p>Free return items</p>
<em>Free 30 Days Return Policy</em></div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<div class="order_online">
<div class="icon"> </div>
<div class="content_topsl">
<p>Quality support</p>
<em>Call us support 24/7</em></div>
</div>
</div>
</div>
				

JMS Custom Html Home block

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

Frontend of module :

HTML code in backend:

				<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
<div class="services box-6">
<p>Men's</p>
<h4>Collection</h4>
<strong>Save up to 20% off</strong></div>
</div>
<div class="col-md-3 col-lg-3 col-sm-6 col-xs-6">
<div class="services box-3-left">
<div class="content_box">
<p>Best</p>
<h4>For Women</h4>
<em>Save money</em></div>
<div class="content_box_3"><strong>Dress</strong></div>
</div>
</div>
<div class="col-md-3 col-lg-3 col-sm-6 col-xs-6">
<div class="services box-3-right">
<div class="content_box_3">
<h4>Accessories</h4>
</div>
<div class="content_box">
<p>Big collection</p>
<em>Big sale</em> <strong>Shop Now</strong></div>
</div>
</div>
				
				

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="botcontent-carousel">
<div class="item ajax_block_botcontent">
<div class="block-content">
<h3>CLIENTS SAY</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,<br /> by injected humour, or randomised.</p>
<span class="client">ALEXSANDER MAX<br /><em>(14:00 - Oct 6th 2014)</em></span></div>
</div>
<div class="item ajax_block_botcontent">
<div class="block-content">
<h3>CLIENTS SAY</h3>
<p>A woman had me use her photo as part of her new ad. She paid for some touch-ups with Photoshop,<br /> so I sent her the new picture.</p>
<span class="client">ALEXSANDER MAX<br /><em>(14:00 - Oct 6th 2014)</em></span></div>
</div>
<div class="item ajax_block_botcontent">
<div class="block-content">
<h3>CLIENTS SAY</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod magna aliqua.<br /> Ut enim ad minim veniam, quis nostrud exercitation .</p>
<span class="client">ALEXSANDER MAX<br /><em>(14:00 - Oct 6th 2014)</em></span></div>
</div>
</div>
				

• created: 15/11/2014
• latest update: 16/11/2014
• by: Joommasters.com
• email: This email address is being protected from spambots. You need JavaScript enabled to view it.
• skype: tungpscnc or nguyenngochai84

Automatically installation of the theme

Manually installation of the template

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

1. Download and upload jms_sport.zip to the "/themes" directory on your server.
2. Login to your back-office and go to "Preferences" -> "Themes'. Click "Add new theme" button on right top.
3. In Import from FTP part, select "jms_sport.zip" file in select box, then click Save button.
4. After that you will JMS Sport theme in theme listing.
5. Choose JMS Sport , then click "Use this theme" button
   
6. On this step you will get information about theme installation status. Please mark all items (modules) you want and click "Save" button
   
7. 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!

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 Sport have lots of modules used. Some are prestashop default module and some are developed by Joommasters team for JMS Sport from scrach or slightly modified prestashop default modules.

JMS setting for theme

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

General setting :

• Theme skin: choose skin color for website
• Theme width: configure default width
• Responsive: responsive mode enable/disable.
• Theme laytout: Full width or boxed
• Product List Layout : full width of site or has column on left
• Setting panel: Show or Hide setting panel on front

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_sport/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_sport/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_sport/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
• Newsletter: Block newsletter

Row 2 :

• Social Networking : JMS social networking
• Payment logo : Block payment logos

Row 3 :

• Payment logo : Block payment logos
• Copyright text : 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 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 : show 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

Featured products block

This is default module allows you showing a slider of featured products. Frontend of module :

JMS New products block

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

Backend of module

• Products to display: number of products will display
• Number of days for whick the product is considered New:
• Always display this block: show block even if no new product

JMS Custom Html Home block

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

Frontend of module :

HTML code in backend:

				<div class="col-xs-4 col-sm-4 col-md-4 col-cmd-12">
<div class="top-brand"><img class="img-responsive" title="sport" src="/themes/jms_sport/img/demo/sport_1.jpg" alt="" /></div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-cmd-12">
<div class="bike"><img class="img-responsive" title="sport" src="/themes/jms_sport/img/demo/sport_2.jpg" alt="" /></div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-cmd-12">
<div class="moto"><img class="img-responsive" title="sport" src="/themes/jms_sport/img/demo/sport_3.jpg" alt="" /></div>
</div>
				

JMS Custom Html Home block

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

Frontend of module :

HTML code in backend:

				<p>SAVING 9% FOR ALL CLOTHING AND ACCESSORIES SPORTS</p>
<div class="button"><a title="" href="#">Shop Now</a></div>
				
				

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 Topcontent block

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

Frontend of module :

HTML code in backend:

				<div class="pull-right phone-number">+33.42500011</div>
				
				

Modules at hook Topcolumn

This hook has 3 modules:

1.Module JMS Custom HTML Topcolumn

HTML code:

				<div class="testimonials topcolumn-block">
<h3>testimonials</h3>
<div class="inside">
<p><strong>Morbi eget dolor</strong><br /> "bibendum pretium, dictum a, mattis nec, dolor. Curabitur convallis facilisis lorem. Vivamus euismod nulla vel nunc. Fusce tincidunt, justo congue egestas molestie."</p>
</div>
<div class="inside">
<p><strong>Morbi eget dolor</strong><br /> "Curabitur convallis facilisis lorem. Vivamus euismod nulla vel nunc. Fusce tincidunt, justo congue egestas molestie, tortor tortor blandit erat, et scelerisque metus."</p>
</div>
</div>
				
				

2. Module JMS Facebook Like box block

Backend configuration :

3. Module JMS Contact information

Backend configuration :

• created: 1/11/2014
• latest update: 1/11/2014
• by: Joommasters.com
• email: This email address is being protected from spambots. You need JavaScript enabled to view it.
• skype: tungpscnc or nguyenngochai84

Automatically installation of the theme

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_wine" 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 Wine have lots of modules used. Some are prestashop default module and some are developed by Joommasters team for JMS Wine from scrach or slightly modified prestashop default modules.

JMS setting for theme

This module allows you to configure JMS Wine 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_wine/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_wine/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_wine/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 :

• Contact Us: Block Contact Informations
• Information: Block CMS
• My account: Block my account footer
• Shop: Custom Html
• Newsletter: Block newsletter

Row 2 :

• Copyright : custom html
• Payment logo : Block payment logos

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 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 : show 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

Featured products block

This is default module allows you showing a slider of featured products. Frontend of module :

JMS New products block

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

Backend of module

• Products to display: number of products will display
• Number of days for whick the product is considered New:
• Always display this block: show block even if no new product

JMS Custom Html Topsl block

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

Frontend of module :

HTML code in backend:

				<div id="effect-1" class="effects clearfix">
<div class="col-xs-6 col-sm-6 col-md-3 col-cmd-6">
<div class="img"><img src="/themes/jms_wine/img/demo/banner-1.png" alt="" width="270" height="141" />
<div class="overlay"><a class="expand" href="#">WINE HUMOR</a>
<p>A little knowledge goes a long way, Lorum ipsum dolor</p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-cmd-6">
<div class="img"><img src="/themes/jms_wine/img/demo/banner-2.png" alt="" width="270" height="141" />
<div class="overlay"><a class="expand" href="#">WINE COLOR</a>
<p>A little knowledge goes a long way, Lorum ipsum dolor</p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-cmd-6">
<div class="img"><img src="/themes/jms_wine/img/demo/banner-3.png" alt="" width="270" height="141" />
<div class="overlay"><a class="expand" href="#">WINE LIST</a>
<p>A little knowledge goes a long way, Lorum ipsum dolor</p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-cmd-6">
<div class="img"><img src="/themes/jms_wine/img/demo/banner-4.png" alt="" width="270" height="141" />
<div class="overlay"><a class="expand" href="#">WINE RATING</a>
<p>A little knowledge goes a long way, Lorum ipsum dolor</p>
</div>
</div>
</div>
</div>
				
				

JMS Custom Html Home block

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

Frontend of module :

HTML code in backend:

				<div class="block-content">
<h3>HOW TO DELIVER A WINE</h3>
<a title="" href="#">Read Now</a></div>
				
				

JMS Custom Html Left block

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

Frontend of module :

HTML code in backend:

				<p><img src="/themes/jms_wine/img/demo/left_banner.png" alt="" /></p>
				
				

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.

• created: 2/10/2014
• latest update: 3/10/2014
• by: Joommasters.com
• email: This email address is being protected from spambots. You need JavaScript enabled to view it.
• skype: tungpscnc or nguyenngochai84

Automatically installation of the theme

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_shoes" 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 Shoes have lots of modules used. Some are prestashop default module and some are developed by Joommasters team for JMS Shoes from scrach or slightly modified prestashop default modules.

JMS setting for theme

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

General setting :

• Theme skin: choose skin color for website
• Theme layout: choose layout for website: default 1 colum or 2 columns
• 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_shoes/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_shoes/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_shoes/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 :

• Time for finish: Custom Html
• Join our newsletter for offers and updates: Block Newsletter

Row 2 :

• About Us: Custom Html
• Information: Block CMS
• My account: Block my account footer
• Shop: Custom Html
• Shoes store: Block Contactinfos

Row 3 :

• Copyright : custom html
• Payment logo : Block payment logos

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 Social networking block

This module will allow you to display your social button on TopRight.

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="col-xs-12 col-sm-6 col-md-6 col-cmd-12"><a href="#"><img src="/themes/jms_shoes/img/demo/our_process.jpg" alt="" /></a></div>
<div class="col-xs-12 col-sm-6 col-md-6 col-cmd-12"><a href="#"><img src="/themes/jms_shoes/img/demo/our_heritage.jpg" alt="" /></a></div>
				
				

JMS Custom Html Botsl block

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

Frontend of module :

HTML code in backend:

				<div class="custom-title">Our services</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="services-box-inner box-left"><a class="services-box" href="#"><img src="/themes/jms_shoes/img/demo/box1.jpg" alt="" /></a>
<h5><a href="#">24/7 Support</a></h5>
Maecenas eu enim in lorem .</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="services-box-inner"><a class="services-box" href="#"><img src="/themes/jms_shoes/img/demo/box3.jpg" alt="" /></a>
<h5><a href="#">24/7 Support</a></h5>
Maecenas eu enim in lorem .</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="services-box-inner box-right"><a class="services-box" href="#"><img src="/themes/jms_shoes/img/demo/box2.jpg" alt="" /></a>
<h5><a href="#">24/7 Support</a></h5>
Maecenas eu enim in lorem .</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="services-box-inner"><a class="services-box" href="#"><img src="/themes/jms_shoes/img/demo/box4.jpg" alt="" /></a>
<h5><a href="#">24/7 Support</a></h5>
Maecenas eu enim in lorem .</div>
</div>
				
				

JMS Custom Html Topsl block

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

Frontend of module :

HTML code in backend:

				<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="topcontent-box-inner box-left"><a class="topcontent-box" href="#"><img src="/themes/jms_shoes/img/demo/demo1.jpg" alt="" /></a></div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="topcontent-box-inner"><a class="topcontent-box" href="#"><img src="/themes/jms_shoes/img/demo/demo2.jpg" alt="" /></a></div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="topcontent-box-inner box-right"><a class="topcontent-box" href="#"><img src="/themes/jms_shoes/img/demo/demo3.jpg" alt="" /></a></div>
</div>
</div>
				
				

JMS Custom Html Topcontent

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

HTML code:

<div class="col-xs-12">
<h3>Super product over time</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum felis</p>
</div>

JMS Featured products block

This is default module allows you showing a slider of featured 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 Tab products block

This module allows you showing tabs of new, featured, best seller and special deal products. Frontend of module :

Backend of module

• Show new products: show new products or not
• Show featured products: show featured products or not
• Show best seller products: show best seller products or not
• Show special products: show special products or not
• Total number of products: total products in each tab
• Number of products to be displayed : number of product will display each time in 1 tab
• Number of products per row: number of products per row
• Slide Auto Play: autot play or not
• Slide Duration: slide duration
• Slide Width: slide width
• Slide Height: slide height
• Short Desc Limit Character: limit character of short desc
• Show Add To Cart : show add to cart or not
• Show Price : show price or not
• Show Short Desc : show short desc or not

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

• created: 15/07/2014
• latest update: 16/07/2014
• by: Joommasters.com
• detail: JMS Kid
• email: This email address is being protected from spambots. You need JavaScript enabled to view it.
• skype: tungpscnc or nguyenngochai84

Automatically installation of the theme

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_kid" 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 regenerate images.

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

JMS setting for theme

This module allows you to configure JMS Kid theme

• Theme skin: choose skin color for website
• Theme width: configure default width
• Responsive: turn on responsive or not
• background pattern: choose type pattern for background
• Setting demo panel: show setting block at front-end or not

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 Slideshow2

This module displays slideshow full width .

Params for each slide

• Background image: background image for this slide
• Small image: small image for this slide
• Title : title of slide
• Class: class for effect of this slide, have 7 classes : lefleft, leftright, rightright, updown, downdown, rupup, rupdown
• URL: link for readmore button
• Description : description of slide
• Active : active or not

JMS Custom Html Footer

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

HTML code:

<p>All Rights Reserved.Designed by <a href="#">Joommasters.com</a>. Powered by <a href="#">Prestashop</a>.</p>

JMS Custom Html Botcontent block

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

Frontend of module :

Backend of module :

HTML code:

				<div class="blog-box">
<div class="blog-image"><img src="/modules/jms_customhtml_botcontent/images/prestashop_document/jms_kid/img1.jpg" alt="" />
<div class="mask"> </div>
</div>
<h4><a href="#">Vivamus eu tortor</a></h4>
<p>Pellentesque mollis consequat purus sit amet vulputate.</p>
<a class="blg-readmore" href="#">Read more</a></div>
<div class="blog-box">
<div class="blog-image"><img src="/modules/jms_customhtml_botcontent/images/prestashop_document/jms_kid/img2.jpg" alt="" />
<div class="mask"> </div>
</div>
<h4><a href="#">Vivamus eu tortor</a></h4>
<p>Pellentesque mollis consequat purus sit amet vulputate.</p>
<a class="blg-readmore" href="#">Read more</a></div>
<div class="blog-box">
<div class="blog-image"><img src="/modules/jms_customhtml_botcontent/images/prestashop_document/jms_kid/img3.jpg" alt="" />
<div class="mask"> </div>
</div>
<h4><a href="#">Vivamus eu tortor</a></h4>
<p>Pellentesque mollis consequat purus sit amet vulputate.</p>
<a class="blg-readmore" href="#">Read more</a></div>
<div class="blog-box">
<div class="blog-image"><img src="/modules/jms_customhtml_botcontent/images/prestashop_document/jms_kid/img4.jpg" alt="" />
<div class="mask"> </div>
</div>
<h4><a href="#">Vivamus eu tortor</a></h4>
<p>Pellentesque mollis consequat purus sit amet vulputate.</p>
<a class="blg-readmore" href="#">Read more</a></div>
<div class="blog-box">
<div class="blog-image"><img src="/modules/jms_customhtml_botcontent/images/prestashop_document/jms_kid/img3.jpg" alt="" />
<div class="mask"> </div>
</div>
<h4><a href="#">Vivamus eu tortor</a></h4>
<p>Pellentesque mollis consequat purus sit amet vulputate.</p>
<a class="blg-readmore" href="#">Read more</a></div>
<div class="blog-box">
<div class="blog-image"><img src="/modules/jms_customhtml_botcontent/images/prestashop_document/jms_kid/img2.jpg" alt="" />
<div class="mask"> </div>
</div>
<h4><a href="#">Vivamus eu tortor</a></h4>
<p>Pellentesque mollis consequat purus sit amet vulputate.</p>
<a class="blg-readmore" href="#">Read more</a></div>
<div class="blog-box">
<div class="blog-image"><img src="/modules/jms_customhtml_botcontent/images/prestashop_document/jms_kid/img1.jpg" alt="" />
<div class="mask"> </div>
</div>
<h4><a href="#">Vivamus eu tortor</a></h4>
<p>Pellentesque mollis consequat purus sit amet vulputate.</p>
<a class="blg-readmore" href="#">Read more</a></div>
<div class="blog-box">
<div class="blog-image"><img src="/modules/jms_customhtml_botcontent/images/prestashop_document/jms_kid/img4.jpg" alt="" />
<div class="mask"> </div>
</div>
<h4><a href="#">Vivamus eu tortor</a></h4>
<p>Pellentesque mollis consequat purus sit amet vulputate.</p>
<a class="blg-readmore" href="#">Read more</a></div>
				
				

Advance Footer

It is advanced footer module for Prestashop

Row 1 :

• Newsletter : block newsletter
• Follow Us : block JMS Social

Row 2 :

• Information: Block CMS
• My account: Block my account footer
• Shop: custom html
• Social channel: custom html
• Store information: block contactinfos

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 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 Featured products filter block

This module allows you showing a slider of featured products by category, you can select cateogry to view featured products or view all, module has a great effect for loading products. Frontend of module :

Backend of module

• Display product's price : display price or not.
• Number of products each category

JMS Image Gallery block

This module allows you manage images and show them at frontend as slider. Frontend of module :

Backend of module

• Auto play: slider at frontend auto play or not
• Show navigation: show arrows or not
• Lightbox image max width: max width of image when popup lightbox
• Lightbox image max height: max height of image when popup lightbox
• Column: number of columns when display images
• Row: number of rows when display images

Detail of each image

• Background image: image
• Title: title of image
• Url: url of image
• Description: description of image
• Active: active or not

 

• created: 09/06/2014
• latest update: 10/06/2014
• by: Joommasters.com
• detail: JMS Furniture
• email: This email address is being protected from spambots. You need JavaScript enabled to view it.
• skype: tungpscncn or nguyenngochai84

Automatically installation of the theme

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_furniture" 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 regenerate images.

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

JMS setting for theme

This module allows you to configure JMS Furniture theme

• Theme skin: choose skin color for website
• Map type: choose type of map : Image hotspot or Map location
• Theme width: configure default width
• Responsive: turn on responsive or not
• Setting demo panel: show setting block at front-end or not

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 Slideshow2

This module displays slideshow full width .

Params for each slide

• Background image: background image for this slide
• Small image: small image for this slide
• Title : title of slide
• Class: class for effect of this slide, have 7 classes : lefleft, leftright, rightright, updown, downdown, rupup, rupdown
• URL: link for readmore button
• Description : description of slide
• Active : active or not

JMS Custom Html Footer

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

HTML code:

<p>All Rights Reserved.Designed by <a href="#">Joommasters.com</a>. Powered by <a href="#">Prestashop</a>.</p>

JMS Custom Html Botcontent block

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

Frontend of module :

Backend of module :

HTML code:

				<div class="blog-box">
				<div class="blog-image"><img src="/img/demo/img1.png" alt="" />
				<div class="mask"> </div>
				</div>
				<h4><a href="#">Vivamus eu tortor</a></h4>
				<div class="blog-date">Tuesday,20 May 2014 09:46</div>
				<p>Pellentesque mollis consequat purus sit amet vulputate. Vivamus eu tortor ac elit vulputate porta. Fusce consectetur.</p>
				<a class="blg-readmore" href="#">Read more</a></div>
				<div class="blog-box">
				<div class="blog-image"><img src="/img/demo/img2.png" alt="" />
				<div class="mask"> </div>
				</div>
				<h4><a href="#">Vivamus eu tortor</a></h4>
				<div class="blog-date">Tuesday,20 May 2014 09:46</div>
				<p>Pellentesque mollis consequat purus sit amet vulputate. Vivamus eu tortor ac elit vulputate porta. Fusce consectetur.</p>
				<a class="blg-readmore" href="#">Read more</a></div>
				<div class="blog-box">
				<div class="blog-image"><img src="/img/demo/img3.png" alt="" />
				<div class="mask"> </div>
				</div>
				<h4><a href="#">Vivamus eu tortor</a></h4>
				<div class="blog-date">Tuesday,20 May 2014 09:46</div>
				<p>Pellentesque mollis consequat purus sit amet vulputate. Vivamus eu tortor ac elit vulputate porta. Fusce consectetur.</p>
				<a class="blg-readmore" href="#">Read more</a></div>
				<div class="blog-box">
				<div class="blog-image"><img src="/img/demo/img4.png" alt="" />
				<div class="mask"> </div>
				</div>
				<h4><a href="#">Vivamus eu tortor</a></h4>
				<div class="blog-date">Tuesday,20 May 2014 09:46</div>
				<p>Pellentesque mollis consequat purus sit amet vulputate. Vivamus eu tortor ac elit vulputate porta. Fusce consectetur.</p>
				<a class="blg-readmore" href="#">Read more</a></div>
				<div class="blog-box">
				<div class="blog-image"><img src="/img/demo/img3.png" alt="" />
				<div class="mask"> </div>
				</div>
				<h4><a href="#">Vivamus eu tortor</a></h4>
				<div class="blog-date">Tuesday,20 May 2014 09:46</div>
				<p>Pellentesque mollis consequat purus sit amet vulputate. Vivamus eu tortor ac elit vulputate porta. Fusce consectetur.</p>
				<a class="blg-readmore" href="#">Read more</a></div>
				<div class="blog-box">
				<div class="blog-image"><img src="/img/demo/img2.png" alt="" />
				<div class="mask"> </div>
				</div>
				<h4><a href="#">Vivamus eu tortor</a></h4>
				<div class="blog-date">Tuesday,20 May 2014 09:46</div>
				<p>Pellentesque mollis consequat purus sit amet vulputate. Vivamus eu tortor ac elit vulputate porta. Fusce consectetur.</p>
				<a class="blg-readmore" href="#">Read more</a></div>
				<div class="blog-box">
				<div class="blog-image"><img src="/img/demo/img1.png" alt="" />
				<div class="mask"> </div>
				</div>
				<h4><a href="#">Vivamus eu tortor</a></h4>
				<div class="blog-date">Tuesday,20 May 2014 09:46</div>
				<p>Pellentesque mollis consequat purus sit amet vulputate. Vivamus eu tortor ac elit vulputate porta. Fusce consectetur.</p>
				<a class="blg-readmore" href="#">Read more</a></div>
				<div class="blog-box">
				<div class="blog-image"><img src="/img/demo/img4.png" alt="" />
				<div class="mask"> </div>
				</div>
				<h4><a href="#">Vivamus eu tortor</a></h4>
				<div class="blog-date">Tuesday,20 May 2014 09:46</div>
				<p>Pellentesque mollis consequat purus sit amet vulputate. Vivamus eu tortor ac elit vulputate porta. Fusce consectetur.</p>
				<a class="blg-readmore" href="#">Read more</a></div>
				
				

JMS Custom Html Topsl

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

Frontend of module :

HTML code:

<<div class="col-xs-12 col-sm-4 col-md-4">
			<div class="grid-ic">
			<div class="grid-c">
			<h3>Our Services</h3>
			<p>Duis congue felis lectus, vel viverra leo varius ac. Donec eget viverra tortor, eget varius quam. Pellentesque.</p>
			</div>
			<div class="grid-i">
			<div class="img-intro"><img src="/themes/jms_furniture/img/demo/topsl-3.png" alt="" /></div>
			<a class="btn btn-readmore" href="#">Read more</a></div>
			</div>
			</div>
			<div class="col-xs-12 col-sm-4 col-md-4">
			<div class="grid-ic red">
			<div class="grid-i">
			<div class="img-intro"><img src="/themes/jms_furniture/img/demo/topsl-1.png" alt="" /></div>
			<a class="btn btn-readmore" href="#">Read more</a></div>
			<div class="grid-c">
			<h4>Bedroom Design</h4>
			<p>Mauris molestie felis ac blandit cursus. Maecenas id fermentum ante. Suspendisse id tincidunt.</p>
			</div>
			</div>
			</div>
			<div class="col-xs-12 col-sm-4 col-md-4">
			<div class="grid-ic blue">
			<div class="grid-c">
			<h4>Living Room Design</h4>
			<p>Tiam hendrerit metus mauris, sit amet consectetur libero volutpat vel. Suspendisse est justo.</p>
			</div>
			<div class="grid-i">
			<div class="img-intro"><img src="/themes/jms_furniture/img/demo/topsl-2.png" alt="" /></div>
			<a class="btn btn-readmore" href="#">Read more</a></div>
			</div>
			</div>
	

Advance Footer

It is advanced footer module for Prestashop

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

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 New products block

This module allows you showing a slider of new products

• 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.

Featuered products on homepage block and Payment logos block

They are default module of Prestashop, JMS Furniture overwrites them a bit