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