JMS Gift - Prestashop Responsive Theme

Transcription

1 JMS Gift - Prestashop Responsive Theme

2 Compatible with: Prestashop 1.6.x

3 created: 7/12/2014 latest update: 18/12/2014 by: Joommasters.com 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 contact us. Thanks so much! Installation 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

4 Click on "Add file" button for choosing theme you want to install, then click Save button After that you will JMS Gift theme in theme listing. Choose JMS Gift, 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

5 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 Gift 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 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 Gift theme in theme listing. 5. Choose JMS Gift, then click "Use this theme" button

6 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

7 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 Gift Modules

8 JMS Gift have lots of modules used. Some are prestashop default module and some are developed by Joommasters team for JMS Gift from scrach or slightly modified prestashop default modules. JMS setting for theme This module allows you to configure JMS Gift 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. Setting panel: Show or Hide setting panel on front Use google font: this functions doesn't work in thin version Body : configure color, background, size for body of site

9 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

10 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

11 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

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

13 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

14 It is a powerful mega menu for prestashop, supports responsive theme. Configuring JMS Drop megamenu Params for each menu item:

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

16 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 : make submenu for Chirstmas menu like demo: You can see on image above, set "Full Width" is Yes, "Column of Sub menus" is 4 Chirstmas's submenu has 2 rows, row 1 has 4 columns, row 2 has 1 image full width, so Christmas has 5 submenu items

17 Detail of Chirstmas white: set "Column of Sub menus" is 1, set "Width" is 3 (that mean if whole width submenu of Chirstmas is 12, Chirstmas white has width is 3)

18 Same for Cake of chrismas,flower and wine and Special gift submenu items Detail of Promotions submenu item (image on bottom of submenu)

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

20 General setting

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

22 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

23 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

24 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

25 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/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/thumbs/ folder.if use Default it will get thumbnail of background image. Detail slide - Layers manager

26 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

27 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 and 2500 Data Y : Possible Values are 'top', 'center', 'bottom', or any Value between and 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

28 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/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 : About us: Custom Html From the blog: JMS Blog block

29 Facebook: facebook block Row 2 : Follow us : Block social Shop : Custom html Account : Block my account footer Information : Block cms Newsletter : Block newsletter Row 3 : Copyright text : Custom Html Payment logo : Block payment logo This module supports multi rows, each row has multi blocks, each block has some 3 options : Custom Html, Assign module and Link.

30 Title : title of row Class : class of row Active : active or not Detail of each block Title : title of block

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

32 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

33 JMS Blog This module allows you manage article and show them at frontend as blog. Frontend of module : Backend of module Configuration of module

34 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

35 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

36 Title: title of cateogry Alias: alias

37 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

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

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

40 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

41 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 Topcontent block You can add html to this module for displaying at hook Topsl. Frontend of module : HTML code in backend: <div class="pull-left phone"><span class="tphone"> </span><span class="top-phone"> </span></div > <div class="pull-left shipping"><span class="tcar"> </span><span class="top-shipping">free shipping on order $ </span></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: <h2>special SALE OFF FOR THIS VALENTINE S DAY</h2>

42 JMS Custom Html Top block You can add html to this module for displaying at hook Home. Frontend of module : HTML code in backend: <div class="box-container"> <div class="title-box"> <h2>welcome TO JMS GIFT STORE</h2> <div class="nova-heading-title"> </div> </div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut metus urna, fermentum at cursus sit amet, ullamcorper vitae erat.<br /> Aenean vulputate venenatis velit eu pulvinar. In venenatis blandit turpis nec auctor.</p> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-cmd-12 box-1"> <div class="service-box box-1"> <div class="hover-box"> <div class="title-box"> <h3>best for valentine</h3> <div class="nova-heading-title-in"> </div> <p>lorem ipsum is perfect your gift</p> </div> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-cmd-12 box-2"> <div class="service-box box-2"> <div class="hover-box"> <div class="title-box"> <h3>flower collection</h3> <div class="nova-heading-title-in"> </div> </div>

43 <p>it is a long established fact that a reader</p> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-cmd-12 box-3"> <div class="service-box box-3"> <div class="hover-box"> <div class="title-box"> <h3>top accessories</h3> <div class="nova-heading-title-in"> </div> </div> <p>all the ipsum generators the internet</p> </div> </div> </div>