Fashion - 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 style 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 style-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 style-template-install zip file and then upload/overwrite (admin, catalog, extension, image, system)

Replace Theme Folders

Overwrite these directories from 'style-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: 900 X 1100.
Change product image thumb size to: 900 X 1100.
Change Product Image Popup Size to: 900 X 1100.
Change product image list size to: 900 X 1100.
Change additional product image size to: 900 X 1100.
Change related product image size to: 900 X 1100.
Change wish list image size to: 47 X 47 .
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 & style  <span class="section-sub-title">Product Retailer </span> </h2>
                                             <div class="section-bottomtitle">We are a style 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 900) (your banner Width and height)
From status select Enabled
Now click on “Save” button.

Module : WD image Banner -> WD image Banner↑ Back to Page

For adding WD Offer Banner go to Design > Banners
Click on “Add New” button to add new banner.
Give Banner name: Offer Banner
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 WD image Banne code

<div class="section-title">
<div>
<div class="top-subtitle">Today Discounts</div>
<h2 class="section-main-title">Best Seller <span class="section-sub-title">Product store</span></h2>
<div class="section-bottomtitle">You've always wanted to buy inexpensive groceries, but didn't have the money or wherewithal to buy them all at once. Now you can with a supermarkets! With thousands of different products, there is always something new to buy.</div>
<a class="btn btn-primary btn-section" href="{{ banner.link }}"><img alt="shop" src="image/catalog/shop.png" /> <span>Show Products</span> <img alt="service icon" src="image/catalog/right-arrow.svg" /></a></div>
</div>

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

Module : WD Logo Banner -> WD Logo Banner↑ Back to Page

For adding WD Logo Banner go to Design > Banners
Click on “Add New” button to add new banner.
Give Banner name: Logo Banner
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.

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

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 (1000 X 900) (your product image Width and height)
From status select Enabled
Now click on “Save” button.

Module : Wdcategory -> Fresh All category↑ Back to Page

Go to Extentions > Extensions > Modules > Wdcategory click on "Add Module" button.
Give Module name: Fresh All category
Give Width & Height (100 X 100) (your
Add Category image, Title and sub title:
From status select Enabled
Now click on “Save” button.

Module : WD offer Banner -> WD offer Banner↑ Back to Page

For adding WD offer Banner go to Design > Banners
Click on “Add New” button to add new banner.
Give Banner name: offer Banner
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 WD offer Banne code

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

Module : Latest -> Latest Product↑ Back to Page

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

Module : WD center Banner -> WD center Banner↑ Back to Page

For adding WD Offer Banner go to Design > Banners
Click on “Add New” button to add new banner.
Give Banner name: Offer Banner
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 WD center Banne code

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

Module : Special -> Special product↑ Back to Page

Go to Extentions -> Extensions -> Modules -> Special product click on "Add Module" button.
Give Module name: Special product.
From product select: products.
Give Limit 20 and Width & Height (1000 X 900) (your product image Width and height).
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 : 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 (1000 X 900) (your product image Width and height).
From status select Enabled
Now click on “Save” button.

Module : Wd onsale -> onsale Product↑ Back to Page

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

Module : WD Right Banner -> WD Right Banner↑ Back to Page

For adding WD Right Banner go to Design > Banners
Click on “Add New” button to add new banner.
Give Banner name: Right Banner
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 WD Right Banne code

Now to activate your Main banner go to Extensions -> Extensions -> Modules -> Right Banner click on Edit link
Give Module name: Right Banner
From banner select Right Banner
Give Width & Height (555 X 452) (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="test-pad">
<div class="container parallex">
<div class="secheading">
<h1 class="heading text-left"><span><b>Testimonial</b> for all kids</span></h1>
<a class="btn btn-primary" href="#"><span>Go to product</span><img alt="stor" src="image/catalog/stor.svg" /></a></div>
<div class="row">
<div class="col-xs-12 testi">
<div class="wbtesti">
<div class="testi-spc">
<div class="item">
<div class="testdec"><img alt="1" class="img-fluid" src="image/catalog/testimonial/1.jpg" /></div>
<div class="testi-dec">
<h4>Fantastic!</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
<div class="testdec-ctn">
<h5>John doe,Client</h5>
</div>
</div>
</div>
</div>
<div class="testi-spc">
<div class="item">
<div class="testdec"><img alt="1" class="img-fluid" src="image/catalog/testimonial/2.jpg" /></div>
<div class="testi-dec">
<h4>Fantastic!</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
<div class="testdec-ctn">
<h5>John doe,Client</h5>
</div>
</div>
</div>
</div>
<div class="testi-spc">
<div class="item">
<div class="testdec"><img alt="1" class="img-fluid" src="image/catalog/testimonial/3.jpg" /></div>
<div class="testi-dec">
<h4>Fantastic!</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
<div class="testdec-ctn">
<h5>John doe,Client</h5>
</div>
</div>
</div>
</div>
<div class="testi-spc">
<div class="item">
<div class="testdec"><img alt="1" class="img-fluid" src="image/catalog/testimonial/4.jpg" /></div>
<div class="testi-dec">
<h4>Fantastic!</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
<div class="testdec-ctn">
<h5>John doe,Client</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

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 (1000 X 650)(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.

Fashion - Documentation