
Opencart Theme OPC070174-1
Thank You For purchasing Templatemela Opencart Theme.
If you have any questions, please feel free to contact us via our support form https://www.templatemela.com/support. Thanks again for your purchase.
Step 1 : Installation Back to Top
- 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!
- Copy the directories from “Opencart Files” (provided in to ZIP file) to your opencart root. Copy those directories at your opencart root respectively,
- e.g Your copy path will be
- ”admin” (Overwrite this folder)
- ”catalog” (Overwrite this folder)
- ”image” (Overwrite this folder)
- If you want to enable languages then you can download it from this site http://www.opencart.com .
- Download language from given url and paste it to your language directory.
- Language directory root : “catalog/language”.
- Now we have to set our Template from Admin panel
- Under Admin Panel > System > Settings > General > Template
- Select “OPC070174-1” into Templates field.
- And Click on “Save” button at top right corner.
Step 2 : Logo and Image size settings Back to Top
For Logo setting , Go to System > Setting > Edit > Images,
From Store Logo you can upload your logo image.
For Image Size setting , Go to System > Setting > Edit > Images,
Change Category Image size to : 915 X 132,
Change product image thumb size to : 330 X 330,
Change Product image List size to : 200 X 200,
Change Additional Product image size to : 330 X 330,
Change Related Product image size to : 200 X 200,
Click on “Save” button.
Step 3 : Language Settings Back to Top
For Example To add Chinese Language :
Go to System > Localisation > Languages,
Click on “Add New” button to add new Language.
Language Name : Chinese
Code : cn
Locale : zh,zh-hk,zh-cn,zh-cn.UTF-8,cn-gb,chinese
Image : cn.png
Directory : chinese
Status : Enable,
Sort Order : as you like.
Click on “Save” button.
Same way you can do the settings for other Languages.
Step 4 : Banner Settings Back to Top
4.1 : Main Banner
For adding Main banners go to Design > Banners.
(disable HP Products Tab by clicking edit button)
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 > Modules > Slideshow click on Edit link
Give Module name: Slideshow-HomePage,
From banner select Main Banner,
Give Width & Height (915 X 420) (your banner Width and height),
From status select Enabled,
Now click on “Save” button.
4.2 : Sub Banner
For adding SubBanner go to Design > Banners.
Click on “Add New” button to add new banner.
Give Banner Name : subbanner1
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.
Now to activate your Subbanner1 go to Extensions > Modules > Banner click on Edit link
Give Module name: HomePage-Subbanner1,
From banner select subbanner1,
Give Width & Height (383 X 152) (your banner Width and height),
From status select Enabled,
Now click on “Save” button.
For adding another SubBanner go to Design > Banners.
Click on “Add New” button to add new banner.
Give Banner Name : subbanner2
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.
Now to activate your Subbanner2 go to Extensions > Modules > Banner click on Edit link
Give Module name: HomePage-Subbanner2,
From banner select subbanner2,
Give Width & Height (384 X 152) (your banner Width and height),
From status select Enabled,
Now click on “Save” button.
For adding another SubBanner go to Design > Banners.
Click on “Add New” button to add new banner.
Give Banner Name : subbanner3
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.
Now to activate your Subbanner1 go to Extensions > Modules > Banner click on Edit link
Give Module name: HomePgae-Subbanner3,
From banner select subbanner3,
Give Width & Height (383 X 152) (your banner Width and height),
From status select Enabled,
Now click on “Save” button.
4.3 : Carousel Banners
For adding Carousel banners go to Design > Banners.
Click on “Add New” button to add new banner.
Give Banner Name : Manufacture
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.
Now to activate your banner go to Extensions > Modules > Carousel click on Add Module button.
Give Module name: Carousel-HomePage,
From banner select Manufacturers,
Give Width & Height (200 X 110) (your banner Width and height),
From status select Enabled,
Now click on “Save” button.
Step 5 : HTML Content Back to Top
Go to Extensions > Modules > HTML Content > Install(After install click on “Edit” link),
For Header Top CMS block
Click on Add Module to add cms block.
Give Module Name: Header-Top-CMS
Now click on Code View button in text editor block and paste this code.
From status select Enabled,
<div class="telephone"></div>
<div class="cms-data">
<span class="call">Call us now </span>
<span class="call-no">Toll free : 0123-456-789</span>
</div>
</div>
For Header Bottom CMS block
Click on Add Module to add cms block.
Give Module Name: Header-Bottom-CMS
Now click on Code View button in text editor block and paste this code.
From status select Enabled,
<div class="headercms">
<div class="header-bottom container ">
<div class="header-cms ">
<div class="inner-cms">
<div class="box-cms-content">
<div class="first-content content">
<div class="inner-content">
<div class="service-content">
<div class="icon-left1"> </div>
<div class="service-right">
<div class="title">UP TO 5% REWARD</div>
<div class="sub-title">At vero eos et accusamus et iusto odio dignis</div>
</div>
</div>
</div>
</div>
<div class="second-content content">
<div class="inner-content">
<div class="service-content">
<div class="icon-left2"> </div>
<div class="service-right">
<div class="title">DELIVERY SCHEDULE</div>
<div class="sub-title">At vero eos et accusamus et iusto odio dignis</div>
</div>
</div>
</div>
</div>
<div class="third-content content">
<div class="inner-content">
<div class="service-content">
<div class="icon-left3"> </div>
<div class="service-right">
<div class="title">SAME DAY SHIPPING</div>
<div class="sub-title">At vero eos et accusamus et iusto odio dignis</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
For Slider banner cms block
Click on Add Module to add cms block.
Give Module Name: Slider-banner CMS
Now click on Code View button in text editor block and paste this code.
From status select Enabled,
<div class="slide slidebanner1">
<a href="#">
<div class="cms-title">
<span class="text1">MOBILE CASES</span><br>
<span class="text2">Upto 50% off</span>
</div>
</a>
</div>
<div class="slide slidebanner2">
<a href="#">
<div class="cms-title">
<span class="text1">COFFEE MACHINE</span><br>
<span class="text2">Latest Offer</span>
</div>
</a>
</div>
<div class="slide slidebanner3">
<a href="#">
<div class="cms-title">
<span class="text1">BIG OFFER BRANCHY</span><br>
<span class="text2">Laptop Sale</span>
</div>
</a>
</div>
<div class="slide slidebanner4">
<a href="#">
<div class="cms-title">
<span class="text1">LED MONITORS</span><br>
<span class="text2">for Desktop</span>
</div>
</a>
</div>
</div>
For Homepage Banner CMS
Click on Add Module to add cms block.
Give Module Name: Homepage-Banner-CMS
Now click on Code View button in text editor block and paste this code.
From status select Enabled,
<div class="cms-banner-left">
<div class="cms-banner1 single-banner">
<div class="cms-subbanner1"><a href="#">
<img alt="" src="../image/catalog/sub-banner4.jpg"></a></div>
<div class="cms-subbanner2 single-banner">
<a href="#"><img alt="" src="../image/catalog/sub-banner5.jpg"></a>
</div>
</div>
</div>
<div class="cms-banner-right">
<div class="cms-banner2 single-banner">
<a href="#"><img alt="" src="../image/catalog/sub-banner6.jpg"></a></div>
<div class="cms-banner3 single-banner">
<a href="#"><img alt="" src="../image/catalog/sub-banner7.jpg"></a></div>
</div>
</div>
For HomePage Blog CMS
Click on Add Module to add cms block.
Give Module Name: HomePage-Blog-CMS
Now click on Code View button in text editor block and paste this code.
From status select Enabled,
<div class="homepage-testimonials-inner products block_content">
<div class="box-heading side-box-heading">BlOG UPDATES</div>
<div class="customNavigation">
<a class="prev"> </a>
<a class="next"> </a></div>
<div class="products product-carousel" id="testimonial-blog">
<div class="slider-item">
<div class="single-post">
<div class="post-image"><img alt="" src="../image/catalog/blog-img.jpg"><div class="post-image-hover"> </div>
<p><a title="Click to view Full Image" href="../image/catalog/blog-img.jpg" data-lightbox="example-set" class="icon zoom"> </a></p>
<div class="post-date"><span class="date">12</span><span class="month">May <br>2014</span></div>
</div>
<div class="post-content">
<div class="post-content-top"><div class="byadmin">By Admin</div>
<div class="post_comment"><a href="#">7 Comments</a></div>
</div>
<div class="post-inner-content"><div class="post-title"><a href="#" title="Integer elementum">Integer elementum</a></div>
<div class="post-description">Integer entum, leo can laci ullam, dolor libero euis arcu vel mollis mi libero eu quam. Proin leo…</div>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="single-post"><div class="post-image"><img alt="" src="../image/catalog/blog-img.jpg"><div class="post-image-hover"> </div>
<p><a title="Click to view Full Image" href="../image/catalog/blog-img.jpg" data-lightbox="example-set" class="icon zoom"> </a></p>
<div class="post-date"><span class="date">12</span><span class="month">May <br>2014</span></div>
</div>
<div class="post-content">
<div class="post-content-top"><div class="byadmin">By Admin</div>
<div class="post_comment"><a href="#">7 Comments</a></div>
</div>
<div class="post-inner-content"><div class="post-title"><a href="#" title="Integer elementum">Integer elementum</a></div>
<div class="post-description">Integer entum, leo can laci ullam, dolor libero euis arcu vel mollis mi libero eu quam. Proin leo…</div>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="single-post"><div class="post-image"><img alt="" src="../image/catalog/blog-img.jpg"><div class="post-image-hover"> </div>
<p><a title="Click to view Full Image" href="../image/catalog/blog-img.jpg" data-lightbox="example-set" class="icon zoom"> </a></p>
<div class="post-date"><span class="date">12</span><span class="month">May <br>2014</span></div>
</div>
<div class="post-content">
<div class="post-content-top"><div class="byadmin">By Admin</div>
<div class="post_comment"><a href="#">7 Comments</a></div>
</div>
<div class="post-inner-content"><div class="post-title"><a href="#" title="Integer elementum">Integer elementum</a></div>
<div class="post-description">Integer entum, leo can laci ullam, dolor libero euis arcu vel mollis mi libero eu quam. Proin leo…</div>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="single-post"><div class="post-image"><img alt="" src="../image/catalog/blog-img.jpg"><div class="post-image-hover"> </div>
<p><a title="Click to view Full Image" href="../image/catalog/blog-img.jpg" data-lightbox="example-set" class="icon zoom"> </a></p>
<div class="post-date"><span class="date">12</span><span class="month">May <br>2014</span></div>
</div>
<div class="post-content">
<div class="post-content-top"><div class="byadmin">By Admin</div>
<div class="post_comment"><a href="#">7 Comments</a></div>
</div>
<div class="post-inner-content"><div class="post-title"><a href="#" title="Integer elementum">Integer elementum</a></div>
<div class="post-description">Integer entum, leo can laci ullam, dolor libero euis arcu vel mollis mi libero eu quam. Proin leo…</div>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="single-post"><div class="post-image"><img alt="" src="../image/catalog/blog-img.jpg"><div class="post-image-hover"> </div>
<p><a title="Click to view Full Image" href="../image/catalog/blog-img.jpg" data-lightbox="example-set" class="icon zoom"> </a></p>
<div class="post-date"><span class="date">12</span><span class="month">May <br>2014</span></div>
</div>
<div class="post-content">
<div class="post-content-top"><div class="byadmin">By Admin</div>
<div class="post_comment"><a href="#">7 Comments</a></div>
</div>
<div class="post-inner-content"><div class="post-title"><a href="#" title="Integer elementum">Integer elementum</a></div>
<div class="post-description">Integer entum, leo can laci ullam, dolor libero euis arcu vel mollis mi libero eu quam. Proin leo…</div>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="single-post"><div class="post-image"><img alt="" src="../image/catalog/blog-img.jpg"><div class="post-image-hover"> </div>
<p><a title="Click to view Full Image" href="../image/catalog/blog-img.jpg" data-lightbox="example-set" class="icon zoom"> </a></p>
<div class="post-date"><span class="date">12</span><span class="month">May <br>2014</span></div>
</div>
<div class="post-content">
<div class="post-content-top"><div class="byadmin">By Admin</div>
<div class="post_comment"><a href="#">7 Comments</a></div>
</div>
<div class="post-inner-content"><div class="post-title"><a href="#" title="Integer elementum">Integer elementum</a></div>
<div class="post-description">Integer entum, leo can laci ullam, dolor libero euis arcu vel mollis mi libero eu quam. Proin leo…</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="testimonial_default_width" style="display:none; visibility:hidden"> </div>
</div>
For Footer Top CMS block
Click on Add Module to add cms block.
Give Module Name: Footer-Top-cms
Now click on Code View button in text editor block and paste this code.
From status select Enabled,
<div class="home-about-me container">
<div class="social">
<ul>
<li class="twitter"><a href="#"> </a></li>
<li class="rss"><a href="#"> </a></li>
<li class="google-plus"><a href="#"> </a></li>
<li class="facebook"><a href="#"> </a></li>
</ul>
</div>
<div class="footer-top-right">
<div class="tm-about-text">
<div class="content-wrap">
<h2 class="title1">Get 100% Satisfaction in our theme template</h2>
<div class="tm-about-description">
<p>Lorem ipsum, you need to be sure there isn't anything</p>
</div>
</div>
</div>
<div class="aboutme-read-more"><a href="#" title="Purchasenow">Purchase now</a></div>
</div>
</div>
</div>
For Footer Left CMS block
Click on Add Module to add cms block.
Give Module Name: Footer-Left-CMS
Now click on Code View button in text editor block and paste this code.
From status select Enabled,
<div class="tm-about-logo"><a href="#" target="_blank"><img alt="footer_logo" src="../image/catalog/footer_logo.png"></a></div>
<div class="tm-about-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
For Footer Right CMS block
Click on Add Module to add cms block.
Give Module Name: Footer-Right-CMS
Now click on Code View button in text editor block and paste this code.
From status select Enabled,
<h5>Contact Us</h5>
<ul>
<li class="address"><b>Megnor Computer Pvt. Ltd.</b></li>
<li>507, Union trade center, Udhana Darwaja, Surat, 395001</li>
<li class="ph-no"><b>+91 8866888111</b></li>
<li class="email"><a href="#"><b>support@templatemela.com</b></a></li>
</ul>
</div>
For Footer Bottom Payment CMS
Click on Add Module to add cms block.
Give Module Name: Footer-Bottom-Payment-CMS
Now click on Code View button in text editor block and paste this code.
From status select Enabled,
<div class="payment-block">
<ul>
<li class="visa"><a href="#"> </a></li>
<li class="paypal"><a href="#"> </a></li>
<li class="discover"><a href="#"> </a></li>
<li class="mastercard"><a href="#"> </a></li>
</ul>
</div>
</div>
Step 6 : Product Tab Back to Top
Step 7 : Megnor Category Back to Top
Go to Extensions > Modules > Megnor Category > Edit (Click on Install link if Edit link is not there ),
From Status select Enable,
Click on “Save” button.
Step 8 : Bestsellers Products Back to Top
Step 9 : Latest ProductBack to Top
Step 10 : Special Product Back to Top
Step 11: Featured Products Back to Top
Step 12 : Account Back to Top
Go to Extensions > Modules > Account > Edit (Click on Install link if Edit link in not there),
From Status select Enable,
Click on “Save” button.
Step 13 : Affiliate Back to Top
Go to Extensions > Modules > Affiliate > Edit (Click on Install link if Edit link in not there),
From Status select Enable,
Click on “Save” button.
Step 14 : Information Back to Top
Go to Extensions > Modules > Information > Edit (Click on Install link if Edit link is not there),
From Status select Enable,
Click on “Save” button.
Step 15 : Layout Setting Back to Top
For Home Layout setting Click on Home layout Edit link, and set below settings.
For Account Layout setting Click on Account layout Edit link, and set below settings.
For Affiliate Layout setting Click on Affiliate layout Edit link, and set below settings.
For Category Layout setting Click on Category layout Edit link, and set below settings.
For Checkout Layout setting Click on Checkout layout Edit link, and set below settings.
For Compare Layout setting Click on Contact layout Edit link, and set below settings.
For Contact Layout setting Click on Contact layout Edit link, and set below settings.
For Default Layout setting Click on Default layout Edit link, and set below settings.
For Information Layout setting Click on Account layout Edit link, and set below settings.
For Manufacture Layout setting Click on Manufacture layout Edit link, and set below settings.
For Product Layout setting Click on Product layout Edit link, and set below settings.
For Search Layout setting Click on Sitemap layout Edit link, and set below settings.
For Sitemap Layout setting Click on Sitemap layout Edit link, and set below settings.
Step 16 : Need More Help? Back to Top
Once again, thank you so much for purchasing the theme. We are glad to help you if you have any questions relating to this theme.
You can contact us and submit technical Supprot Ticket from our support desk https://www.templatemela.com/support/