Opencart Theme OPC100239

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.

Visit US Mail Us


Step 1 : Installation and Image Size Settings Back to Top





For Image Size setting , Go to  System > Setting > Edit > Images,
Change Category Image Size to : 1109 X 180,
Change Product Image Thumb Size to : 480 X 560,
Change Product Image Popup Size to : 850 X 1000,
Change Product Image List Size to : 210 X 246,
Change Additional Product Image Size to : 480 X 560,
Change Related Product Image Size to : 224 X 268,
Change Compare Image Size to : 90 X 90
Change Wishlist Image Size to : 47 X 47
Change Cart Image Size to : 60 X 70
Click on “Save” button.

Step 2 : Logo settings Back to Top

For Logo setting , Go to  System > Setting > Edit > Images,
From Store Logo you can upload your logo image.


Step 3 : Language Settings Back to Top

To Enable Languages 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
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 Banners go to Extensions > Extensions. Select Modules from Dropdown.
Now select Slideshow, then click on Edit link
Give Module name: Home Page Slideshow,
From Banner select Home Page Slideshow,
Give Width & Height (1903 X 568) (your banner Width and Height),
From status select Enabled,
Now click on “Save” button.

4.2 : Left Banner


For adding Left banners go to Design > Banners.
Click on “Add New” button to add new banner.
Give Banner Name: Left Banner,
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 Subbanner go to Extensions > Extensions. Select Modules from Dropdown.
Now select Banner, then click on Edit link
Give Module Name: LeftBanner,
From banner select Left Banner,
Give Width & Height (271 X 404) (your banner Width and Height),
From status select Enabled,
Now click on “Save” button.


4.3 : Carousel Banner


For adding Carousel banners go to Design > Banners.
Click on “Add New” button to add new banner.
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.
Now click on “Save” button.

Go to Extensions > Extensions. Select Modules from Dropdown.
Now select Carousel Home page, then click on Edit link
Give Module Name: Home Page Carousel,
From banner select Manufacturers,
Give Width & Height (112 X 95) (your banner Width and Height),
From status select Enabled,
Now click on “Save” button.


Step 5 : HTML Content Back to Top

Go to Extensions > Extensions. Select Modules from Dropdown.
Now select HTML Content, then click on Install (After install click on "Edit" link),
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 ,copy and paste this code, After this again click on Code View button to save your HTML content. From status select Enabled.

<div class="payment-block">
<ul>
<li>
<img alt="visa" src="image/catalog/visa.png">
<img alt="discover" src="image/catalog/discover.png">
<img alt="maestro" src="image/catalog/maestro.png">
<img alt="master" src="image/catalog/master.png">
<img alt="paypal" src="image/catalog/paypal.png">
<img alt="american-express" src="image/catalog/american-express.png">
<img alt="mastercard" src="image/catalog/mastercard.png">
</li>
</ul>
</div>


For Footer-right-application-cms
Again Click on Add Module to add cms block.
Give Module Name: Footer-right-application-cms
Now click on Code View button in text editor block ,copy and paste this code, After this again click on Code View button to save your HTML content. From status select Enabled.


<div id="block_1" class="footer-area col-sm-3 column">
<h5 class="toggle">Download Apps</h5>
<ul class="list-unstyled">
<li><a href="#"><img class="img-responsive" src="image/catalog/play.png" alt="play"></a></li>
<li><a href="#"><img class="img-responsive" src="image/catalog/store.png" alt="store"></a></li>
</ul>
</div>


For Featured Homepage coupon
Again Click on Add Module to add cms block.
Give Module Name: Featured Homepage coupon
Now click on Code View button in text editor block ,copy and paste this code, After this again click on Code View button to save your HTML content. From status select Enabled.


<div class="sub-heading">
<span>It is a long established fact that a reader will be distracted by the readable content of a page.</span>
<div class="coupon"> <span> Code : 'NEW40' </span></div>
</div>


For Footer Top Logo CMS
Again Click on Add Module to add cms block.
Give Module Name: Footer Top Logo CMS
Now click on Code View button in text editor block ,copy and paste this code, After this again click on Code View button to save your HTML content. From status select Enabled.


<div class="footer-logo">
<a href="#"><img class="img-responsive" alt="footer-logo" src="image/catalog/footer-logo.png"></a>
</div>



For Footer Top Social CMS
Again Click on Add Module to add cms block.
Give Module Name: Footer Top Social CMS
Now click on Code View button in text editor block ,copy and paste this code, After this again click on Code View button to save your HTML content. From status select Enabled.


<div class="social-block">
<ul>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-rss" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-skype" aria-hidden="true"></i></a></li>
</ul>
</div>



For Header-Top-Offer-CMS
Again Click on Add Module to add cms block.
Give Module Name: Header-Top-Offer-CMS
Now click on Code View button in text editor block ,copy and paste this code, After this again click on Code View button to save your HTML content. From status select Enabled.


<div class="offer-block">
<div class="offer-content">
<div class="offer-image"></div>
<div class="offer-inner">
<div class="offer_title">New User Zone</div>
</div>
</div>
</div>


For HeaderTopLeft-offer-CMS
Again Click on Add Module to add cms block.
Give Module Name: HeaderTopLeft-offer-CMS
Now click on Code View button in text editor block ,copy and paste this code, After this again click on Code View button to save your HTML content. From status select Enabled.


<div class="offer-title">Free shipping on all order over $100 code : <span>NEW1</span></div>


For Homepage Banner First
Again Click on Add Module to add cms block.
Give Module Name: Homepage Banner First
Now click on Code View button in text editor block ,copy and paste this code, After this again click on Code View button to save your HTML content. From status select Enabled.


<div class="collection-right-banner">
<img class="img-responsive" src="image/catalog/bannerfirst.jpg" alt="bannerfirst">
<div class="image-title">
<h3>Offer On Mobiles</h3>
</div>
<div class="image-button">
<a href="#" class="banner-btn">Discover More</a>
</div>
</div>


For Homepage Banner Second
Again Click on Add Module to add cms block.
Give Module Name: Homepage Banner Second
Now click on Code View button in text editor block ,copy and paste this code, After this again click on Code View button to save your HTML content. From status select Enabled.


<div class="collection-right-banner">
<img class="img-responsive" src="image/catalog/bannersecond.jpg" alt="bannersecond">
<div class="image-title">
<h3>Thinnest Laptops</h3>
</div>
<div class="image-button">
<a href="#" class="banner-btn">Discover More</a>
</div>
</div>


For Homepage Banner Third
Again Click on Add Module to add cms block.
Give Module Name: Homepage Banner Third
Now click on Code View button in text editor block ,copy and paste this code, After this again click on Code View button to save your HTML content. From status select Enabled.


<div class="collection-right-banner">
<img class="img-responsive" src="image/catalog/bannerthird.jpg" alt="bannerfirst">
<div class="image-title">
<h3>Like To Watch</h3>
</div>
<div class="image-button">
<a href="#" class="banner-btn">Discover More</a>
</div>
</div>


For Productpage Tab CMS
Again Click on Add Module to add cms block.
Give Module Name: Productpage Tab CMS
Now click on Code View button in text editor block ,copy and paste this code, After this again click on Code View button to save your HTML content. From status select Enabled.


<div class="product-tabs" id="custom_tab">
<ul>
<li><a class="first" href="#tab-1" style="display: inline;">delivery</a></li>
<li><a class="second" href="#tab-2" style="display: inline;">Shipping</a></li>
<li><a class="third" href="#tab-3" style="display: inline;">SizeGuide</a></li>
</ul>
</div>
<div class="tab_product" id="tab-1">Powered by the most advanced mobile processors from the new Core 2 Duo MacBook Pro is over 50% faster than the original Core Duo MacBook Pro and now supports up to 4GB.</div>
<div class="tab_product" id="tab-2"><span><strong>About Me :</strong></span>Powered by the most advanced mobile processors from the new Core 2 Duo MacBook Pro is over 50% faster than the original Core Duo MacBook Pro and now supports up to 4GB.<br>
<br>
<span><strong>Composition :</strong> 100% POLYESTER </span><br>
<span><strong>Example Shown :</strong> SIZE XS, Hem to Hem 84cm OR 33 ' </span></div>
<div class="tab_product" id="tab-3">
<table class="size_guide_table">
<tbody>
<tr>
<th>Size</th>
<th>S</th>
<th>M</th>
<th>L</th>
<th>XL</th>
</tr>
<tr>
<td>Men</td>
<td>7-10</td>
<td>10-13</td>
<td>13-15</td>
<td>15-17</td>
</tr>
<tr>
<td>Women</td>
<td>7-9</td>
<td>10-12</td>
<td>13-14</td>
<td>15-16</td>
</tr>
</tbody>
</table>
</div>


For Homepage-CMS-Middle-Block
Again Click on Add Module to add cms block.
Give Module Name: Homepage-CMS-Middle-Block
Now click on Code View button in text editor block ,copy and paste this code, After this again click on Code View button to save your HTML content. From status select Enabled.


<div class="cmsbanner-block">
<div class="container">
<div class="row">
<div class="cms-inner-block1">
<div class="cms1_img">
<a href="#" title="banner1"><img class="cms_image1" src="image/catalog/Cms-banner-3.jpg" alt=""></a>
<div class="description">
<div class="title">Smart Devices</div>
<div class="subtitle">35% Flate</div>
<div class="action1">
<div class="banner_text">Free delivery worldwide</div>
</div>
</div>
</div>
</div>
<div class="cms-inner-block2">
<div class="cms2_img">
<a href="#" title="banner2"><img class="cms2_image2" src="image/catalog/Cms-banner-4.jpg" alt=""></a>
<div class="description">
<div class="title">Top Laptops</div>
<div class="subtitle">40% Flate</div>
<div class="action1">
<div class="banner_text">For New Customers Only</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


For Homepage-CMS-Block
Again Click on Add Module to add cms block.
Give Module Name: Homepage-CMS-Block
Now click on Code View button in text editor block ,copy and paste this code, After this again click on Code View button to save your HTML content. From status select Enabled.


<div class="cmsbanner-block first">
<div class="container">
<div class="row">
<div class="cms-inner-block1">
<div class="cms1_img">
<a href="#" title="banner1"><img class="cms_image1" src="image/catalog/Cms-banner-1.jpg" alt=""></a>
<div class="description">
<div class="subtitle">Free Delivery Spend Over $250</div>
<div class="action1">
<div class="banner_text">Some Areas Excluded.Standard Only.</div>
</div>
</div>
</div>
</div>
<div class="cms-inner-block2">
<div class="cms2_img">
<a href="#" title="banner2"><img class="cms2_image2" src="image/catalog/Cms-banner-2.jpg" alt=""></a>
<div class="description">
<div class="subtitle">Have Questions? We Can Help</div>
<div class="action1">
<div class="banner_text">Some Areas Excluded.Standard Only.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


For Homapage Service CMS
Again Click on Add Module to add cms block.
Give Module Name: Homapage Service CMS
Now click on Code View button in text editor block ,copy and paste this code, After this again click on Code View button to save your HTML content. From status select Enabled.


<div id="servicecmsblock">
<div class="container">
<div class="row">
<div id="servicecmsinfo_block1">
<div class="box-content-cms">
<div class="inner-cms">
<div class="box-cms-content">
<div class="first-content main-content">
<div class="inner-content">
<div class="service-content">
<div class="icon-left one"><i class="fa fa-smile-o"></i>
</div>
<div class="service-right">
<div class="title">100% Satisfaction</div>
<div class="desc">If you are unable</div>
</div>
</div>
</div>
</div>
<div class="second-content main-content">
<div class="inner-content">
<div class="service-content">
<div class="icon-left two"><i class="fa fa-thumbs-o-up"></i>
</div>
<div class="service-right">
<div class="title">Save 20% when you</div>
<div class="desc">Use credit card</div>
</div>
</div>
</div>
</div>
<div class="third-content main-content">
<div class="inner-content">
<div class="service-content">
<div class="icon-left three"><i class="fa fa-plane"></i>
</div>
<div class="service-right">
<div class="title">Fast Free Shipment</div>
<div class="desc">Load any computer’s</div>
</div>
</div>
</div>
</div>
<div class="Fourth-content main-content">
<div class="inner-content">
<div class="service-content">
<div class="icon-left four"><i class="fa fa-usd"></i>
</div>
<div class="service-right">
<div class="title">14-Day Money back</div>
<div class="desc">Enter Now</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


Step 6 : Newsletters Back to Top

Go to Extensions > Extensions. Select Modules from Dropdown.
Now select Newsletters, then Edit (Click on Install link if Edit link is not there),
From Status select Enable,
Click on “Save” button.

Step 7 : Information Back to Top

Go to Extensions > Extensions. Select Modules from Dropdown.
Now select Information, then Edit (Click on Install link if Edit link in not there),
From Status select Enable,
Click on “Save” button.

Step 8 : Latest Product Back to Top

8.1 : Sidebar Latest Product Block

Go to Extensions > Extensions. Select Modules from Dropdown.
Now select Latest, then Edit (Click on Install link if Edit link in not there),
For Sidebar Module,
Give Module Name = Sidebar Latest
Give Limit = 3,
Give Image size (72 X 84),
From Status select Enable.
Click on “Save” button.

Step 9 : Bestsellers Back to Top

9.1 : Sidebar Bestseller

Go to Extensions > Extensions. Select Modules from Dropdown.
Now select Sidebar Bestseller, then Edit (Click on Install link if Edit link in not there),
For Sidebar Module,
Give Module Name = Sidebar Bestseller
Give Limit = 3,
Give Image size (70 X 80),
From Status select Enable.
Click on “Save” button.

Step 10 : Special Products Back to Top

10.1 : Homepage special product

Go to Extensions > Extensions. Select Modules from Dropdown.
Now select Specials, then Edit (Click on Install link if Edit link in not there),
For Sidebar Module,
Give Module Name = Homepage special product
Give Limit = 10,
Give Image size (224 X 268),
From Status select Enable.
Click on “Save” button.

Go to Extensions > Extensions. Select Modules from Dropdown.
Now select Featured, then Edit (Click on Install link if Edit link in not there),
For Sidebar Module,
Give Module Name = Featured- Home Page
Give Limit = 6,
Give Image size (224 X 268),
From Status select Enable.
Click on “Save” button.

Step 12 : Megnor TabsBack to Top

Go to Extensions > Extensions. Select Modules from Dropdown.
Now select Megnor Tabs, then Edit (Click on Install link if Edit link in not there),
Give Module Name = HomePage Product Tab
Give Product Limit = 6,
Give Image size (224 X 268),
From Status select Enable.
Click on “Save” button.


Step 13 : Megnor Category Back to Top

Go to Extensions > Extensions. Select Modules from Dropdown.
Now select Megnor Category, then Edit (Click on Install link if Edit link in not there),
From Status select Enable,
Click on “Save” button.

Go to Extensions > Extensions. Select Modules from Dropdown.
Now select Megnor CMS Links, then Edit (Click on Install link if Edit link in not there),
From Status select Enable,
Click on “Save” button.

Step 15 : Update Option Price Back to Top

Go to Extensions > Extensions. Select Modules from Dropdown.
Now select Update Option Price, then Edit (Click on Install link if Edit link in not there),
From Status select Enable,
Click on “Save” button.

Step 16 : Product By CategoryBack to Top

Go to Extensions > Extensions. Select Modules from Dropdown.
Now select Homepage Category Product, then Edit (Click on Install link if Edit link in not there),
Give Module Name = Homepage Category Product
Give Category Limit = 5,
Give Product Limit = 6,
Give Image size (224 X 268),
Set behavior to slide,
From Status select Enable.
Click on “Save” button.


Step 17 : Megnor BlogBack to Top

Go to Extensions > Extensions. Select Modules from Dropdown.
Now select Megnor Blog, then Edit (Click on Install link if Edit link in not there),
Give Module Name = Latest Blog,
From Status select Enable.
Give Image size (860 X 860),
Give Limit = 6,
Give Character Limit = 120,
From Allow Comments select Yes.
From Login Required select No.
From Automatic Approval select Yes.
Click on “Save” button.


Now click on Add Blog button to adding Blog.
In General tab, Give Title : Peat book is a treatise
Now click on Code View button in text editor block and write your Blog description.


Link: St. Louis Blues Audio shortcode: “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in rep.

Next in Data tab,
From Status select Enable.
From Image you can upload your Blog image.
From Module select Latest Blog.
Click on “Save” button.


Again click on Add Blog button for add another Blog
In General tab, Give Title : Excepteur sint occaecat cupidatat
Now click on Code View button in text editor block and write your Blog description.


Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Next in Data tab,
From Status select Enable.
From Image you can upload your Blog image.
From Module select Latest Blog.
Click on “Save” button.


Again click on Add Blog button for add another Blog
In General tab, Give Title : Nostrum Iesum Christum
Now click on Code View button in text editor block and write your Blog description.


Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo onsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Next in Data tab,
From Status select Enable.
From Image you can upload your Blog image.
From Module select Latest Blog.
Click on “Save” button.


Again click on Add Blog button for add another Blog
In General tab, Give Title : Libero lorem vehicula
Now click on Code View button in text editor block and write your Blog description.


Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Next in Data tab,
From Status select Enable.
From Image you can upload your Blog image.
From Module select Latest Blog.
Click on “Save” button.


Again click on Add Blog button for add another Blog
In General tab, Give Title : Libero lorem vehicula qunato verbl
Now click on Code View button in text editor block and write your Blog description.


Libero lorem vehicula qunato verbl Libero lorem vehicula qunato verbl Libero lorem vehicula qunato verbl

Next in Data tab,
From Status select Enable.
From Image you can upload your Blog image.
From Module select Latest Blog.
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.


Step 18 : Account Back to Top

Go to Extensions > Extensions. Select Modules from Dropdown.
Now select Account, then Edit (Click on Install link if Edit link in not there),
From Status select Enable,
Click on “Save” button.

Step 19 : Layout Setting Back to Top

For Layout Setting Go to Design > Layouts ,
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 Compare 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 Information 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 Search layout Edit link, and set below settings.


For Sitemap Layout setting Click on Sitemap layout Edit link, and set below settings.


Step 20 : 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/