DRESSSHOP RESPONSIVE PRESTASHOP THEME USER GUIDE Version 1.0 Created by: arenathemes Page 1
Contents I. REQUIREMENTS & COMPATIBILITY... 3 II. INSTALLATION... 3 III. CONFIG AFTER INSTALLATION - THEME PACKAGE... 5 1. Install sample data and setting for modules... 5 2. Check the position of module in Back Office.... 6 3. Attaching a module to a hook... 14 4. Disable the mobile theme.... 14 5. Configuring Columns... 15 6. Configure image size... 17 7. Configure perfomance... 17 8. Change color theme... 18 IV. CONFIGURE MODULES... 18 1. BC SETTING THEME... 21 2. BC AJAX SEARCH... 23 3. BC BANNER TOP... 24 4. BC COOKIE LAW... 25 5. BC TAGS BLOCK... 26 6. BC FILTER PRODUCT... 27 7. BC PRODUCT WITH CATEGORY... 29 8. BC MANUFACTURER... 32 9. BC NEWSLETTER... 32 10. BC STATIC BLOCK... 33 11. BC MEGA MENU... 35 12. BC SLIDESHOW IMAGE... 40 13. BC BLOG... 44 14. BC BLOG LATEST POST... 51 Page 2
I. REQUIREMENTS & COMPATIBILITY Our themes are compatible with the Prestashop versions 1.6 or higher (PHP 5 or later, and mysql 5 or later). Most JavaScript enabled Browsers will make them work without issues. They are designed and optimized for desktops, tablets and smartphones. Currently we are testing themes in: Google Chrome (Mac and PC) Firefox (Mac and PC) Internet Explorer 10 and later Safari (Mac and PC) IMPORTANT!!! Make sure that your web host has the minimum requirements to run Prestashop. Always make sure they are running with the latest version of Prestashop. You can download the latest version of Prestashop on the official Prestashop website. Always remember to create the secure passwords for FTP and Database. II. INSTALLATION If you are new with Prestashop, we advise reading and familiarizing yourself with the Prestashop Manual. We believe it will be helpful to you! If you are ready, follow the instruction below: Package dressshop-theme-package_1.6.x_vx.zip Step 1: Go to menu PREFERENCES > THEMES, select Add new theme Step 2: Find IMPORT FROM YOUR COMPUTER, select your theme package and click Save Page 3
Step 3: After, go to part "SELECT A THEME FOR SHOP", click "Use this theme" as image below After,click Save and Finish Page 4
Theme installation finishes. Next, you need run step "Config after Installation - Theme package" III. CONFIG AFTER INSTALLATION - THEME PACKAGE After complete the installation of the theme, you need to do some changes in configuration in order to make sure the theme works and looks correctly. 1. Install sample data and setting for modules In your back office go to Modules and Services > Modules and Services and check the module list authorized by arenathemes is whether installed (if module don't install, please install it). Then, Go to "Modules and Services > Modules and Services" and find module BC Setting Theme Click button "Reset Data". It will reset arenatheme modules to default configure Page 5
2. Check the position of module in Back Office. In your backoffice go to Modules and Services > Positions, you check "Display non-positionable hooks" so see all hooks. Now you can config the position of modules in the same hooks and order as image below If you don't see module in hooks, you can reference step attaching a module to a hook in document. Page 6
Page 7
Page 8
Page 9
Page 10
Page 11
Page 12
Page 13
3. Attaching a module to a hook If you don't see module in hooks, you can reference step attaching a module to a hook: Transplanting 4. Disable the mobile theme. - Go to Preferences > Themes. And Click Save Page 14
5. Configuring Columns We are pleased to announce: In Prestashop version 1.6: You can configure the column for each page - Go to Preferences > Themes, Click Advanced settings and setting columns: Page 15
Page 16
6. Configure image size Image size of your site should be configured the same guidelines to ensure the best interface - Go to Preferences > Image, configure "Width" & "Height" as image follows: - Regenerates thumbnails for all existing product images Regenerates thumbnails help generate images of your website by the new size image 7. Configure perfomance -See result in front-end, if the result is not the same demo, go to Advanced Parameters > Performance, check "Template cache" is Force Compile, "Cache" is no and click Save. - Refesh your front-end, intallation process finishes. Page 17
8. Change color theme - You can access this path../themes/dressshop/css/modules/bcsettingtheme/views/css/ then you will see bc-all-color.css file please rename it to bc-all.css and replace the current bc-all.css file that styling theme in light green color. IV. CONFIGURE MODULES After complete the installation of the theme, you can reference manual use modules in next section. Page 18
Page 19
Page 20
1. BC SETTING THEME This module help users to change layout and some configuration of theme. Go to "Modules and Services > Modules and Services" and find module BC Setting Theme 1. The functions can edit: Disable/enable menu sticky Disable/enable scroll to top Disable/enable button quick view Disable/enable Smooth scroll Disable/enable Appear animation Page 21
Config layout for page : Boxed or wide mode for PAGE Config boxed mode width (in case boxed mode for page is actived). Set 0 to disable option and get default width. Config layout mode for HEADER(in case wide mode for page is actived) Boxed mode Wide mode only background Wide mode content and background Config layout mode for FOOTER(in case wide mode for page is actived) Boxed mode Wide mode Config category page : Config number of product lines for category page Disable/enable list grid icon Page 22
Config list, grid default display Disable/enable sub categories, slider for sub categories, image category, description category Disable/enable slider for sub categories Disable/enable show image of category Disable/enable show description of category Config image for sub categories: In page category, list sub categories display images thumbnail of sub categories or product image of this sup categories. Config product page : Disable/enable use tab for product information 2. BC AJAX SEARCH This module is show ajax product when you use search form on header In backend, go to "Modules and Services > Modules and Services" and find module "BC Ajax Search" Configure limit number product display in ajax search box Page 23
Display on frontend 3. BC BANNER TOP This module is show banner header on frontend Page 24
In backend, go to "Modules and Services > Modules and Services" and find module "BC Banner Top" Add/Edit banner content Content : input HTML or image banner for banner item Display : Enable/Disable this banner on frontend Display on frontend 4. BC COOKIE LAW This module is show popup accept cookie on frontend In backend, go to "Modules and Services > Modules and Services" and find module "BC Cookie Law" Add/Edit banner content Content : input HTML content for message cookie Display : Enable/Disable this popup cookie on frontend Page 25
Display on frontend 5. BC TAGS BLOCK This module is show popup accept cookie on frontend In backend, go to "Modules and Services > Modules and Services" and find module "BC Tags Block" Configure setting tag Note : You can add tags for products in : Catalog > Tags Page 26
Display on frontend 6. BC FILTER PRODUCT This module is filter and show product blocks on frontend. You can use many product blocks on frontend In backend, go to "Modules and Services > Modules and Services" and find module "BC Filter Product" Add/Edit/Delete/Enable/Disable filter product block Page 27
Add/Edit Filter Product Title Product : title each product block show on frontend New Product : get products is new product Feature Product : get products of root category "Home" Bestseller : get products is bestseller Special Product : get products have special price Hook : select postion display this filter block on frontend Template : template display product block Custom Template : Input if you choose "Template" is "Custom". File template create in folder /modules/bcfilterproduct/views/templates/hook/namecustom.tpl Number product : Limit number products get in product list Number product display : Number product display in slider. ("Use slider" is active) Image size : type product image show on frontend Disable/enable use slider products Disable/enable this filter block on frontend Display on frontend Page 28
7. BC PRODUCT WITH CATEGORY This module is show product of categories on frontend. You can use many product blocks on frontend In backend, go to "Modules and Services > Modules and Services" and find module "BC Product With Category" Add/Edit/Delete/Enable/Disable filter product block Add/Edit Filter Product List Content Category : add/edit/delete list categories will get products Title Product : title each product block show on frontend Hook : select postion display this block on frontend Page 29
Template : template display product block Custom Template : Input if you choose "Template" is "Custom". File template create in folder /modules/bcproductwithcategories/views/templates/hook/namecustom.tpl Number product : Limit number products get in product list Number product display : Number product display in slider. ("Use slider" is active) Image size : type product image show on frontend Disable/enable use slider products Disable/enable this product block on frontend Content : description block on frontend Order : sort block on frontend Add/Edit content category Disable/enable this category product block on frontend Category : select category will get products Page 30
Choose big product : select big product will show on frontend Big image size : size image product of big product Class : if you need edit css for each block, you can add class for block item. Content : description for each tab product Display on frontend Page 31
8. BC MANUFACTURER This module is show slider logo manufacturer on frontend In backend, go to "Modules and Services > Modules and Services" and find module "BC Manufacturer" Configure title and number item display in slider brand Display on frontend 9. BC NEWSLETTER This module is show banner newsletter on frontend when customer load site first time In backend, go to "Modules and Services > Modules and Services" and find module "BC NewsLetter" Page 32
Configure content banner Display on frontend 10. BC STATIC BLOCK This module is show static blocks on frontend. You can use many blocks on frontend In backend, go to "Modules and Services > Modules and Services" and find module "BC Static Block" Add/Edit/Delete/Enable/Disable static block Page 33
Add/Edit static block Title : title each block show on frontend Identifier : id of block Hook into : select postion display this filter block on frontend Disable/enable this block on frontend Content : Input content of static block. If you want input content with format HTML, you can click in editor menu "Tools > source code" Display on frontend Page 34
11. BC MEGA MENU This module use create mega menu for site In backend, go to "Modules and Services > Modules and Services" and find module "BC Mega Menu" Add/Edit/Delete/Enable/Disable mega menu Step add new mega menu: Step 1: Configure information mega menu Name : name of mega menu Identifier : id of menu Class: if you need edit css for each menu, you can add name class for menu. Hook into : select position display this menu on frontend Disable/enable this block on frontend Page 35
Step 2: Create new menu parent item 1. Drag/Drop "Menu item" to "Content area" 2. Click button edit information parent item 3. Input information parent item Name : name of parent item Link : you can input links url (EX : http://www.arenathemes.com/ ) or use link internal site (EX: link http://www.yoursite.com/contactus, you can input "contactus") Font Awesome Icon: add icon font awesome for parent menu. You can find name class icon in link http://fortawesome.github.io/font-awesome/icons/ and input it. Class: if you need edit css for each menu item, you can add class for menu item. 4. Save menu. Page 36
Step 3: Create dropdown for menu parent item 1. Click button configure show dropdown of parent item 2. Drag/Drop "Column" to "Content dropdown" 3. Select size for column (1-12) Content dropdown can add many columns : 1,2,3,4,5,6 columns Max total size of columns is 12 Example some layout dropdown : 1 column(2, 3), 2 columns(2-2, 2-3), 4 columns(3-3-3-3, 3-2-2-3), 5 columns(2-2-2-2-2, 3-2-2-2-3) 4. Drag/Drop "Widget item" to "Content column" 5. Click widget and input information for widget Page 37
Step 4: Configure content widget item 1. Link: Title : name link Link : you can input links url (EX : http://www.arenathemes.com/ ) or use link internal site (EX: link http://www.yoursite.com/contactus, you can input "contactus") 2. Text: Content : Input content of widget. If you want input content with format HTML, you can click in editor button "Source" Note : if you want use link internal site in content, you can use code "{base_url}". EX : <a href="{base_url}order">link</a> Page 38
3. Category: Select parent category : select parent category will get list sub categories Show sub category : enable/disable show child categories of sub category 4. Product: Product: input list id products. Ex:2,5,12. You can find id product in Catalog > products Style : select style template of products Page 39
Display on frontend 12. BC SLIDESHOW IMAGE This module is show slideshow on frontend. In backend, go to "Modules and Services > Modules and Services" and find module "BC Slideshow Image" Add/Edit/Delete/Enable/Disable image and layer text for slideshow Page 40
Add/Edit Image slideshow Image Slider : upload image slideshow Title : name image slideshow URL : link image slideshow when you click image on frontend Slide delay : time display this image on frontend Time shift : time begin display layer text Transition2d,Transition3d : effect when transition image slideshow Thumbnail : If you use navigation thumbnail, you can upload image thumbnail Slide delay : time display this image on frontend Disable/enable this image in slideshow Page 41
Add/Edit layer text of image slideshow 1. Add layer text 2. choose style text and input TEXT/HTML 3. Input time delay show this layer 4. Select effect transition of layer 5. move layer text to position that you want show on image slideshow 6. Save Page 42
Setting slideshow Config width/height for slideshow Config options of slideshow: auto start, pause on hover... Configure style navigation And more config Page 43
Display on frontend 13. BC BLOG This module is create blog for your site. Configure blog setting In backend, go to "Modules and Services > Modules and Services" and find module "BC Blog" Page 44
Configure blog setting You can reference hint under each filed and edit setting configure Add/Edit blog category In backend, go to "BC Blog > Blog Category" Add/Edit blog category Page 45
Name : name of blog category Enable/Disable category on frontend Category Parent : choose category parent Allow comment : Disable/enable block comment in post item of this category Description : Description for category Image : Image for category Meta title: Public title for the category's page, and for search engines. Meta description: This description will appear in search engines. Meta keywords : This keyword will appear in search engines Friendly URL: This is the human-readable URL, as generated from the category's name. You can change it if you want. Add/Edit blog post In backend, go to "BC Blog > Blog Post" Page 46
Add/Edit blog post Title : title of post Categories : select categories for post Disable/enable post display in frontend Description short : short description of post Description : description of post Allow comment : Disable/enable block comment in post Author : Select author of post Image : Image for post Related Posts : add related posts for post Related Products : add related products for post Tags: add tags for post. One post can have many tags. Meta title: Public title for the post's page, and for search engines. Meta description: This description will appear in search engines. Meta keywords : This keyword will appear in search engines Friendly URL: This is the human-readable URL, as generated from the post's name. You can change it if you want. Page 47
Manage blog comment In backend, go to "BC Blog > Blog Comment" Page 48
Approve/Delete comments of customer Manage blog tag In backend, go to "BC Blog > Blog Tag" Page 49
Add/Edit blog tag Name : tag name Language : select language will use tab post : select posts have this tag Display on frontend Page 50
14. BC BLOG LATEST POST This module is show latest post of module BC Blog on home page Page 51
In backend, go to "Modules and Services > Modules and Services" and find module "BC Blog Latest Post" Configure block latest post Title : title of block latest post Disable/enable display title block in frontend Disable/enable use slider block for list post Number posts get : Limit number post get in latest post list Number line post: Number product display in slider. ("Use slider" is active) Number posts in a line: Number product display per row. Image size : type post image show on frontend Display on frontend Page 52
PLEASE RATE US 5 STARS IF YOU LIKE THIS THEME! Page 53