Embed Size (px)
Citation preview
Page 1
CLOVER RESPONSIVE
PRESTASHOP THEME
USER GUIDE
Version 1.0
Created by: arenathemes
Page 2
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 ..................................................................... 13
4. Disable the mobile theme. ......................................................................... 14
5. Configuring Columns ................................................................................ 14
6. Configure image size ................................................................................ 16
7. Configure perfomance .............................................................................. 16
8. Change color theme ................................................................................. 17
IV. CONFIGURE MODULES ................................................................................. 17
1. BC SETTING THEME ................................................................................ 19
2. BC AJAX SEARCH .................................................................................. 22
3. BC BANNER TOP ................................................................................... 23
4. BC COOKIE LAW ................................................................................... 23
5. BC FILTER PRODUCT.............................................................................. 24
6. BC PRODUCT WITH CATEGORY ................................................................. 27
7. BC MANUFACTURER ............................................................................... 29
8. BC NEWSLETTER .................................................................................. 30
9. BC STATIC BLOCK ................................................................................. 31
10. BC MEGA MENU ................................................................................. 33
11. BC SLIDESHOW IMAGE ........................................................................ 39
12. BC BLOG .......................................................................................... 42
13. BC BLOG LATEST POST ........................................................................ 50
Page 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:
Package clover-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 4
Step 3: After, go to part "SELECT A THEME FOR SHOP", click "Use this theme" as image
below
After,click Save and Finish
Page 5
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 6
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 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
Page 14
4. Disable the mobile theme.
- Go to Preferences > Themes. And Click Save
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/clover/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 blue color.
IV. CONFIGURE MODULES
After complete the installation of the theme, you can reference manual use modules in next
section.
Page 18
Page 19
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
Page 20
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 21
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.
Config product page :
Disable/enable use tab for product information
Page 22
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 23
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
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"
Page 24
Add/Edit banner content
Content : input HTML content for message cookie
Display : Enable/Disable this popup cookie on frontend
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 25
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
Page 26
Display on frontend
Page 27
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
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
Page 28
Add/Edit content category
Disable/enable this category product block on frontend
Category : select category will get products
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
Page 29
Display on frontend
7. BC MANUFACTURER
This module is show slider logo manufacturer on frontend
Page 30
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
8. 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
Page 31
Display on frontend
9. 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 32
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 33
10. 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 34
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 35
Step 3: Create dropdown for menu parent item
1. Click button configure show dropdown of parent item
2. Drag/Drop "Column" to "Content dropdown"
Page 36
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
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")
Page 37
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>
3. Category:
Select parent category : select parent category will get list sub categories
Show sub category : enable/disable show child categories of sub category
Page 38
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
Display on frontend
Page 39
11. 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
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 40
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 41
Setting slideshow
Config width/height for slideshow
Config options of slideshow: auto start, pause on hover...
Configure style navigation
And more config
Page 42
Display on frontend
12. BC BLOG
This module is create blog for your site.
Page 43
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 44
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 45
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 46
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 47
Approve/Delete comments of customer
Manage blog tag
In backend, go to "BC Blog > Blog Tag"
Page 48
Add/Edit blog tag
Name : tag name
Language : select language will use tab
post : select posts have this tag
Display on frontend
Page 49
Page 50
13. 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 51
PLEASE RATE US 5 STARS
IF YOU LIKE THIS THEME!
