How to add additional sections to the opencart home page?
I am new to opencart. I made some sections with HTML and CSS for my opencart home page. But I don't know how to add these sections to my home page.
Here is my code:
<!-- Global JS [ jQuery, Bootstrap ] -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<!-- APP JS -->
<script type="text/javascript" src="assets/js/app.min.js"></script>
<!-- RSS Feed -->
<script type="text/javascript">
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://output98.rssinclude.com/output?type=asyncjs&id=1131873&hash=43acd66e554d9d915419deb38b1fd5fe';
document.getElementsByTagName('head')[0].appendChild(s);
})();
</script>
<!-- Global CSS [ Bootstrap, Font-Awesome, Animate CSS ] -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lobster|Raleway|Roboto|Roboto+Slab|Titillium+Web|Ubuntu" rel="stylesheet">
<!-- APP CSS -->
<link rel="stylesheet" href="assets/css/app.min.css">
<!-- Section - intro -->
<section class="section section-intro pos-rel">
<div class="container text-center">
<h1 class="headline m-0">
Easyink saves its customers time and money by helping them get the right printer for the job, and a quick and easy ordering process guarantees the right cartridge for the printer... backed up by awesome customer support.
</h1>
<h3 class="call-us">
<i class="fa fa-phone faa-ring animated"></i> 0800 893 797
</h3>
</div>
</section>
<!-- End Section - intro -->
<!-- Section - Services -->
<section class="section section-services text-center">
<div class="container">
<!-- Section Headline -->
<h2 class="headline font-Roboto_Slab">What Can We Do For You?</h2>
<!-- End Section Headline -->
<div class="row">
<!-- Service One -->
<div class="col-sm-4">
<div class="thumbnail">
<div class="thumb-img bg-default">
<img src="assets/img/service-printer.png" alt="Service Printer Icon">
</div>
<div class="caption">
<h3><a href="#" class="caption-title">Find the Right Printer</a></h3>
</div>
</div>
</div>
<!-- End Service One -->
<!-- Service Two -->
<div class="col-sm-4">
<div class="thumbnail">
<div class="thumb-img bg-default">
<img src="assets/img/service-printer-cartridge.png" alt="Service Cartridge Icon">
</div>
<div class="caption">
<h3><a href="#" class="caption-title">Find the Right Cartridge</a></h3>
</div>
</div>
</div>
<!-- End Service Two -->
<!-- Service Three -->
<div class="col-sm-4">
<div class="thumbnail">
<div class="thumb-img bg-default">
<img src="assets/img/service-support.png" alt="Service Support Icon">
</div>
<div class="caption">
<h3><a href="#" class="caption-title">Printer and Cartridge Support</a></h3>
</div>
</div>
</div>
<!-- End Service Three -->
</div>
</div>
</section>
<!-- End Section - Services -->
<!-- Section - Home -->
<section class="section section-home">
<div class="container">
<div class="row">
<!-- Video Column -->
<div class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/IuVEW6Fgkvs" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
<!-- End Video Column -->
<!-- Home Headline Column -->
<div class="col-sm-6">
<div class="headline-col text-center">
<h2 class="headline m-t-0">
Confused About Which Printer Is Best For You? Complete Our Quick Wizard To Find Out
</h2>
<p class="headline-details font-Raleway">
Need a printer, but not sure where to start? The quickest and easiest way to find out which printer suits you best is to click the button below and complete our wizard. Answer a few simple questions and we’ll send you a customised report based on your answers.
</p>
<p>
<a href="#" class="btn btn-lg btn-success">Start Printer Wizard</a>
</p>
</div>
</div>
<!-- End Home Headline Column -->
</div>
</div>
</section>
<!-- End Section - Home -->
<!-- Section - Testimonials -->
<section class="section section-testimonials">
<div class="container">
<!-- Section Headline -->
<h2 class="headline font-Roboto_Slab text-center">What People Are Saying About Easyink</h2>
<!-- End Section Headline -->
<!-- Testimonial Media -->
<div class="row">
<div class="col-sm-6">
<!-- Quote 1 -->
<div class="media">
<div class="media-body">
<h3 class="media-heading">Awesome Service</h3>
<p class="quote">
This company is awesome. They fixed my problem without me even asking. Great customer service and follow up. Definitely recommend this company. I have been buying from them for years. Great prices and great product. And now found out that their service is good too. Thank you easyink.
</p>
<h4 class="quote-title">Erwin van den Broek</h4>
</div>
</div>
<!-- Quote 2 -->
<div class="media">
<div class="media-body">
<h3 class="media-heading">WOW</h3>
<p class="quote">
First time I have used your service and WOW .....ordered on Monday delivered prior to 8.30 Tues morning to a rural town....that is great service! Your reasonable prices and the speed and ease of the whole transaction, means I will definitely be a return customer who will be recommending to others. Thanks heaps
</p>
<h4 class="quote-title">Rhondda McFarlane</h4>
</div>
</div>
<!-- Quote 3 -->
<div class="media">
<div class="media-body">
<h3 class="media-heading">Outstanding Service</h3>
<p class="quote">
Outstanding service. Ink arrived in less than 24 hours - and I live in the middle of the Mackenzie Country. I also appreciated the confirmation email containing a link to allow me to check progress through courier tracking automatically. Other online purchases have given me a tracking number, which I then have to follow up myself. As if all this were not enough: I struck a small problem and rang the 0800 number for help. The phone was answered before it had rung twice, and the help was efficient and friendly. This has to be the most satisfactory online purchase I've ever made.
</p>
<h4 class="quote-title">Colin McKinney</h4>
</div>
</div>
</div>
<div class="col-sm-6">
<!-- Quote 4 -->
<div class="media">
<div class="media-body">
<h3 class="media-heading">Great product and great price!</h3>
<p class="quote">
What can I say, once again outstanding delivery time, great product and great price! I ordered a toner cartridge after lunch and it arrived about 8.30 the next morning! Thank you - you constantly outperform other businesses in quality of service and product
</p>
<h4 class="quote-title">Petra</h4>
</div>
</div>
<!-- Quote 5 -->
<div class="media">
<div class="media-body">
<h3 class="media-heading">I Like Buying From Easyink</h3>
<p class="quote">
Thank you for your usual excellent service I like buying from Easyink because if I make a mistake with my order they ring to check with me about it and sort it out usually with in minutes of me putting it though. I've recommended them to many others .So hope they use there service too. Thanks Guys Keep up the good work.
</p>
<h4 class="quote-title">Lyn Palmer</h4>
</div>
</div>
<!-- Quote 3 -->
<div class="media">
<div class="media-body">
<h3 class="media-heading">Most Impressed</h3>
<p class="quote">
I've used easyink for a few years now. When I had an leak issue with a cartridge (a type they no longer handle) they replaced it immediately, no questions asked. I was most impressed. Good service.
</p>
<h4 class="quote-title">Lawrence Goldsmith</h4>
</div>
</div>
</div>
</div>
<!-- End Testimonial Media -->
</div>
</section>
<!-- End Section - Testimonials -->
<!-- Sections - Blog Posts -->
<section class="section section-blog_posts">
<div class="container">
<!-- Masonry Grid -->
<div class="grid">
<!-- Blog Post 1 -->
<div class="grid-item">
<div class="thumbnail">
<div class="caption">
<h3 class="caption-title">Blog Title</h3>
<p class="blog-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officia illum voluptas et! Esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio.
</p>
<p class="caption-footer">
<a href="#" class="btn btn-info">Read more...</a>
</p>
</div>
</div>
</div>
<!-- End Blog Post 1 -->
<!-- Blog Post 2 -->
<div class="grid-item">
<div class="thumbnail">
<div class="caption">
<h3 class="caption-title">Blog Title</h3>
<p class="blog-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officia illum voluptas et! Esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officia illum voluptas et! Esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio.
</p>
<p class="caption-footer">
<a href="#" class="btn btn-info">Read more...</a>
</p>
</div>
</div>
</div>
<!-- End Blog Post 2 -->
<!-- Blog Post 3 -->
<div class="grid-item">
<div class="thumbnail">
<div class="caption">
<div class="caption-img">
<img src="assets/img/section-intro-bg.jpg" alt="">
</div>
<h3 class="caption-title">Your spacific blog title if come with long text. May be it would be two or three lines long.</h3>
<p class="blog-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officia illum voluptas et! Esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio.
</p>
<p class="caption-footer">
<a href="#" class="btn btn-info">Read more...</a>
</p>
</div>
</div>
</div>
<!-- End Blog Post 3 -->
<!-- Blog Post 4 -->
<div class="grid-item">
<div class="thumbnail">
<div class="caption">
<h3 class="caption-title">Blog Title</h3>
<p class="blog-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officia illum voluptas et! Esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio.
</p>
<p class="caption-footer">
<a href="#" class="btn btn-info">Read more...</a>
</p>
</div>
</div>
</div>
<!-- End Blog Post 4 -->
<!-- Blog Post 5 -->
<div class="grid-item">
<div class="thumbnail">
<div class="caption">
<h3 class="caption-title">Blog Title</h3>
<p class="blog-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officia illum voluptas et! Esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci, recusandae omnis in vel sed hic alias amet, voluptatibus excepturi earum quidem mollitia! Eaque id hic, est voluptatum eius. Laborum?
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci, recusandae omnis in vel sed hic alias amet, voluptatibus excepturi earum quidem mollitia! Eaque id hic, est voluptatum eius. Laborum?
</p>
<p class="caption-footer">
<a href="#" class="btn btn-info">Read more...</a>
</p>
</div>
</div>
</div>
<!-- End Blog Post 5 -->
<!-- Blog Post 6 -->
<div class="grid-item">
<div class="thumbnail">
<div class="caption">
<h3 class="caption-title">Blog Title</h3>
<p class="blog-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officia illum voluptas et! Esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore ipsa, saepe dignissimos eius consequatur in magni quas, dolor odio eligendi accusamus, veritatis veniam nostrum modi nobis expedita autem tenetur eveniet.
</p>
<p class="caption-footer">
<a href="#" class="btn btn-info">Read more...</a>
</p>
</div>
</div>
</div>
<!-- End Blog Post 6 -->
</div>
<!-- End Masonry Grid -->
</div>
</section>
<!-- End Section - Blog Posts -->
<!-- RSS FEED DEMO -->
<section class="section section-rss-demo">
<div class="container">
<h3>RSS FEED DEMO - This section will be removed after your review report.</h3>
<h4>This is the DEMO design for RSS FEED which has renderd by https://www.rssinclude.com VIA Javascript </h4>
<p>If you want to change the color or size I can do for you. But it will not give you exact design Like above section. But Somehow if you are able to give your rss feed data as JSON encoded format in PHP or Javascript It will be easy to Implement For the above Section design. Please let me know your complement.</p>
<div id="rssincl-box-container-1131873"></div>
</div>
</section>
<!-- End RSS FEED DEMO -->
<!-- UnnamedGroup - Scroller -->
<a href="#" id="btn_back_to_top"><i class="fa fa-2x fa-angle-double-up"></i></a>
<!-- End UnnamedGroup -Scroller -->
Can anyone help me figure out this issue?
+3
source to share
1 answer
You can use the "HTML Content" module that comes with the Opencart 2.x installation package, paste your code, paste it and add it to your Home layout. Or, if you want to edit your theme, you must edit these files:
catalog/view/theme/Your_theme/template/common/header.tpl
//use this file for your links and scripts, you can also use footer.tpl instead of this file for scripts
catalog/view/theme/Your_theme/template/common/home.tpl
//use this file for your html
+1
source to share