Opencart Installation
For installation of Opencart, you just need to follow these steps Click here
Easy Ways to Install Shopz Theme.
Install with Template Package
After you complete the installation of Default opencart, please follow below steps to install themes
Unzip the shopz.zip package.
Just Overwrite Below Folders.
"admin" (Overwrite this folder)
"catalog" (Overwrite this folder)
"image" (Overwrite this folder)
NOTE : After File Replace You May Get ERROR(COULD NOT LOAD FILE) ON FRONT SIDE. Don't worry, Just Follow below Step
After Completing Installation Steps Must be Select Theme Store In Admin Panel for that:
For Admin panel : your store name/admin (For Example: example.com/admin)
Enter Your Username & Password .
From Default Home Go to Extensions > Extensions > Themes > Your Store > click on "Edit" Button.
Next : Select > default
Click On : " Save" Button
Step2 : Logo and Image size settings
Logo setting : Go to System > Setting > Edit > Images
From Store Logo you can upload your logo image.
For Image Size setting
Images setting : Go Extensions > Extensions > Themes > shopz-store-1 > Edit
Change category image size to: 200 X 300
Change product image thumb size to:455 X 500,
Change Product Image Popup Size to:728 X 800,
Change product image list size to:284 X 312 ,
Change additional product image size to:72 X 80,
Change related product image size to:284 X 312 ,
Change cart image size to:47 X 47 ,
Change store image size to: 150 X 150
Click on. “Save” button
For Store setting
Go To System > Settings > Click on Your store Edit Button, and set below settings.
Step 3 : Language Settings
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 : “Add New” Arabic
Code : ar
Locale: ar-UN,ar_UN,UTF-8,Arabic
Status: Enable
Sort Order: 1
Click on “Save” button
Step 4 : All Module Installations
Content Top Modules
Step 4.1 : Module Name : Slideshow > Slideshow
For adding Slideshow banners
Go to Design > Banners
Click on Add New button for add new banner.
Now 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.
Till Not complete process follow below steps
Now to activate your Main banner go to Extensions > Extensions > Modules > Slideshow click on Add New Button
Give Module name: "Slideshow"
From banner select: "Slideshow"
Give Width & Height (1140 X 500) (your banner Width and height)
From status select: "Enabled"
Now click on “Save” button
Step 4.0 : Module Name : Banner > Banner
For adding Advertise Banner banners
Go to Design > Banners
Click on Add New button for add new banner.
Now Give Banner name " Promocode"
From status select " Enabled"
And click on “Add Banner” button.
Give title of your banner and click on image to upload your banner.
Now click on “Save” button.
Till Not complete process follow below steps
Now to activate your Main banner go to Extensions > Extensions > Modules > Advertise Banner click on Install Button And click Add New Button
Give Module name: "promocode"
From banner select: "promocode"
Give Width & Height (1140 X 80) (your banner Width and height)
From status select: "Enabled"
Now click on “Save” button
Step 4.3 : Module Name : Cloths > Cloths
Go to Extentions > Extensions > Modules > Cloths click on "install" button.
Give Module name: Cloths
Select product as per your requirement
Give Limit 12 and Width & Height (325 X 400) (your product image Width and height)
From status select : Enabled
Now click on: “Save”button.
Step 4.4 : Module Name : Offer > Offer
Go to Design > Banners
Click on Add New button for add new banner.
Now Give Banner name " Summer Offer"
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.
Till Not complete process follow below steps
Now to activate your Main banner go to Extensions > Extensions > Modules > promocode click on Install Button And click Add New Button
Give Module name: "Summer Offer"
From banner select: "Summer Offer"
Give Width & Height (246 X 303) (your banner Width and height)
From status select: "Enabled"
Now click on “Save” button
Step 4.5 : Module Name : Special > Special
Go to Extentions > Extensions > Modules > Cloths click on "install" button.
Give Module name: Special
Select product as per your requirement
Give Limit 10 and Width & Height (400 X 400) (your product image Width and height)
From status select : Enabled
Now click on: “Save”button.
Step 4.6 : Module Name : Banner > Advertise Banner Content
For adding Advertise Banner banners
Go to Design > Banners
Click on Add New button for add new banner.
Now Give Banner name " Advertise Banner Content"
From status select " Enabled"
And click on “Add Banner” button.
Give title of your banner and click on image to upload your banner.
Now click on “Save” button.
Till Not complete process follow below steps
Now to activate your Main banner go to Extensions > Extensions > Modules > Advertise Banner click Add New Button
Give Module name: "Advertise Banner Content"
From banner select: "Advertise Banner Content"
Give Width & Height (1140 X 160) (your banner Width and height)
From status select: "Enabled"
Now click on “Save” button
Step 4.7 : Module Name : Electronic > Electronic
Go to Extentions > Extensions > Modules > Electronic click on "install" button.
Give Module name: Electronic
Select product as per your requirement
Give Limit 10 and Width & Height (325 X 400) (your product image Width and height)
From status select : Enabled
Now click on: “Save”button.
Step 4.8 : Module Name : Image & Product > Image & Product
Go to Extentions > Extensions > Modules > image with product click on "install" button.
Give Module name: Image & Product
Now next
Select product as per your requirement
Give Limit 10 and Width & Height (240 X 280) (your product image Width and height)
From status select : Enabled
Now click on: “Save”button.
Step 4.9 : Module Name : Watch > Watch
Go to Extentions > Extensions > Modules > Watch click on "install" button.
Give Module name: Watch
Select product as per your requirement
Give Limit 10 and Width & Height (325 X 400) (your product image Width and height)
From status select : Enabled
Now click on: “Save”button.
Step 4.10 : Module Name : Carousel > Carousel
Go to Design > Banners
Click on Add New button for add new banner.
Now Give Banner name " Carousel"
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.
Till Not complete process follow below steps
Now to activate your Main banner go to Extensions > Extensions > Modules > promocode click on Install Button And click Add New Button
Give Module name: "Carousel"
From banner select: "Carousel"
Give Width & Height (130 X 100) (your banner Width and height)
From status select: "Enabled"
Now click on “Save” button
Column Left Modules
Step 1 : Module Name :HTML Content > HTML Content
Go to Extensions > Extensions > Modules > HTML Content > Install(After install click on "Edit" Button)
After Install Click On : "Add Button"
Give Module Name: Left Category
Now In Description click on Code View button in text editor block and paste this code.
<div class="left-category">
<div class="shopz-title-left">
<h3><i class="fa fa-bars" aria-hidden="true"></i> Categories</h3>
</div>
<ul type="none">
<li><a data-toggle="collapse" class="cat-collaps collapsed" data-parent="#accordion" href="#collapseTwo"><img src="image/catalog/icon/sb-icon-1.png"> Electronics</a>
<ul id="collapseTwo" class="collapse" type="none">
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> Mobile</a></li>
<li><a href="#"> <i class="fa fa-angle-right" aria-hidden="true"></i> Earphones</a></li>
<li><a href="#"> <i class="fa fa-angle-right" aria-hidden="true"></i> USB Cables</a></li>
</ul>
</li>
<li><a data-toggle="collapse" class="cat-collaps collapsed" data-parent="#accordion" href="#collapsethree"><img src="image/catalog/icon/sb-icon-2.png"> Fashion</a>
<ul id="collapsethree" class="collapse" type="none">
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> Mobile</a></li>
<li><a href="#"> <i class="fa fa-angle-right" aria-hidden="true"></i> Earphones</a></li>
<li><a href="#"> <i class="fa fa-angle-right" aria-hidden="true"></i> USB Cables</a></li>
</ul>
</li>
<li><a href="#"><img src="image/catalog/icon/sb-icon-3.png"> Spa & Massage</a></li>
<li><a href="#"><img src="image/catalog/icon/sb-icon-4.png"> Travel & Entertainment</a></li>
<li><a href="#"><img src="image/catalog/icon/sb-icon-5.png"> Stationary</a></li>
<li><a href="#"><img src="image/catalog/icon/sb-icon-6.png"> Sport & Entertainment</a></li>
<li><a href="#"><img src="image/catalog/icon/sb-icon-7.png"> Real Home</a></li>
<li><a data-toggle="collapse" class="cat-collaps collapsed" data-parent="#accordion" href="#jwlry"><img src="image/catalog/icon/sb-icon-3.png"> Jewellery</a>
<ul id="jwlry" class="collapse" type="none">
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> Mobile</a></li>
<li><a href="#"> <i class="fa fa-angle-right" aria-hidden="true"></i> Earphones</a></li>
<li><a href="#"> <i class="fa fa-angle-right" aria-hidden="true"></i> USB Cables</a></li>
</ul>
</li>
<li><a href="#"><img src="image/catalog/icon/sb-icon-7.png"> Home Applience</a></li>
</ul>
</div>
From status select Enabled
Now click on “Save” button.
Step 2 : Module Name : Latest > Latest
Go to Extentions > Extensions > Modules > Latest click on "install" button.
Give Module name: Latest
Give Limit 10 and Width & Height (325 X 400) (your product image Width and height)
From status select : Enabled
Now click on: “Save”button.
Step 3 : Module Name : Banner > Left Banner 1
For adding Advertise Banner
Go to Design > Banners
Click on Add New button for add new banner.
Now Give Banner name " Left Banner 1"
From status select " Enabled"
And click on “Add Banner” button.
Give title of your banner and click on image to upload your banner.
Now click on “Save” button.
Till Not complete process follow below steps
Now to activate your Main banner go to Extensions > Extensions > Modules > Advertise Banner click Add New Button
Give Module name: "Left Banner 1"
From banner select: "Left Banner 1"
Give Width & Height (250 X 490) (your banner Width and height)
From status select: "Enabled"
Now click on “Save” button
Step 4 : Module Name : Trend > Trend Product
Go to Extentions > Extensions > Modules > Trend Product click on "install" button.
Give Module name: Trend Product
Select product as per your requirement
Give Limit 8 and Width & Height (100 X 100) (your product image Width and height)
From status select : Enabled
Now click on: “Save”button.
Step 5 : Module Name : Bestseller > Bestseller
Go to Extentions > Extensions > Modules > Bestseller click on "install" button.
Give Module name: Bestseller
Give Limit 8 and Width & Height (325 X 400) (your product image Width and height)
From status select : Enabled
Now click on: “Save”button.
Column Right Modules
Step 1 : Module Name : Banner > Right Banner 1
For adding Advertise Banner
Go to Design > Banners
Click on Add New button for add new banner.
Now Give Banner name " Right Banner 1"
From status select " Enabled"
And click on “Add Banner” button.
Give title of your banner and click on image to upload your banner.
Now click on “Save” button.
Till Not complete process follow below steps
Now to activate your Main banner go to Extensions > Extensions > Modules > Advertise Banner click Add New Button
Give Module name: "Right Banner 1"
From banner select: "Right Banner 1"
Give Width & Height (252 X 205) (your banner Width and height)
From status select: "Enabled"
Now click on “Save” button
Step 2 : Module Name : Today offer > Today offer
Go to Extentions > Extensions > Modules > Today click on "install" button.
Give Module name: Today offer
Select product as per your requirement
Give Limit 8 and Width & Height (100 X 100) (your product image Width and height)
From status select : Enabled
Now click on: “Save”button.
Step 3 : Module Name : Banner > Right Banner 2
For adding Advertise Banner
Go to Design > Banners
Click on Add New button for add new banner.
Now Give Banner name " Right Banner 2"
From status select " Enabled"
And click on “Add Banner” button.
Give title of your banner and click on image to upload your banner.
Now click on “Save” button.
Till Not complete process follow below steps
Now to activate your Main banner go to Extensions > Extensions > Modules > Advertise Banner click Add New Button
Give Module name: "Right Banner 2"
From banner select: "Right Banner 2"
Give Width & Height (247 X 395) (your banner Width and height)
From status select: "Enabled"
Now click on “Save” button
Step 4 : Module Name : Banner > Right Banner 3
For adding Advertise Banner
Go to Design > Banners
Click on Add New button for add new banner.
Now Give Banner name " Right Banner 3"
From status select " Enabled"
And click on “Add Banner” button.
Give title of your banner and click on image to upload your banner.
Now click on “Save” button.
Till Not complete process follow below steps
Now to activate your Main banner go to Extensions > Extensions > Modules > Advertise Banner click Add New Button
Give Module name: "Right Banner 3"
From banner select: "Right Banner 3"
Give Width & Height (250 X 190) (your banner Width and height)
From status select: "Enabled"
Now click on “Save” button
Step 5 : Module Name : Feature > Feature
Go to Extentions > Extensions > Modules > Feature click on "install" button.
Give Module name: Feature
Select product as per your requirement
Give Limit 8 and Width & Height (100 X 100) (your product image Width and height)
From status select : Enabled
Now click on: “Save”button.
Step 6 : Module Name :HTML Content > HTML Content
Go to Extensions > Extensions > Modules > HTML Content > Install(if not install After install click on "Edit" Button)
After Install Click On : "Add Button"
Give Module Name: Parallex
Now In Description click on Code View button in text editor block and paste this code.
<!--HTML parallex start -->
<div class="col-md-12">
<div class="row">
<div id="testimonial" class="owl-carousel arrow-top">
<div class="col-md-12 col-sm-12 col-xs-12">
<a class="item">
</a><div class="col-md-12 col-sm-12 col-xs-12"><a class="item">
<img src="image/catalog/testimonial/testimonial-01.jpg" class="img-circle center-block img-responsive">
</a><div class="text-center"><a class="item">
<h3 class="testimonial-title">John Doe</h3>
<p>- Expert Developer</p>
<p class="testimonial-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's
</p>
</a>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<a class="item">
</a><div class="col-md-12 col-sm-12 col-xs-12"><a class="item">
<img src="image/catalog/testimonial/testimonial-03.jpg" class="img-circle center-block img-responsive">
</a><div class="text-center"><a class="item">
<h3 class="testimonial-title">John Doe</h3>
<p>- Expert Developer</p>
<p class="testimonial-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's
</p></a>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<a class="item">
</a><div class="col-md-12 col-sm-12 col-xs-12"><a class="item">
<img src="image/catalog/testimonial/testimonial-02.jpg" class="img-circle center-block img-responsive">
</a><div class="text-center"><a class="item">
<h3 class="testimonial-title">John Doe</h3>
<p>- Expert Developer</p>
<p class="testimonial-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
</p></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--HTML parallex end -->
From status select Enabled
Now click on “Save” button.
