- 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
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email contact us. Thanks so much!
Installation
You can install the theme by two way
1. automatically installation
2. manually installation
Automatically installation of the theme
- First of all you download archive
- 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, then click Save button
- After that you will JMS Sport theme in theme listing.
- Choose JMS Sport , 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 Sport 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:
- Download and upload jms_sport.zip to the "/themes" directory on your server.
- Login to your back-office and go to "Preferences" -> "Themes'. Click "Add new theme" button on right top.
- In Import from FTP part, select "jms_sport.zip" file in select box, then click Save button.
- After that you will JMS Sport theme in theme listing.
- Choose JMS Sport , 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!
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 Modules
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 :