JMS Shoes https://www.joommasters.com Tue, 19 Mar 2024 06:07:28 +0000 en-gb JMS Shoes https://www.joommasters.com/index.php/prestashop-document/jms-shoes/jms-shoes.html https://www.joommasters.com/index.php/prestashop-document/jms-shoes/jms-shoes.html

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!

1. Please read the complete instruction
2. Make sure you have installed and running the correct version of Prestashop
3. Backup your system before do anything is best
 
 
We recommend to use this theme on a new, clean installation or existing shops without custom core modifications.

You can install the theme by two way

1. automatically installation

2. manually installation

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, then click Save button
  • After that you will JMS Shoes theme in theme listing.
  • Choose JMS Shoes , 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 Shoes 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_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="https://www.joommasters.com/#"><img src="https://www.joommasters.com/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="https://www.joommasters.com/#"><img src="https://www.joommasters.com/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="https://www.joommasters.com/#"><img src="https://www.joommasters.com/themes/jms_shoes/img/demo/box1.jpg" alt="" /></a>
<h5><a href="https://www.joommasters.com/#">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="https://www.joommasters.com/#"><img src="https://www.joommasters.com/themes/jms_shoes/img/demo/box3.jpg" alt="" /></a>
<h5><a href="https://www.joommasters.com/#">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="https://www.joommasters.com/#"><img src="https://www.joommasters.com/themes/jms_shoes/img/demo/box2.jpg" alt="" /></a>
<h5><a href="https://www.joommasters.com/#">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="https://www.joommasters.com/#"><img src="https://www.joommasters.com/themes/jms_shoes/img/demo/box4.jpg" alt="" /></a>
<h5><a href="https://www.joommasters.com/#">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="https://www.joommasters.com/#"><img src="https://www.joommasters.com/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="https://www.joommasters.com/#"><img src="https://www.joommasters.com/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="https://www.joommasters.com/#"><img src="https://www.joommasters.com/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
]]>
phamsontung1984@yahoo.com (Pham Son Tung) JMS Shoes Fri, 24 Oct 2014 04:25:09 +0000