Table

of Contents

Welcome
Support 1.1

Getting started
Requirements & Compatibility 2.1
Theme Installation 2.2
Configure performance 2.3

Extensions
Theme layout 3.1
BC Setting Theme 3.2
BC Colors 3.3
BC Mega Menu 3.4
BC Filter Product 3.5
BC Product With Categories 3.6
BC Static Block 3.7
BC Featured Categories 3.8
BC Newsletter 3.9
BC Banner Top 3.10
BC Cookie Law 3.11
BC Instagram 3.12
BC Manufacturer 3.13
BC Reviews 3.14
BC Ajax Search 3.15
Image Slider 3.16

1
2
Support

Getting started with AUTOPART

Full Online Documentation

https://arenatheme.gitbooks.io/autopart-documentation/content/

New to Prestashop?
If you're setting up a Prestashop store for the first time, we recommend taking a gander at
the Prestashop User Guide for a full overview of the platform.

If you have any questions that are beyond the scope of this help file, please feel free to send
us a message to Support

If you are satisfied with our themes, please rate us 5 stars at My ratings. It encourages us to
continue the research to optimize our products and services.

THANK YOU FOR PURCHASING OUR THEME !

Arena STC

3
Requirements & Compatibility

Our themes are compatible with the Prestashop versions 1.7.5 or higher.

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

4
Theme Installation

Don't close browser during installation.

Installation packge theme

Download package theme from your account on Addon Site

1. Go to Design > Theme & Logo

2. Click Upload a theme

3. Find IMPORT FROM YOUR COMPUTER, select your theme package and click Save

4. Go to part SELECT A THEME FOR THE SHOP in Theme & Logo, click Use this
theme as image below so active theme

5. Theme installation finishes. You need Clear cache your site

Configure theme

5
Theme Installation

1. Go to Modules > Module manager

2. Find BC Setting Theme module, click Configure

3. Click Import sample Data

6
Configure performance

1. Go to Advanced Parameters > Performance

2. Find part Smarty
3. Select Template compilation is "Force compilation"
4. Select Cache is "No"

5. Click Save

7
Theme layout

Before you customize your theme

Before you customize your theme, it's a good idea to refer module layout.
When you need customize blocks on frontend, it will help you easy find correct module
in backend.
Then, you can find modules in Modules > Module manager

8
Theme layout

9
Theme layout

10
BC Setting Theme

BC Setting Theme
This module help users to change some configuration of theme:

Disable/enable menu sticky

Disable/enable button scroll to top
Disable/enable button quick view
Disable/enable sub categories
Disable/enable slider for sub categories
Disable/enable show image of category
Disable/enable show description of category
Image for sub categories item: In page category, list sub categories display images
thumbnail of sub categories or image of first product in sub categories
Import Sample data: import sample blocks and default configure some modules in
theme

11
BC Colors

BC Colors
This module is config colors theme.

You can change main colors theme in General tab

Live Preview: Enable/Disable Block Preview color on right frontend

If you want restore default color theme, you can click button Reset to default. It will reset
color in current tab to configure default theme.

You can go to tabs Header, Footer, Content, Product so custom color for special area

In Font tab, you can import google fonts and change font of theme

12
BC Colors

In Custom CSS tab, you can input your custom css.

Note: if you have skill css, you can add your custom css in file: /themes/theme-
name/assets/css/custom.css

13
BC Mega Menu

BC Mega Menu
This module use create mega menu for site

You can manage 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

Step 2: Create new menu parent item

1. Drag/Drop "Menu item" to "Content area"

14
BC Mega Menu

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.
Class: if you need edit css for each menu item , you can add class for menu item.

15
BC Mega Menu

4. Save menu.

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

Step 4: Configure content widget item

1. Widget 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:

16
BC Mega Menu

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 : It will display list subcategories of category that you select.
Show sub category : enable/disable show child categories of subcategories (Display
category level 3)

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

17
BC Mega Menu

18
BC Filter Product

BC Filter Product
This module is filter and show product blocks on frontend. You can use many product blocks
on frontend

1.You can manage Add/Edit/Delete/Enable/Disable filter product block

2.Add/Edit Filter Product

Title New Product: title new block show on frontend

New Product: get products is new product
Title Feature Product: title feature block show on frontend
Feature Product: get products of root category "Home"
Title Bestseller Product: title bestseller block show on frontend
Bestseller: get products is bestseller
Title Special Product: title special block show on frontend
Special Product: get products have special price
Hook: select position 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
Use Slider: Disable/enable use slider products
Active: Disable/enable this filter block on frontend

19
BC Filter Product

Example configure
Title New Product: New Products
New Product: Yes
Title Feature Product: Trending Products
Feature Product: Yes
Title Bestseller Product: BestSeller Products
Bestseller: Yes
Title Special Product: Special Products
Special Product: Yes
Hook: displayTopHome
Template: tab
Custom Template:
Number product: 10
Number product display: 5
Image size: home_default
Use Slider: Yes
Active: Yes

20
BC Filter Product

21
BC Product With Categories

BC Product With Categories

This module is show product of categories on frontend. You can use many product blocks on
frontend

1.You can manage Add/Edit/Delete/Enable/Disable filter product blocks

2.Add/Edit Filter Product

List Content Category: add/edit/delete list categories will get products

Title Product : title each product block show
Hook: select position 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
Use Slider: Disable/enable use slider products
Active: Disable/enable this product block on frontend
Content: description block
Order: sort block on frontend

22
BC Product With Categories

3.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 (use in special template)
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

Example configure
List Content Category

23
BC Product With Categories

List Content Category: select display 3 categories

Demo content:

<div class="tab-item-content">
<p class="title">THE BEST AUTO PARTS</p>
<p class="subtitle">IN PREMIUMS</p>
<p class="description">Quisque quam diam, posuere eu metus non</p>
<a href="#" class="btn-primary"> Shop More</a></div>
<div class="tab-item-background" style="background-image: url('https://arenatheme.
gitlab.io/demo-image/autopart/background-tab.png');"></div>

CONFIGURE PRODUCT WITH CATEGORIES

Title Product: All Cars Must Have

Hook: displayHome
Template: standard
Custom Template:
Number product: 12
Number product display: 2
Image size: home_default
Use Slider: Yes
Active: Yes
Content:
Order: 0

24
BC Static Block

BC Static Block
This module is show static blocks on frontend. You can add many blocks on frontend

1. You can manage Add/Edit/Delete/Enable/Disable static block

2. 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"

Example code
1. Need help Hook: displayNav1

<p>Need help? <a href="#">Send us a ticket</a></p>

2. Copyright Footer Hook: displayFooterAfter

25
BC Static Block

<div class="copy-right col-sm-5">© 2019 AutoPart Market Store. All Right Reserved. Pre
staShop Themes by arenathemes</div>

3. Hotline header Hook: displayTop

<div class="phone">
<div class="phone-icon-wrapper"><i class="demo-icon icon-headphones">.</i></div>
<div class="phone-info-wrapper"><span>Hotline:</span> <span> (+800) 123 456 7890 </spa
n></div>
</div>

4. Info Top Contact Hook: displayTopContact

<div class="contact-info-icons row">

<div class="col-md-4 col-xs-12 col-sm-4">
<div class="contact-info"><i class="arena-icons icon-phone-icon"></i><span class="cont
act-info-title">+48 655 555 555</span><span class="contact-info-subtitle">Phone Us</sp
an></div>
</div>
<div class="col-md-4 col-xs-12 col-sm-4">
<div class="contact-info middle"><i class="arena-icons icon-mailicon"></i><span class=
"contact-info-title">support@arenathemes.com</span><span class="contact-info-subtitle"
>Write us Email</span></div>
</div>
<div class="col-md-4 col-xs-12 col-sm-4">
<div class="contact-info last"><i class="arena-icons icon-faxicon"></i><span class="co
ntact-info-title">+48 655 555 555</span><span class="contact-info-subtitle">FAX Us</sp
an></div>
</div>
</div>

5. Info Bottom Contact Hook: displayBottomContact

26
BC Static Block

<address class="text-center light-bg"><span class="address-title">Arenathemes Co.</spa

n> 3100 West Cary Street Richmond, Virginia 23221<br /> Phone: +48 548 499 999</addres
s>
<p><iframe width="1170" height="450" style="border: 0;" src="https://www.google.com/ma
ps/embed?pb=!1m18!1m12!1m3!1d501702.6042522421!2d106.41416795384438!3d10.7689999506162
28!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317529292e8d3dd1%3A0xf15f5aad77
3c112b!2zSOG7kyBDaMOtIE1pbmgsIFZp4buHdCBOYW0!5e0!3m2!1svi!2s!4v1444821132224" framebor
der="0" allowfullscreen="allowfullscreen"></iframe></p>

6. Track my order Hook: displayTopRight

<p><a href="#" class="track-order-btn"><span><i class="demo-icon icon-paper-plane-empt

y">.</i>track my order</span></a></p>

7. Banner TopHome Hook: displayTopHome

<div class="home-banner-items">
<div class="row">
<div class="col-xl-3 col-lg-3 col-12">
<div class="banner-item">
<div class="image"><a href="/collections"> <img class=" lazyloaded" alt="Banner" src="
https://arenatheme.gitlab.io/demo-image/autopart/Banner_1.png" /> </a></div>
<div class="text ">
<div class="title">B&M 111212 Street</div>
<div class="subtitle">Strip Transmission</div>
<div class="offer"><span class="text">Starting from</span>
<div class="price"><span class="prices-banner">$59.95</span> <span class="label">New</
span></div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-12 hide-mobile">
<div class="banner-item">
<div class="image"><a href="/collections"> <img class=" lazyloaded" alt="Banner" src="
https://arenatheme.gitlab.io/demo-image/autopart/Banner_2.png" /> </a></div>
<div class="text ">

27
BC Static Block

<div class="title">THE BEST PRICES</div>

<div class="subtitle">ACCESSSORIES</div>
<div class="offer"><span class="text">Head Units & Receivers</span></div>
<a class="btn btn-banner" href="#">Shop Now</a></div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-12">
<div class="banner-item">
<div class="image"><a href="/collections"> <img class=" lazyloaded" alt="Banner" src="
https://arenatheme.gitlab.io/demo-image/autopart/Banner_3.png" /> </a></div>
<div class="text ">
<div class="title">Deluxe Cooling</div>
<div class="subtitle">System Pressure</div>
<div class="offer"><span class="text">Starting from</span>
<div class="price" span="">$59.95</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 col-lg-6 col-12 hide-mobile">
<div class="banner-item">
<div class="image"><a href="/collections"> <img class=" lazyloaded" alt="Banner" src="
https://arenatheme.gitlab.io/demo-image/autopart/Banner_4.png" /> </a></div>
<div class="text ">
<div class="title">THE BEST PARTS</div>
<div class="subtitle">FOR YOUR CAR.</div>
<div class="offer"><span class="text">Head Units & Receivers</span></div>
<a class="btn btn-banner" href="#">Shop Now</a></div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-12 hide-mobile">
<div class="banner-item">
<div class="image"><a href="/collections"> <img class=" lazyloaded" alt="Banner" src="
https://arenatheme.gitlab.io/demo-image/autopart/banner_5.png" /> </a></div>
<div class="text ">
<div class="title">THE BEST PRICES</div>
<div class="subtitle">ACCESSSORIES</div>
<div class="offer"><span class="text">Head Units & Receivers</span></div>
<a class="btn btn-banner" href="#">Shop Now</a></div>
</div>
</div>
</div>
</div>

28
BC Static Block

8. Banner Mid Car Services Hook: displayMidHome

<div class="banner-services">
<div class="left-content">
<div class="text">
<div class="hotlines"><span class="title"> HOTLINE 24/7: </span> <span class="content"
>(+1) 000 123 456</span></div>
<div class="block-content">
<p class="title"><span>Anytime</span> & Anywhere You Are</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<a href="#">Learn More</a></div>
</div>
</div>
<div class="right-content parallax" style="background-image: url('https://arenatheme.g
itlab.io/demo-image/autopart/background-services.png');">
<div class="content">
<div class="title">AutoPart.</div>
<div class="subtitle">Car Services</div>
</div>
</div>
</div>

29
BC Static Block

9. Banner Shipping services Hook: displayBottomHome

<div class="policy-wrapper">
<div class="policy-list">
<div class="policy-item col-12 col-sm-6 col-md-6 col-lg-3">
<div class="icon "><i class="icon-chrom-flying-airplane">.</i></div>
<div class="text">
<h6>FREE DELIVERY</h6>
<span>Worldwide from $75</span></div>
</div>
<div class="policy-item col-12 col-sm-6 col-md-6 col-lg-3">
<div class="icon"><i class="icon-flash">.</i></div>
<div class="text">
<h6>EASY RETURNS</h6>
<span>365 days for free returns</span></div>
</div>
<div class="policy-item col-12 col-sm-6 col-md-6 col-lg-3">
<div class="icon"><i class="icon-chat-empty">.</i></div>
<div class="text">
<h6>COMFORT PAYMENTS</h6>
<span>Credit Cards Available</span></div>
</div>
<div class="policy-item col-12 col-sm-6 col-md-6 col-lg-3">
<div class="icon"><i class="icon-gift">.</i></div>
<div class="text">
<h6>FREE GIFTS</h6>
<span>Get gifts and discounts</span></div>
</div>
</div>
</div>

10. About Autopart Hook: displayFooterHome

30
BC Static Block

<div class="about-store">
<h4 class="block-title">About Theloke AutoPart</h4>
<div class="about-description">
<p>A fictional burger shop. Selling locally sourced lamb and beef burgers. Wanted to c
reate something strong and bold to try and reflect the burgers that they would sell. W
e just wrapped up the design of a live streaming app we've been working on for the pas
t few months. These are the first two screens the user sees after signup up.</p>
</div>
<h4 class="block-title">Payment Method</h4>
<a href="#"><img alt="" src="https://arenatheme.gitlab.io/demo-image/autopart/Payment_
logo.png" /></a></div>

11. Contact Info footer Hook: displayFooterBefore

<div class="contact-box-wrapper col-12 col-lg-6">

<h4 class="title-block">Contact Info</h4>
<div class="contact-box row" div="">
<div class="support-box col-4"><i class="demo-icons icon-headphones"></i>
<div class="text"><span class="title">Hotlines:</span> <span class="content">(+1) 000
123 456</span> <span class="content">(+1) 000 123 456</span></div>
</div>
<div class="support-box col-4"><i class="demo-icons icon-clock"></i>
<div class="text"><span class="title">Opening Hours:</span> <span class="content">07:0
0 - 22:00,</span> <span class="content">UTC -11</span></div>
</div>
<div class="support-box col-4"><i class="demo-icons icon-chrom-web-page-home"></i>
<div class="text"><span class="title">Showroom:</span> <span class="content">328 W.Nor
th Ave.</span> <span class="content">Troy, NY 12180</span> <a href="#" class="get-dire
ction"><i class="demo-icons icon-paper-plane-empty"></i>Get Direction</a></div>
</div>
</div>
</div>

31
BC Static Block

32
BC Featured Categories

BC Featured Categories
This module is show list categories on frontend with image

1.You can manage Add/Edit/Delete/Enable/Disable banner category item

2.Add/Edit banner item

Banner: Choose banner image from your computer

Status: Enable/Disable display this item on frontend
Category: select category of banner

3.Configure Setting BC Featured Categories

Title block: title block featured categories show on frontend

Used slider: Disable/enable slider for list categories
Display Subcategories: display list subcategories of category that selected in step 2

33
BC Featured Categories

Number categories display: number categories will display when use slider
Number subcategories display: number subcategories will display
Display image: Disable/enable show image of category
Display description: Disable/enable show description of category

Note
Some option in configure don't use in special template
When you change banner image, you need clear browser cache so it load new image.

Example configure
Title block: Featured Categories
Used slider: No
Display Subcategories: Yes
Number categories display: 3
Number subcategories display: 5
Display image: Yes
Display description: No

34
BC Featured Categories

35
BC Newsletter

BC Newsletter
This module is show banner newsletter on frontend when customer load site first time

Input content newsletter

Disable/Enable popup newsletter

Example code

<div class="popup-image">
<img src="https://arenatheme.gitlab.io/demo-image/electro/newsletter_background.pn
g" alt="" width="1366" height="768" />
</div>
<div class="popup-mail-content">
<h4 class="title">We want you</h4>
<div class="mailchimp-caption-1"><span>We promise we won’t write to you often, onl
y for the fun stuff.</span></div>
</div>

36
BC Newsletter

37
BC Banner Top

BC Banner Top
This module is show banner header on frontend

Content : Input HTML or image banner for banner item

Display : Enable/Disable this banner on frontend

Example code

<p>Limited time offer : Sale Up to 50% OFF <a class="ads-bar-link" href="#">Shop Now</
a></p>

38
BC Cookie Law

BC Cookie Law
This module is show cookie law on footer frontend

Content : Input HTML or image for cookie

Display : Enable/Disable this cookie law on frontend

Example code

<p class="hi-cookie-head">Cookie Policy</p>

<p class="hi-cookie-intro">This site uses cookies to store information on your compute
r.</p>

39
BC Instagram

BC Instagram
Display latest published photos from an Instagram account. Use Instagram API.

Configure title and number item display in slider brand

Instagram Client ID: your id Instagram

Instagram Access Token: your access token. You can refer document get it in:
https://instagram.pixelunion.net/
Image number: image number display on frontend
Image format: Size image get from Instagram
Resize size in pixel: Input it If you want size resize different size Image format. Note:
your server need enable ImageMagick PHP extension
Refresh: Time refresh images get from your instagram account.

Example configure
Instagram Client ID: Input your client ID
Instagram Access Token: Input your access token
Image number: 10
Image format: Tiny-Thumbnail (150 X 150)
Resize size in pixel: 0
Refresh: Each day

40
BC Instagram

41
BC Manufacturer

BC Manufacturer
This module is show slider logo manufacturer on frontend.

Configure title and number item display in slider brand

Title block: title block manufacturer show on frontend

Display title: Disable/Enable display title block
Number item in aline: number manufacturer display in slider
Use Slider: Enable/Disable use slider

Example configure
Title block: Manufacturers
Display title: No
Number item in aline: 5
Use Slider: Yes

42
BC Reviews

BC Reviews
This module is show customer reviews and rating of products on frontend

Allow guest reviews: Enable/Disable allow guest review products

Autopublish comments: If disabled you will have to approve comments manually

You can manage enable, disable, delete reviews that customers reviewed

43
BC Ajax Search

BC Ajax Search
This module is show ajax product when you use search form on header. You can configure
limit number products get in result ajax search

44
Image Slider

Image Slider
This module add a series of images to your homepage, with a sliding effect, to welcome your
visitors in a visual and friendly way.

Speed: The duration of the transition between two slides.

Pause on hover: Stop sliding when the mouse cursor is over the slideshow.
Loop forever: Loop or stop after the last slide.

You can manage enable, disable, edit, delete item slide

Image: Select image of slide

Title: Title slide
Target URL: link slide go to when you click image
Caption: caption of image slide
Description: description display on frontend
Enabled: Enable/Disable item slide

45
Image Slider

Example slide
Title: Sample 1
Target URL: #
Caption: sample-1
Description:

<div class="caption-wrapper">
<h2 class="display-1 text-uppercase title">Sample 1</h2>
<h3 class="subtitle">EXCEPTEUR OCCAECAT</h3>
<div class="caption">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tristique in tor
tor</p>
<p>et dignissim. Quisque non tempor leo. Maecenas egestas sem elit</p>
</div>
</div>

Enabled: Yes

46
Image Slider

47