Opencart Installation
For installation of Opencart, you just need to follow these steps Click here
Easy Ways to Install Floral Theme.
Install with Template Package
Install with Template Package
After you complete the installation of Default opencart, please follow below steps to install themes
- Step 1 - Unzip the upload.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 > Smart Shop-store-1 > Edit
Change category image size to: 1200 X 200
Change product image thumb size to:450 X 500,
Change Product Image Popup Size to:720 X 780,
Change product image list size to:325 X 350 ,
Change additional product image size to:90 X 92,
Change related product image size to:325 X 350 ,
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 > HomepageSlideshow
For adding Slideshow banners
Go to Design > Banners
Click on Add New button for add new banner.
Now Give Banner name "HomepageSlideshow"
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: "Homepage"
From banner select: "HomepageSlideshow"
Give Width & Height (1920 X 650) (your banner Width and height)
From status select: "Enabled"
Now click on “Save” button
Step 4.2 : Module Name :HTML Content > cms banner
Go to Extensions > Extensions > Modules > HTML Content > Install(After install click on "Edit" Button)
After Install Click On : "Add Button"
Give Module Name: cms banner
Now In Description click on Code View button in text editor block and paste this code.
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 b-effect sub-banner">
<div class="img-effect">
<a href="#">
<img src="image/catalog/banners/banner-01.png" alt="banner1" class="img img-responsive">
</a>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 b-effect sub-banner">
<div class="img-effect">
<a href="#">
<img src="image/catalog/banners/banner-02.png" alt="banner1" class="img img-responsive">
</a>
</div>
</div>
</div>
</div>
From status select Enabled
Now click on “Save” button.
Step 4.3 : Module Name : Featured > Featured
Go to Extentions > Extensions > Modules > Featured click on "install" button.
Give Module name: Featured
Select product as per your requirement
Give Limit 8 and Width & Height (325 X 350) (your product image Width and height)
From status select : Enabled
Now click on: “Save”button.
Step 4.4 : 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 (325 X 350) (your product image Width and height)
From status select : Enabled
Now click on: “Save”button.
Step 4.5 : Module Name :HTML Content > Offer
Go to Extensions > Extensions > Modules > HTML Content > click on "Edit" Button
After Install Click On : "Add Button"
Give Module Name: Offer
Now In Description click on Code View button in text editor block and paste this code.
<div class="offers">
<div class="container">
<div class="row">
<div class="offer-miss">
<div class="col-lg-8 wow fadeInLeft">
<h3>Don't Miss Out Latest Offers</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quasi explicabo consequatur consectetur, a atque voluptate officiis eligendi nostrum.</p>
</div>
<div class="col-lg-4 text-center wow fadeInRight">
<br>
<a href="#" class="btn btn-primary offer-btn">Learn More</a>
</div>
</div>
</div>
</div>
</div>
From status select Enabled
Now click on “Save” button.
Step 4.6 : 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 350) (your product image Width and height)
From status select : Enabled
Now click on: “Save”button.
Step 4.7 : Module Name :HTML Content > HTML Content
Go to Extensions > Extensions > Modules > HTML Content >click on "Edit" Button
After Install Click On : "Add Button"
Give Module Name: Testimonial
Now In Description click on Code View button in text editor block and paste this code.
<section class="client-prlx">
<div class="container">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<!--<div class="cmn-title wow bounce tst-cmn-title"><h3>What <span>Client's</span> Saying</h3></div>-->
<div id="testimonial" class="owl-carousel arrow-top">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12 t-up">
<a class="item t-img">
<img src="image/catalog/testimonial/testimonial-01.jpg" class="img-circle center-block img-responsive">
</a>
<div class="text-center text-content">
<a class="item">
<h3 class="testimonial-title">Jenna Doe</h3>
<p>- Expert Developer</p>
<p class="testimonial-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing.<br>
Lorem Ipsum has been the industry's
</p>
</a>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12 t-up">
<a class="item t-img">
<img src="image/catalog/testimonial/testimonial-03.jpg" class="img-circle center-block img-responsive">
</a>
<div class="text-center text-content">
<a class="item">
<h3 class="testimonial-title">Jenna Doe</h3>
<p>- Expert Developer</p>
<p class="testimonial-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing.<br>
Lorem Ipsum has been the industry's
</p>
</a>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 wow fadeInUp animated">
<div class="col-md-12 col-sm-12 col-xs-12 t-up">
<a class="item t-img">
<img src="image/catalog/testimonial/testimonial-02.jpg" class="img-circle center-block img-responsive">
</a>
<div class="text-center text-content">
<a class="item">
<h3 class="testimonial-title">Jenna Doe</h3>
<p>- Expert Developer</p>
<p class="testimonial-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing.<br>
Lorem Ipsum has been the industry's
</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
From status select Enabled
Now click on “Save” button.
Step 4.8 : Module Name : Inspire Blog > Inspire Blog
Go to Extentions > Extensions > Modules > Inspire Blog click on "install" button.
Give Module name: Latest Blog
Give Limit 10 and Width & Height (893 X 502)
From status select : Enabled
Allow Comments : Yes
Login Required : No
Automatic Approval : Yes
Now click on: “Save”button.
Go to Extentions > Extensions > Modules > nspire Blog click on "Latest Blog" button.
Step 4.1 : Module Name : Menuf > HomepageSlideshow
For adding Mefufracture Brand logo
Go to Design > Banners
Click on Add New button for add new brand.
Now Give Banner name "Manufacturers"
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 > Carousel click on Add New Button
Give Module name: "Menufacturers"
From banner select: "Menufacturers"
Give Width & Height (225 X 125) (your banner Width and height)
From status select: "Enabled"
Now click on “Save” button
