WELCOME TO FLAVORO THEME

RESPONSIVE OPENCART THEME

Getting Started

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

Note: At admin ,Go to > Extension > Modifications > Click on refresh button at top

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 Flavoro.zip package.
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 > Flavoro Multistore > 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 > Flavoro Multistore > Edit ,
  • Change category image thumb size to: 167 X 167,
  • Change product image thumb size to: 620 X 680,
  • Change Product Image Popup Size to: 728 X 800,
  • Change product image list size to: 292 X 321 ,
  • Change additional product image size to: 120 X 120,
  • Change related product image size to: 292 X 321 ,
  • Change wish list image size to: 47 X 47 ,
  • Change cart image size to: 90 X 90 ,
  • 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

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

4.1.2. Module : imgbanner-> imgbanner

  • For adding imgbanner banners 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.
  • Now to activate your Main banner go to Extensions > Extensions > Modules > imgbanner click on Edit link
  • Give Module name: imgbanner,
  • From banner select imgbanner,
  • Give Width & Height (360 X 570) (your banner Width and height),
  • From status select Enabled,
  • Now click on “Save” button.

4.1.9. Module : febanner -> febanner

  • For adding febanner banners go to Design > Banners
  • Click on “Add New” button to add new banner.
  • Give Banner name: febanner,
  • 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 > febanner click on Edit link
  • Give Module name: febanner ,
  • From banner select febanner,
  • Give Width & Height (750 X 250) (your banner Width and height),
  • From status select Enabled,
  • Now click on “Save” button.

4.1.9. Module : bestba -> bestba

  • For adding bestba banners go to Design > Banners
  • Click on “Add New” button to add new banner.
  • Give Banner name: bestba ,
  • 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 > bestba click on Edit link
  • Give Module name: bestba ,
  • From banner select bestba ,
  • Give Width & Height (360 X 250) (your banner Width and height),
  • From status select Enabled,
  • Now click on “Save” button.

4.1.9. Module : leftbanner -> leftbanner

  • For adding leftbanner banners go to Design > Banners
  • Click on “Add New” button to add new banner.
  • Give Banner name: leftbanner,
  • 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 > leftbanner click on Edit link
  • Give Module name: leftbanner ,
  • From banner select leftbanner,
  • Give Width & Height (360 X 250) (your banner Width and height),
  • From status select Enabled,
  • Now click on “Save” button.

4.1.9. Module : offerbanner -> offerbanner

  • For adding offerbanner banners go to Design > Banners
  • Click on “Add New” button to add new banner.
  • Give Banner name: offerbanner ,
  • 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 > bestba click on Edit link
  • Give Module name: offerbanner ,
  • From banner select offerbanner ,
  • Give Width & Height (750 X 250) (your banner Width and height),
  • From status select Enabled,
  • Now click on “Save” button.

4.1.4. Module : Home Page categories -> Home Page categories

  • Go to Extentions > Extensions > Modules > Home Page categories"Add Module" button.
  • status select Enabled,
  • Now click on “Save” button.

4.1.5. Module : Featured -> Home Page Featured

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

4.1.7. Module : Bestsellers -> Home Page Bestsellers

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

4.1.8. Module : Latest -> Home Page Latest

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

4.1.2. Module : HTML Content-> testimonial

  • Go to Extensions > Extensions > Modules > HTML Content > Install(After install click on "Edit" link)
  • Give Module Name: testimonial
  • Now In Description click on Code View button in text editor block and paste this code.
                                            
<div class="container">
<div class="row dinfo">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 siinfo s1">
  <div class="sj">
<div class="dimg"><svg width="36px" height="36px"><use xlink:href="#support"></use></svg></div>
<div class="deltext">
  <h4>24 X 7 Free Support</h4>
  <p>Passage of Lorem Ipsum, you need to be embarrassing</p><a href="#">read more</a>
</div>
</div>
  </div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 siinfo s2">
    <div class="sj">
<div class="dimg"><svg width="36px" height="36px"><use xlink:href="#money"></use></svg></div>
<div class="deltext">
  <h4>Money Back Guaranty</h4>
  <p>Passage of Lorem Ipsum, you need to be embarrassing</p><a href="#">read more</a>
</div>
</div>
  </div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 siinfo">
    <div class="sj">
<div class="dimg"><svg width="36px" height="36px"><use xlink:href="#shipp"></use></svg></div>
<div class="deltext">
  <h4>Free World Shipping</h4>
  <p>Passage of Lorem Ipsum, you need to be embarrassing</p><a href="#">read more</a>
</div>
 </div>
  </div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 siinfo">
    <div class="sj">
<div class="dimg"><svg width="36px" height="36px"><use xlink:href="#win"></use></svg></div>
<div class="deltext">
  <h4>Win $100 To Shop</h4>
  <p>Passage of Lorem Ipsum, you need to be embarrassing</p><a href="#">read more</a>
</div>
  </div>
  </div></div></div>
  • From status select Enabled,
  • Now click on “Save” button.

4.1.9. Module : sellbanner -> sellbanner

  • For adding sellbanner banners go to Design > Banners
  • Click on “Add New” button to add new banner.
  • Give Banner name: sellbanner ,
  • 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 > sellbanner click on Edit link
  • Give Module name: sellbanner ,
  • From banner select sellbanner ,
  • Give Width & Height (1920 X 440) (your banner Width and height),
  • From status select Enabled,
  • Now click on “Save” button.

4.1.8. Module : special ->special

  • Go to Extentions > Extensions > Modules > special click on "Add Module" button.
  • Give Module name: Latest Product,
  • Give Limit 20 and Width & Height (292 X 321) (your product image Width and height),
  • From status select Enabled,
  • give a product has specific price with end date Yes
  • Now click on “Save” button.

4.1.12. Module : HTML Content-> othermodul

  • Go to Extensions > Extensions > Modules > HTML Content > Install(After install click on "Edit" link)
  • Give Module Name: othermodul
  • Now In Description click on Code View button in text editor block and paste this code.
                                            
<div class="parallex test-bg text-xs-center">
  <div class="container">
    <div id="testi" class="owl-carousel owl-theme">
    <div class="item">
      <div class="content_test">
        <div class="testimg">
          
          <div class="text-p"><svg width="35px" height="35px"><use xlink:href="#quote"></use></svg>
            <p>But I must explain to you how all this mistaken idea of denouncing the master e cites of the word in one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally source. Lorem Ipsum come pleasure and praising pain was born and I will give.</p></div>
          <span class="tbleft"></span>
              <ul><li><img src="image/catalog/html/testi1.png" class="img-responsive testi1"></li>
                  <li><h3>Jesica Wilson</h3><span class="first-t1">developer</span></li>
              </ul><span class="tbright"></span>
      </div>
    </div>
      </div>  
      <div class="item">
      <div class="content_test">
        <div class="testimg">
      <div class="text-p">
         <svg width="35px" height="35px"><use xlink:href="#quote"></use></svg>
         <p>But I must explain to you how all this mistaken idea of denouncing the master e cites of the word in one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally source. Lorem Ipsum come pleasure and praising pain was born and I will give.</p></div>
          <span class="tbleft"></span>
              <ul><li><img src="image/catalog/html/testi2.png" class="img-responsive testi1"></li>
                  <li><h3>Jesica Wilson</h3><span class="first-t1">developer</span></li>
              </ul><span class="tbright"></span>
        </div></div>
      </div>
      <div class="item">
      <div class="content_test">
        <div class="testimg">
      <div class="text-p"> <svg width="35px" height="35px"><use xlink:href="#quote"></use></svg>
       <p>But I must explain to you how all this mistaken idea of denouncing the master e cites of the word in one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally source. Lorem Ipsum come pleasure and praising pain was born and I will give.</p></div>
       <span class="tbleft"></span>
              <ul><li><img src="image/catalog/html/testi3.png" class="img-responsive testi1"></li>
                  <li><h3>Jesica Wilson</h3><span class="first-t1">developer</span></li>
              </ul><span class="tbright"></span>
        </div></div>
      </div>
  </div>
</div>
</div>
  • From status select Enabled,
  • Now click on “Save” button.

4.1.9. Module : Carousel->Home Page manufacture

  • For adding brands go to Design > Banners
  • Click on “Add New” button to add new brand.
  • Give Banner name: Home Page manufacture,
  • 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: Home Page manufacture,
  • From Banner select Home Page manufacture,
  • Give Width & Height (200 X 100) (brands Width and height),
  • From status select Enabled,
  • Now click on “Save” button.

4.1.13. Module : Webi Blog -> Home blog

  • Go to Extensions > Extensions > Modules > Webi Blog > Edit (Click on Install link if Edit link is not there)
  • Give Module name: Home blog
  • From status select Enabled
  • Give Image size (690 X 700)(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.
    • (Save will redirect this page.)
  • 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.
                    
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.
                    
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.
  • 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.14. Module : HTML Content-> footerleft

  • Go to Extensions > Extensions > Modules > HTML Content > Install(After install click on "Edit" link)
  • Give Module Name: Footerleft
  • Now In Description click on Code View button in text editor block and paste this code.
                    
<div><h5><span>Contact us</span>
<button type="button" class="btn toggle collapsed" data-toggle="collapse" data-target="#contact" aria-expanded="false"></button>
</h5>
<div id="contact" class="footer-collapse footcontact collapse" aria-expanded="false" style="height: 0px;">
<ul class="list-unstyled f-left">
  <li><svg width="20px" height="20px"><use xlink:href="#add"></use></svg>Electronic Store</li>
  <li><svg width="20px" height="20px"><use xlink:href="#phone"></use></svg>123456789</li>
  <li><svg width="21px" height="20px"><use xlink:href="#fax"></use></svg>123-456-369</li>
  <li><svg width="22px" height="22px"><use xlink:href="#mail"></use></svg>demo@demo.com</li>
</ul>
</div></div>
  • From status select Enabled,
  • Now click on “Save” button.

4.1.13. Module : OC Instagram->ocinsta

  • Go to Extentions > Extensions > Modules > subscribe our newsletter click on "Install(After install click on "Edit" link)" button.
  • Now click on Frontend Modules link.
  • Display Mode Default link.
  • Give Module name: ocinsta,
  • From status select Enabled,
  • Note:give user id and access token
  • Give image limit
  • give row
  • Note:select the view mode as slider
  • Now click on “Save” button.

4.1.15. Module : OC Newsletter->webi newsletter

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

4.1.16. Module : OC Newsletter->Wb Newsletter Popup

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

4.1.17. Module : OC Search Category->OC Search Category

  • Go to Extentions > Extensions > Modules > OC Search Category "Install(After install click on "Edit" link)" button.
  • From Enabled Search By Category select Enabled,
  • From Enabled Ajax Search select Enabled,
  • From Ajax Loader Image select Loader,
  • From Show Product Image select Enabled,
  • From Show Product Price select Enabled,
  • Now click on “Save” button.
  • Note:
  • Go To Installer , Click on "Upload" button
    • Go to Flavoro zip > 3.0.3.0-OpenCart > ocmod > ocsearchcategory.ocmod upload this module

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

  • 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 : 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 10 : 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.