# WELCOME TO SHOPNOW THEME

### RESPONSIVE MULTI-PURPOSE PREMIUM OPENCART THEME

## Step1 : Installation

### Installation (Common Steps)

-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 SO Theme:

For installation of Opencart, you just need to follow these steps, Installation

Install Quickstart: By using this package, you will set the template exactly as our Demo with sample data.

Install Template : If you exist a opencart website you can install only template.

#### 1.1 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 … in tt_cygnus_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

#### 1.2 Install with Template Package:

### Upload Theme Files

After you complete the installation of opencart, please follow below steps to install themes

- Step 1 - Unzip the shopnow.zip package.

Step 2: For store-2 :select your store folder (store-2) as per your requirement.

##### Replace Theme Files

- Paste these directories from 'Theme-package' to your opencart root folder.
- "admin" (Overwrite this folder)
- "catalog" (Overwrite this folder)
- "image" (Overwrite this folder)

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

##### After Completing Installation Steps Must be Select Theme Store In Admin Panel for that:

- For Default Home : Go to Extensions > Extensions > Themes > shopnow > Edit

### Step2 : Logo and Image size settings

- ##### For Logo setting , Go to System > Setting > Edit > Images,

- From Store Logo you can upload your logo image.

##### For Image Size setting ,

##### For Default_Home : Go Extensions > Extensions > Themes > shopnow > Edit ,

- Change category image size to: 250 X 300 ,
- Change product image thumb size to: 520 X 576,
- Change Product Image Popup Size to: 875 X 1000,
- Change product image list size to: 343 X 392 ,
- Change additional product image size to: 100 X 125,
- Change related product image size to: 343 X 392 ,
- Change wish list image size to: 70 X 70 ,
- Change cart image size to: 70 X 70 ,
- Change store image size to: 150 X 150 .
- Click on “Save” button.

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

### Step 3 : Language Settings

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.

### Step4 : Theme Layouts

#### 4.1. Store2

#### 4.1.1. Module : Slideshow->Home Page Slideshow

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

- 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 600) (your banner Width and height),
- From status select Enabled,
- Now click on “Save” button.

#### 4.1.2. Module : Featured -> featured

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

#### 4.1.3. Module : home banner ->home banner

- Go to Extensions > Extensions > Modules > home banner > Install(After install click on "Edit" link),
- Click on "Add Module"
- Give Module Name:home banner
- Now In Description click on Code View button in text editor block and paste this code.

                <div class="container-fluid homebanner">
    <div class="row">
        <div class="col-md-8 col-xs-8 col-sm-8 b1 em-effect07">
         <a href="#" class="em-eff06-04">
             <img src="image/catalog/banner/1.jpg" class="img-responsive">
          </a>
      </div>

        <div class="col-md-4 col-xs-4 col-sm-4 b2 em-effect07">
        <a href="#" class="em-eff06-04">
        <img src="image/catalog/banner/banner2.png" class="img-responsive">
        </a>
        </div>
    </div>
    </div>

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

#### 4.1.4. Module : Latest -> Latest

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

#### 4.1.5. Module : Specials -> specials

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

- add compulsory 4 products as special

#### 4.1.6. Module : Bestsellers -> Bestsellers

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

- add compulsory 4 products as bestseller

#### 4.1.7. Module : Toprated -> toprated

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

- add compulsory 4 products as toprated

#### 4.1.8. Module : Carousel->brands

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

- Now to activate your Main brand go to Extensions > Extensions > Modules > Carousel click on Edit link
- Give Module name: brands ,
- From banner select brands,
- Give Width & Height (215 X 105) (brands Width and height),
- From status select Enabled,
- Now click on “Save” button.

#### 4.1.9. Module : Webi Blog ->Blog

- Go to Extensions > Extensions > Modules > Webi Blog > Edit (Click on Install link if Edit link is not there)
- Give Module name: Blog
- From status select Enabled
- Give Image size (893 X 502)(your blog image Width and height)
- And Give Limit 6 and character limit 130
- From Allow Comments select Yes
- From Login Required select No
- From Automatic Approval select Yes
- Now click on “Save” button.
(Save will redirect this page.)

- Now click on Add Blog button to adding Blog,
- In General tab, Give Title : Lorem ipsum dolor sit amet, consectetur adipiscing.
- Now click on Code View button in text editor block and write your Blog description.

    But I must explain to you how all this mistaken idea of denouncing plesure and praising  pain was born and i will give you a complete account of the system, and expound the actual.

- 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 : Lorem ipsum dolor sit amet, consectetur adipiscing.
- Now click on Code View button in text editor block and write your Blog description.

    But I must explain to you how all this mistaken idea of denouncing plesure and praising  pain was born and i will give you a complete account of the system, and expound the actual.

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

- Same way you can add more blogs by click on Add Blog button.
- Also you can view comments of particular Blog by click on View Comments button and you can view full list of blogs.
- Now click on “Save” button.

#### 4.1.10. Module : HTML Content->html_shipping

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

    <!--Delivery Information -->
    <div class="container-fluid deliveryinfo">
    <div class="container">
        <div class="row">
            <div class="col-sm-3 col-xs-12">
                <ul>
                    <li class="text-center">
                        <img src="image/catalog/service/1.png" alt="shipping" class="img-responsive">
                    </li>
                    <li>
                        <h4>Free Shipping</h4>
                        <p>For all order over $90.00</p>
                    </li>
                </ul>
            </div>
            <div class="col-sm-3 col-xs-12">
                <ul>
                    <li class="text-center">
                        <img src="image/catalog/service/2.png" alt="return" class="img-responsive">
                    </li>
                    <li>
                        <h4>Return Exchange</h4>
                        <p>30 days use trial and return</p>
                    </li>
                </ul>
            </div>
            <div class="col-sm-3 col-xs-12">
                <ul>
                     <li class="text-center">
                        <img src="image/catalog/service/3.png" alt="support" class="img-responsive">
                     </li>
                    <li>
                        <h4>Support 24/7</h4>
                        <p>Always feedback customer 24/7</p>
                      </li>
                </ul>
            </div>
            <div class="col-sm-3 col-xs-12">
                 <ul>
                     <li class="text-center">
                        <img src="image/catalog/service/4.png" alt="safe shipping" class="img-responsive">
                     </li>
                    <li>
                        <h4>Safe Shopping</h4>
                        <p>Safe shopping guarantee</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </div>
    <!--shipping over-->

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

#### 4.1.11. Module : HTML Content->Newsletter

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

                                              <div class="container">
    <div class="col-md-2"></div>
    <div class="col-md-8">
    <div class="newsl">
    <h4>Newsletter</h4>
                   	<div id="input-email" class="input-group">
    <img src="image/catalog/icon/envelop.png" alt="newsletter" class="hidden-xs">
      <input name="search" value="" placeholder="Enter your email..." class="form-control input-lg" type="text">
      <span class="input-group-btn">
        <button type="button" class="btn subscribe"><span>subscribe</span></button>
      </span>
    </div>
    </div>
    </div>
    <div class="col-md-2"></div>
     </div>

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

#### 4.1.12. Module : HTML Content->footerbottom

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

                                                 <div class="footcolor">
        <div class="container">
        <div class="row footcopy">
        <div class="col-md-6 col-sm-6 col-xs-12">
            <p> Powered By <a href="http://www.opencart.com">OpenCart</a> Your Store © 2017 </p>
            </div>
        <div class="col-md-3 col-sm-3 col-xs-12 footsocial">
                <span class="hidden-xs"> CONNECT </span>
                <a href="#"><i class="fa fa-facebook-square"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
                <a href="#"><i class="fa fa-instagram"></i></a>
                <a href="#"><i class="fa fa-youtube-play"></i></a>
                <a href="#"><i class="fa fa-google-plus"></i></a>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-12 footpay">
               <span class="hidden-xs"> PAYMENT </span>
              <img src="image/catalog/payment/mastercard.png" class="img-responsive">
              <img src="image/catalog/payment/group1.png" class="img-responsive">
              <img src="image/catalog/payment/group.png" class="img-responsive">
              <img src="image/catalog/payment/paypal.png" class="img-responsive">
            </div>

        </div>
        </div>
        </div>

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

#### 4.1.13. Module : Search Category

- Go to Extensions > Extensions > Modules > Search Category > Install(After install click on "Edit" link).
- From Enable Search by Category select Enabled
- From Enable Ajax Search select Enabled
- From Ajax Loader Image upload loader image.
- From Show Product Image select Enabled
- From Show Product Price select Enabled

- Now click on “Save” button.

##### Now, Next Step is Add Modules in Layouts

#### Layouts

Go to Design -> layout -> edit -> Home

#### 4.2. Layout Settings

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

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

#### 1.3.1. Module : Category->Category

See in Step:10 Category

#### 1.3.2. Module : Filter->Filter

See in Step:6 Filter

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

- For Layout Setting Go to Design > Layouts ,
- For Blog Layout setting Click on Add New 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

- 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

- 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

- 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

- 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 : Affiliate

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

### Step 10 : category

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

### Step 11 : Need More Help?

Thank you for reading! We hope you can create the best website with our themes. If you have any questions that are beyond the scope of this guide, please feel free to contact us. Email: support@webiarch.com