Page 1 MARKET 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 ..................................................................... 12
4. Disable the mobile theme. ......................................................................... 12
5. Configuring Columns ................................................................................ 13
6. Configure image size ................................................................................ 14
7. Configure perfomance .............................................................................. 15
IV. CONFIGURE MODULES ................................................................................. 16
1. BC SETTING THEME ................................................................................ 18
2. BC AJAX SEARCH .................................................................................. 20
3. BC BANNER TOP ................................................................................... 21
4. BC COOKIE LAW ................................................................................... 22
5. BC FILTER PRODUCT.............................................................................. 23
6. BC PRODUCT WITH CATEGORY ................................................................. 25
7. BC BESTSELLER WITH CATEGORY .............................................................. 28
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 .......................................................................................... 45
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 market-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. 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).
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 12
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 13
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 14
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:
Page 15
- 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 16
IV. CONFIGURE MODULES
After complete the installation of the theme, you can reference manual use modules in next
section.
Page 18
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 19
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
Config list, grid default display
Page 20
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 21
Display on frontend
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"
Page 22
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 23
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 24
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 25
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
Page 26
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
Choose big product : select big product will show on frontend
Page 27
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 28
7. BC BESTSELLER WITH CATEGORY
This module is show bestseller 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
Bestseller Product With Category"
Add/Edit/Delete/Enable/Disable filter product block
Page 29
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 30
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 32
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 33
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"
Page 34
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
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 35
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 36
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 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(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 38
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 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 40
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 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 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 43
Setting slideshow
Config width/height for slideshow
Config options of slideshow: auto start, pause on hover...
Configure style navigation
And more config
Page 45
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"
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 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 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 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 50
Add/Edit blog tag
Name : tag name
Language : select language will use tab
post : select posts have this tag
Display on frontend