NATURAL RESPONSIVE PRESTASHOP THEME USER GUIDE

Transcription

1 NATURAL RESPONSIVE PRESTASHOP THEME USER GUIDE Version 1.0 Created by: arenathemes Page 1

2 Contents I. REQUIREMENTS & COMPATIBILITY... 3 II. INSTALLATION Installation - Full package Installation - Theme package... 5 III. CONFIG AFTER INSTALLATION - THEME PACKAGE Install sample data and setting for modules Check the position of module in Back Office Attaching a module to a hook Disable the mobile theme Configuring Columns Configure image size Configure perfomance Configure homepage with slideshow fullwidth IV. CONFIGURE MODULES BC SETTING THEME BC AJAX SEARCH BC BANNER TOP BC COOKIE LAW BC FILTER PRODUCT BC PRODUCT WITH CATEGORY BC NEWSLETTER BC STATIC BLOCK BC MEGA MENU BC SLIDESHOW IMAGE BC BLOG BC BLOG LATEST POST Page 2

3 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: 1. Installation - Full package Package natural-full-package_1.6.x_vx.zip (It is used in cases: You want to make new site Prestashop with sample data.) Step 1: Download and extract the full package you want to install, after that upload all contents of the full package to your server. Step 2: Create your database in your host with name YOUR_DATABASE_NAME Page 3

4 Step 3: Find 1_sample-database.sql and import the sql file to your database you have just created. Step 4: Find 2_update-database.sql, edit the last three lines and import the sql file to your database. UPDATE ps_shop_url SET `domain`='your_domain'; UPDATE ps_shop_url SET `domain_ssl`='your_domain'; UPDATE ps_shop_url SET `physical_uri`='/your_base_uri/'; UPDATE ps_product_lang SET `description` = REPLACE(`description`, ' '/YOUR_BASE_URI/'); With: YOUR_DOMAIN: is the name of domain (NOTE: don't contain or Example: your-domain.com. /YOUR_BASE_URI/: path to sub folder that contains your site in your server. Example: sub folder your create to contain your site is new prestashop /YOUR_BASE_URI/ is /new-prestashop/. If your website don t include sub-forderurl, please use: UPDATE ps_shop_url SET `physical_uri`='/'; Step 5: rename file /config/settings.inc.php.default to /config/settings.inc.php and configure this file with infomation you created YOUR_DATABASE_NAME in step 2. define('_db_name_', 'database name'); define('_db_server_', 'database server'); define('_db_user_', 'database username'); define('_db_passwd_', 'database password'); Step 6: - Access front end your site, if you can't access it, please go to menu PREFERENCES > SEO & URLS in back end Page 4

5 Link access back end /BASE_URI/bcadmin (BASE_URI : link to front end your site) address:[email protected] Password: arenathemes You can rename the directory bcadmin to change the admin panel s URL. - If you can't load to frontend, go to part "SET UP URLS" click "SAVE" to recreate file ".htaccess" automatically. Step 7 :Refesh your front-end, intallation process finishes. 2. Installation - Theme package Package natural-theme-package_1.6.x_vx.zip ( It is used in cases: You have already site Prestashop.) 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 Step 3: After, go to part "SELECT A THEME FOR SHOP", click "Use this theme" as image below Page 5

6 After,click Save and Finish Theme installation finishes. Go to 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. Note: you is only to do this section if you use "Installation - Theme package" 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). Page 6

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

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

9 Page 9

10 Page 10

11 Page 11

12 Page 12

13 Page 13

14 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

15 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

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 Page 16

17 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. 8. Configure homepage with slideshow fullwidth - Important : Only run this step if you want make homepage with slideshow full width ( without left menu ) - Go to "Modules and Services > Modules and Services" > module BC Setting Theme > Configure > Enable slideshow fullwidth Page 17

18 - Go to "Modules and Services > Modules and Services" > module BC Mega Menu > Configure > Disable menu "Menu Vertical" - Go to "Modules and Services > Modules and Services" > module BC Slideshow Images > Configure > Disable 3 images bottom and enable 3 images top - Then, you configure option slider again ( same image ) Page 18

19 IV. CONFIGURE MODULES After complete the installation of the theme, you can reference manual use modules in next section. Page 19

20 Page 20

21 Page 21

22 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 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 Page 22

23 Config category page : Config number of product lines for category page Disable/enable list grid icon 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. Page 23

24 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 Display on frontend Page 24

25 3. BC BANNER TOP This module is show banner header on frontend In backend, go to "Modules and Services > Modules and Services" and find module "BC Banner Top" Add/Edit banner content Page 25

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

27 Display on frontend 5. 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

28 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

29 6. 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 Page 29

30 Hook : select postion display this block on frontend 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

31 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

32 7. 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" Configure content banner Display on frontend Page 32

33 8. 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 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 Page 33

34 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 9. 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 Page 34

35 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 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 Page 35

36 Link : you can input links url (EX : ) or use link internal site (EX: link you can input "contactus") Font Awesome Icon: add icon font awesome for parent menu. You can find name class icon in link 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

37 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( , ), 5 columns( , ) 4. Drag/Drop "Widget item" to "Content column" 5. Click widget and input information for widget Page 37

38 Step 4: Configure content widget item 1. Link: Title : name link Link : you can input links url (EX : ) or use link internal site (EX: link 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

39 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

40 Display on frontend 10. 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

41 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

42 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

43 Setting slideshow Config width/height for slideshow Config options of slideshow: auto start, pause on hover... Configure style navigation And more config Page 43

44 Display on frontend Page 44

45 11. 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" 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" Page 45

46 Add/Edit blog category 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. Page 46

47 Add/Edit blog post In backend, go to "BC Blog > Blog Post" 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 Page 47

48 Friendly URL: This is the human-readable URL, as generated from the post's name. You can change it if you want. Manage blog comment In backend, go to "BC Blog > Blog Comment" Page 48

49 Approve/Delete comments of customer Manage blog tag In backend, go to "BC Blog > Blog Tag" Page 49

50 Add/Edit blog tag Name : tag name Language : select language will use tab post : select posts have this tag Display on frontend Page 50

51 Page 51

52 12. BC BLOG LATEST POST This module is show latest post of module BC Blog on home page 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

53 PLEASE RATE US 5 STARS IF YOU LIKE THIS THEME! Page 53