books - OpenCart eCommerce Themes

System Requirements

These extensions must be enabled for OpenCart to install properly on the web server.
Web server: Web Server (Apache suggested)
PHP PHP 7.4 or 8.0 or 8.1
MySQL Database (MySQLi suggested)

Required PHP libraries / modules

Curl
ZIP
Zlib
GD Library
Mcrypt
Mbstrings
Xml

To install this theme you must have a working version of opencart already installed. For information in regard to installing the opencart platform, please see the opencart Wiki : http://docs.opencart.com/en-gb/getting-started

Supported Version

4.0.0.0
4.0.1.0
4.0.1.1

Step 1 : Theme Installation

Installation (Common Steps)↑ Back to Page

-Please, read the whole section, before attempting to install the theme.
-it is recommend to always backup your system before making any upgrades or changes!

There are two ways to install a books Theme: For installation of Opencart, you just need to follow these steps, Installation
(01) Install Quickstart: By using this package, you will set the template exactly as our Demo with sample data.
(02) Install Template: If you exist a opencart website you can install only template.

01. Install with Quickstart Package:

1.1.1 Create new database

Step 1: Open your Browser and type : localhost/phpmyadmin or yourdomain/phpmyadmin

Step 2: Then create database

1.1.2 Extract and Upload the whole quickstart package (admin, catalog, image … etc books-quickstart folder ) to your server

1.1.3 Open browser and navigate to your site (where the quickstart uploaded) to load default Opencart installer with the database you just created.

1.1.4 Enter the username and password for the administration

1.1.5 Installation Complete

02. Install with Template Package↑ Back to Page

Unzip books-template-install zip file and then upload/overwrite (admin, catalog, extension, image, system)

Replace Theme Folders

Overwrite these directories from 'books-template-install' to your opencart root folder.

"admin" (Overwrite this folder)
"catalog" (Overwrite this folder)
"extension" (Overwrite this folder)
"image" (Overwrite this folder)
"system" (Overwrite this folder)

After overwrite above folders login admin panel and install All modules one by one

AFTER UPLOAD THEME FILES, YOU MAY GET ERROR(COULD NOT LOAD FILE) ON FRONT SIDE.
BUT DON'T WORRY, WHENYOU ACTIVE OUR THEME, IT WILL WORK PERFECTLY.

Step 2 : Logo settings ↑ Back to Top

Go to System -> Setting -> Edit -> Images

Step 3 : Image size settings ↑ Back to Top

For Default_Home : Go to Extensions -> Themes -> Greenesta -> Edit

Change category image thumb size to: 270 X 312.
Change product image thumb size to: 800 X 938.
Change Product Image Popup Size to: 800 X 938.
Change product image list size to: 800 X 938.
Change additional product image size to: 800 X 938.
Change related product image size to: 283 X 283 .
Change wish list image size to: 90 X 90 .
Change cart image size to: 47 X 47 .
Change store image size to: 268 X 50 .
Click on “Save” button.

For Store setting Go To System->Settings Click on store Edit link, and set below settings.

Step 3 : Language Settings↑ Back to Top

To Enable Laguages login to your admin panel and do follwing settings.

For Example To add Arabic Language :
Go to System > Localisation > Languages.
Click on “Add New” button to add new Language.
Language Name : Arabic,
Code : ar,
Locale : ar-UN,ar_UN,UTF-8,Arabic,
Status : Enable,
Sort Order : as you like.
Click on “Save” button.

Step 4 : Theme Layouts ( Now All module installation and configuration Process )↑ Back to Top

Module : Slideshow -> Slideshow↑ Back to Page

For adding Slideshow banners go to Design -> Banners
Click on “Add New” button to add new banner.
Give Banner name: Slideshow
From status select Enabled,
and click on “Add Banner” button.
Give title of your banner and click on image to upload your banner.
Again click on “Add Banner” button and upload another banners.
Now click on “Save” button.

//copy code

  
                                         <div class="section-title">
                                             <div class="top-subtitle">Today Discounts </div>
                                             <h2 class="section-main-title">FOOD & books  <span class="section-sub-title">Product Retailer </span> </h2>
                                             <div class="section-bottomtitle">We are a books store that offers a wider variety of food, beverages and household products, organized into sections. </div>
                                             <a class="btn btn-primary btn-section" href="#">  <span> Show Products  </span> </a>
                                         </div>

Now to activate your Main banner go to Extensions -> Extensions -> Modules -> Slideshow click on Edit link
Give Module name: Home Page Slideshow
From banner select Home Page Slideshow
Give Width & Height (1920 X 940) (your banner Width and height)
From status select Enabled
Now click on “Save” button.

Module : HTML Content-> HTML Page Testimonial↑ Back to Page

Go to Extensions -> Extensions -> Modules -> HTML Content -> Install(After install click on "Edit" link)
Give Module Name: HTML Page Testimonial
Now In Description click on Code View button in text editor block and paste this code.

//copy Testimonial code

<div class="dinfo">
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-12 siinfo s2 service">
<div class="card">
<div class="card-body"><img alt="service icon" src="image/catalog/service/1.svg" />
<div class="service-txt">
<h3 class="card-title">Audiobooks Online Store</h3>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12 siinfo s3 service">
<div class="card">
<div class="card-body"><img alt="service icon" src="image/catalog/service/2.svg" />
<div class="service-txt">
<h3 class="card-title">Audiobooks Online Store</h3>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12 siinfo s4 service">
<div class="card">
<div class="card-body"><img alt="service icon" src="image/catalog/service/3.svg" />
<div class="service-txt">
<h3 class="card-title">Audiobooks Online Store</h3>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Module : Featured -> Featured Product↑ Back to Page

Go to Extentions > Extensions > Modules > Featured click on "Add Module" button.
Give Module name: Featured Product
From feature product select: products
Give Limit 12 and Width & Height (308 X 230) (your product image Width and height)
From status select Enabled
Now click on “Save” button.

Module : Bestsellers -> Bestsellers↑ Back to Page

Go to Extentions -> Extensions -> Modules -> Bestsellers Product click on "Add Module" button.
Give Module name: Bestsellers Product
From product select: products
Give Limit 20 and Width & Height (182 X 182) (your product image Width and height).
From status select Enabled
Now click on “Save” button.

Module : Latest -> Latest↑ Back to Page

Go to Extentions -> Extensions -> Modules -> Latest Product click on "Add Module" button.
Give Module name: Latest Product
From product select: products
Give Limit 20 and Width & Height (800 X 800) (your product image Width and height).
From status select Enabled
Now click on “Save” button.

Module : Category Tab -> Category Tab↑ Back to Page

Go to Extentions > Extensions > Modules > Category Tab click on "Add Module" button.
Give Module name: Category Tab
From categories select: Category
Give Limit 12 and Width & Height (200 X 200) (your product image Width and height)
From status select Enabled
Now click on “Save” button.

Module : Wd top -> Top Product↑ Back to Page

Go to Extentions > Extensions > Modules > wd top click on "Add Module" button.
Give Module name: top Product
From Top product select: products
Give Limit 12 and Width & Height (294 X 294) (your product image Width and height)
From status select Enabled
Now click on “Save” button.

Module : HTML Content-> HTML Page Testimonial↑ Back to Page

Go to Extensions -> Extensions -> Modules -> HTML Content -> Install(After install click on "Edit" link)
Give Module Name: HTML Page Testimonial
Now In Description click on Code View button in text editor block and paste this code.

//copy Testimonial code

<div class="test-pad">
<div class="container-fluid parallex">
<div class="row">
<div class="col-xs-12 testi">
<div class="wbtesti">
<div class="item">
<div class="testi-star">
<ul class="list-group list-group-horizontal">
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><span><b>4.5</b> / 5.0</span></li>
</ul>
</div>
<div class="testi-dec">
<h3>Excellent service!</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="testdec"><img alt="1" class="img-fluid" src="image/catalog/testimonial/1.png" />
<div class="testdec-ctn">
<h2>Small Container <span>Storage 25m2</span></h2>
<h5>John doe,Client</h5>
</div>
</div>
</div>
</div>
<div class="item">
<div class="testi-star">
<ul class="list-group list-group-horizontal">
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><span><b>4.5</b> / 5.0</span></li>
</ul>
</div>
<div class="testi-dec">
<h3>Excellent service!</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="testdec"><img alt="1" class="img-fluid" src="image/catalog/testimonial/1.png" />
<div class="testdec-ctn">
<h2>Small Container <span>Storage 25m2</h2>
<h5>John doe,Client</h5>
</div>
</div>
</div>
</div>
<div class="item">
<div class="testi-star">
<ul class="list-group list-group-horizontal">
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><span><b>4.5</b> / 5.0</span></li>
</ul>
</div>
<div class="testi-dec">
<h3>Excellent service!</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="testdec"><img alt="1" class="img-fluid" src="image/catalog/testimonial/1.png" />
<div class="testdec-ctn">
<h2>Small Container <span>Storage 25m2</span></h2>
<h5>John doe,Client</h5>
</div>
</div>
</div>
</div>
<div class="item">
<div class="testi-star">
<ul class="list-group list-group-horizontal">
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><img alt="star" height="12px" src="image/catalog/star.svg" width="12px" /></li>
<li class="list-group-item"><span><b>4.5</b> / 5.0</span></li>
</ul>
</div>
<div class="testi-dec">
<h3>Excellent service!</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="testdec"><img alt="1" class="img-fluid" src="image/catalog/testimonial/1.png" />
<div class="testdec-ctn">
<h2>Small Container <span>Storage 25m2</span></h2>
<h5>John doe,Client<<h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

From status select Enabled.
Now click on “Save” button.

Module : workdo Newsletter->Newsletter↑ Back to Page

Go to Extentions > Extensions > Modules > Newsletter click on "Install(After install click on "Edit" link)" button.
Give Module name: Newsletter.
From status select Enabled.
Now click on “Save” button.

Module : Workdo Blog -> Latest blog↑ Back to Page

Go to Extensions -> Extensions -> Modules -> Latest Blog -> Edit (Click on Install link if Edit link is not there)
Give Module name: Latest blog
From status select Enabled
Give Image size (1005 X 820)(your blog image Width and height)
And Give Limit 8 and character limit 50
From Allow Comments select Yes
From Login Required select No
From Automatic Approval select Yes
Now click on “Save” button.

Now click on Add Blog button to adding Blog.
In General tab, Give Title : Libero lorem vehicula
Now click on Code View button in text editor block and write your Blog description.

//copy service code

                                        Shop Laptop feature only the best laptop deals on the market. By comparing laptop deals from the likes of PC World, Comet, Dixons, The Link and Carphone Warehouse, Shop Laptop has the most comprehensive selection of laptops on the internet. At Shop Laptop, we pride ourselves on offering customers the very best laptop deals.

Next in Data tab.
From Status select Enable.
Upload your blog image..
From Module select Blog.
Now click on “Save” button.

Again click on Add Blog button for add another Blog.
In General tab, Give Title : Quisque egestas ullamco laboris
Now click on Code View button in text editor block and write your Blog description.

//copy service code

                                        Shop Laptop feature only the best laptop deals on the market. By comparing laptop deals from the likes of PC World, Comet, Dixons, The Link and Carphone Warehouse, Shop Laptop has the most comprehensive selection of laptops on the internet. At Shop Laptop, we pride ourselves on offering customers the very best laptop deals.

Layout Settings↑ Back to Page

Before you add category layout setting enable & add the module in extension->module.
Now Go To Extensions extension -> modules.

4.2.1. Module : Category->Category

See in Step:10 Category

4.2.2. Module : Filter->Filter

See in Step:6 Filter

For Layout Setting Go to Design > Layouts.
For Account Layout setting Click on Account layout Edit link,(Click on Add Link if not available) and set below settings.

For Affiliate Layout setting Click on Affiliate layout Edit link,(Click on Add Link if not available) and set below settings.

For Home Layout setting Click on Home layout Edit link,(Click on Add Link if not available) and set below settings.

For Category Layout setting Click on Category layout Edit link,(Click on Add Link if not available) and set below settings.

For Checkout Layout setting Click on Checkout layout Edit link,(Click on Add Link if not available) and set below settings.

For Compare Layout setting Click on Compare layout Edit link,(Click on Add Link if not available) and set below settings.

For Contact Layout setting Click on Contact layout Edit link,(Click on Add Link if not available) and set below settings.

For Information Layout setting Click on Information layout Edit link,(Click on Add Link if not available) and set below settings.

For Default Layout setting Click on Default layout Edit link,(Click on Add Link if not available) and set below settings.

For Manufacturer Layout setting Click on Manufacturer layout Edit link,(Click on Add Link if not available) and set below settings.

For Product Layout setting Click on Product layout Edit link,(Click on Add Link if not available) and set below settings.

For Search Layout setting Click on Search layout Edit link,(Click on Add Link if not available) and set below settings.

For Sitemap Layout setting Click on Sitemap layout Edit link,(Click on Add Link if not available) and set below settings.

Step 5 : Mega Menu↑ Back to Top

Go to Catelog -> Categories -> Edit -> Select Data Tab.
Check Top Checkbox to Show MainCategories in Home Page Menu
Columns : Enter Number Of Columns(to Use for the bottom 3 categories.Only Works for Top Parent Categories)

Step 6 : Filter↑ Back to Top

Go to Extentions -> Extensions -> Modules -> Filter > Edit (Click on Install link if Edit link is not there)
From Status select Enabled.
Click on "Save" button.

Step 7 : Information↑ Back to Top

Go to Extentions -> Extensions -> Modules -> Information > Edit (Click on Install link if Edit link is not there)
From Status select Enabled.
Click on "Save" button.

Step 8 : Account↑ Back to Top

Go to Extensions -> Extensions -> Modules -> Account > Edit (Click on Install link if Edit link in not there)
From Status select Enabled.
Click on "Save" button.

Step 9 : category↑ Back to Top

Go to Extentions > Extensions > Modules > Category > Edit (Click on Install link if Edit link is not there)
From Status select Enabled.
Click on "Save" button.

Books - Documentation

System Requirements

Required PHP libraries / modules

Supported Version

Step 1 : Theme Installation

Installation (Common Steps)↑ Back to Page

01. Install with Quickstart Package:

1.1.1 Create new database

1.1.2 Extract and Upload the whole quickstart package (admin, catalog, image … etc books-quickstart folder ) to your server

1.1.3 Open browser and navigate to your site (where the quickstart uploaded) to load default Opencart installer with the database you just created.

1.1.4 Enter the username and password for the administration

1.1.5 Installation Complete

02. Install with Template Package↑ Back to Page

Unzip books-template-install zip file and then upload/overwrite (admin, catalog, extension, image, system)

Overwrite these directories from 'books-template-install' to your opencart root folder.

After overwrite above folders login admin panel and install All modules one by one

Step 2 : Logo settings ↑ Back to Top

Step 3 : Image size settings ↑ Back to Top

Step 3 : Language Settings↑ Back to Top

Step 4 : Theme Layouts ( Now All module installation and configuration Process )↑ Back to Top

Module : Slideshow -> Slideshow↑ Back to Page

Module : HTML Content-> HTML Page Testimonial↑ Back to Page

Module : Featured -> Featured Product↑ Back to Page

Module : Bestsellers -> Bestsellers↑ Back to Page

Module : Latest -> Latest↑ Back to Page

Module : Category Tab -> Category Tab↑ Back to Page

Module : Wd top -> Top Product↑ Back to Page

Module : HTML Content-> HTML Page Testimonial↑ Back to Page

Module : workdo Newsletter->Newsletter↑ Back to Page

Module : Workdo Blog -> Latest blog↑ Back to Page

Layout Settings↑ Back to Page

Step 5 : Mega Menu↑ Back to Top

Step 6 : Filter↑ Back to Top

Step 7 : Information↑ Back to Top

Step 8 : Account↑ Back to Top

Step 9 : category↑ Back to Top