Page 1 ELECTRO RESPONSIVE PRESTASHOP THEME USER GUIDE Version 1.0 Created by: arenathemes
Page 1
ELECTRO RESPONSIVE
PRESTASHOP THEME
USER GUIDE
Version 1.0
Created by: arenathemes
Page 2
Contents I. REQUIREMENTS & COMPATIBILITY ..................................................................... 3
II. INSTALLATION ........................................................................................... 3
1. Installation - Full package ........................................................................... 3
2. Installation - Theme package ....................................................................... 5
III. CONFIG AFTER INSTALLATION - THEME PACKAGE .................................................. 6
1. Install sample data and setting for modules ...................................................... 6
2. Check the position of module in Back Office. .................................................... 7
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 .............................................................................. 17
IV. CONFIGURE MODULES ................................................................................. 17
1. BC SETTING THEME ................................................................................ 19
2. BC AJAX SEARCH .................................................................................. 21
3. BC BANNER TOP ................................................................................... 22
4. BC COOKIE LAW ................................................................................... 23
5. BC FILTER PRODUCT.............................................................................. 24
6. BC PRODUCT WITH CATEGORY ................................................................. 26
7. BC NEWSLETTER .................................................................................. 29
8. BC STATIC BLOCK ................................................................................. 30
9. BC MEGA MENU .................................................................................... 32
10. BC SLIDESHOW IMAGE ........................................................................ 37
11. BC BLOG .......................................................................................... 42
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:
1. Installation - Full package
Package electro-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 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`,
'http://192.168.1.2/electro/code/site', '/YOUR_BASE_URI/');
With:
YOUR_DOMAIN: is the name of domain (NOTE: don't contain http:// or https://).
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 5
Link access back end /BASE_URI/bcadmin (BASE_URI : link to front end your site)
Email 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 electro-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 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 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 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 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
Page 17
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.
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
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 20
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
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 21
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 22
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 23
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 24
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
Display on frontend
Page 26
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
Page 27
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
Display on frontend
Page 29
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
Page 30
Display on frontend
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"
Page 31
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 32
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
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 33
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 34
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 35
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 36
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 37
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 38
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 39
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 40
Setting slideshow
Config width/height for slideshow
Config options of slideshow: auto start, pause on hover...
Configure style navigation
And more config
Page 41
Display on frontend
Page 42
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 43
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 44
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 45
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 46
Approve/Delete comments of customer
Manage blog tag
In backend, go to "BC Blog > Blog Tag"
Page 47
Add/Edit blog tag
Name : tag name
Language : select language will use tab
post : select posts have this tag
Display on frontend
Page 48
Page 49
PLEASE RATE US 5 STARS
IF YOU LIKE THIS THEME!