OpenCart Support Services

Want to extend your store, edit or create new designs, add custom features or fix broken ones for your OpenCart store? We offer a range of development and SEO services. Click here to get in touch

How To Customise The OpenCart Homepage For Branding, Conversions And SEO

By Jack
In OpenCart
Mar 16th, 2012
34 Comments
25125 Views

It’s been a while since I have posted up an OpenCart blog/tutorial so I thought today I would talk about customising the OpenCart homepage to make it look how you want.

By default the OpenCart home page is a grid based page with set content areas showing featured products,a Nivo Slider, Manufacturer carousels and so on and so on. From a marketing point of view, as well as design and conversion, this is an absolute nightmare and there is no website in the world which can fulfil its potential without you being able to change the page that the vast majority of your customers is going to see first.

So, all you need for this OpenCart tutorial is a small amount of Web Development skill, that is to say HTML & CSS. Of course you could add PHP and JavaScript in to create a more Dynamic homepage but for the point of this blog I will just show you how to style the page!

Getting Started With Customising Your OpenCart Homepage

Right, so the template file you will need to start working with is saved at:

  • catalog/view/theme/[YOUR THEME]/template/common/home.tpl

You might be surprised to see that the OpenCart home page template actually only has five or six lines of code in it which means the file is surprisingly easy to customise. Now, you file should look a little bit like this:

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
<?php echo $content_top; ?>
<?php echo $content_bottom; ?>
<div style="clear: both;"></div>
</div>
<?php echo $footer; ?>

Making Sure You Don’t Mess Up Your OpenCart Home Page

Now, we have to be careful how you move ahead with this one because how the home page is displayed already is dependant on how you have your modules set up in the Admin panel. This OpenCart home template file is simply loading up the modules which you have activated in Extensions -> Modules and you might be better off to check where they are being loaded to. If you choose a module (for example “Featured”) and click “Edit” then you will see a drop down menu which shows whether it is being loaded into the “Content Bottom”, “Content top”, “Column Left” or “Column Right”. You will need to bear this in mind when you start adding in your HTML.

Adding In Your Custom Content Into The OpenCart Home Page

As I mentioned at the start of this tutorial, you will need a little bit of HTML skill here in order to build up your custom area. I would recommend using >div> tags rather than tables and keeping the styling down to a very basic level in order to keep browser compatibility at a good level. OpenCart by design is backwards compatible with older browsers and you don’t want to put off your OpenCart customers with a dodgy looking home page!

With regards to CSS, I would recommend keeping the styling in-page rather than linking out to an external stylesheet. But this might just be me being paranoid, however I think it is better to keep things contained as much as possible when inserting a whole block of design in the middle of other PHP code. And depending on what you want shown then you should choose where to insert the code into the home page template.

So, lets assume that I want to add a welcome message to the home page of my OpenCart home page which says hello and welcome to the store! I want it to be shown at top of the page before the slider or anything like that. I want the welcome message to be two thirds across the page with another box on the right hand side for Lead Generation or something like that. Now it is just a simple HTML/CSS jobby as shown below:

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>

//This is my Welcome Message and Lead Gen Box
<div style="clear: both;"></div>
<div style="width: 65%; height: 150px; border: 1px solid #3299CC; float: left;">
<h1>Welcome To My Store!</h1>
<p>This is my welcome message which I inserted into the home page using the Open Cart Home Page template file and my own coding. This message would include something about high quality, great customer services, competitive prices and fast turnaround times or give a nice overview to the company which would entice customers to stay!</p>
</div>
<div style="width: 30%; height: 150px; border: 1px solid #F00;">
<h1>Sign Up!</h1>
<p>This is our Lead Generation form which allows our customers to add in their email address and join the OpenCart company mailing list</p>
</div>

//End Custom Script

<?php echo $content_top; ?>
<?php echo $content_bottom; ?>
<div style="clear: both;"></div>
</div>
<?php echo $footer; ?>

And there we go! It’s as easy at that! Obviously, your needs will be different to mine but you just need to work out where you are putting your message and make sure you know where your other modules will be loaded and you will be set! Simple HTML/CSS that you can learn if you don’t already know it anyway.

Let me know if you have any questions or want anything clarifying with a comment below!

Posted By

Has 65 Posts

The founder of Cart Advisor, is an eCommerce developer specialising in OpenCart development and content SEO. Based in Lincoln, UK, Jack has worked with hundreds of businesses and runs his own company Destrove which offers OpenCart Development, OpenCart Theme Design and more.

34 Responses to “How To Customise The OpenCart Homepage For Branding, Conversions And SEO”

  1. Moad says:

    Hello Jack, thank you for the input mate, i just landed on your blog and found it very helpful. more visits to be coming :)

  2. Trampas Whiteman says:

    As much as possible, use external stylesheets. Never, ever, ever use an inline style except for when absolutely necessary. It’s much easier to change the CSS in one place, and it’s also considered best practices.

    You could accomplish the same effect by giving the div an ID then styling the ID. That way, if you ever want a matching DIV on another page, you don’t have to write the styles again.

    For example, here’s the DIV:

    This is our welcome message.

    And here’s the CSS:

    #welcome{
    width: 65%;
    height: 150px;
    border: 1px solid #3299CC;
    float: left;
    }

    Easy peasy.

    • Hi there,

      You are absolutely right of course, it keeps the code clean, convenient and fast loading! However, I tried to make this tutorial accessible to as many people as possible regardless of whether they were expert coders or not. I didn’t want to muddy the water by talking about more files than I needed to and you shouldn’t see an adverse effect on page loading speeds by declaring one or two inline CSS styles.

      But I do agree with you completely! As a general practice, and as you get better, you should use an external stylesheet! I may add in a little section towards the bottom with an option step to include the styling in the theme stylesheet.

      Cheers,

      Jack

  3. Haydyn says:

    Just wanted to say thank you for a decent script, you saved me a lot of time and hassle. I’ll be sure to look you up in case of any future developments with open cart projects!

    Regards
    h

  4. Saswata Sundar says:

    Thanks Jack… It helps a lot…

  5. Ali says:

    Hi jack,

    i have an issue i need some help with please i have been playing around with some of the code to customise my theme.

    I need to the carousel to appear again but i dont know to call it !!! its installed i have added a banner for it full of images but its not appearing the module “carosuel.tpi and carousel.css files are still in my template folder?

    any sugestions?

    thanks

    • Hi Ali,

      I would get a fresh installation of OpenCart set up on a test website and get the default carousel files then upload to the old website and see if that helps. If not look at:
      catalog/controller/common/home.php
      catalog/view/theme/[YOUR THEME]/template/common/home.tpl

      and examine them against the original to see if you have accidently deleted anything to do with the slider/carousel?

      Cheers,

      Jack

  6. Jayesh says:

    Thanks for sharing. I was looking for this at multiple places and everywhere it was not that easy to understand. I will try out couple of things in my homepage.

  7. Guru says:

    Hi,

    is it possible to add products into carousel?????????

    Thankyou,
    Guru

  8. Guru says:

    ya,it is possible to add products with links.I found the answer
    I’m having one more doubt,
    it possible to display special products in every category, showing only products that are related to that category? For example, if category is “Nokia”, show specials that are only under Nokia, and do not display other specials.

    Same for featured products also.

    Is it possible? If possible, can you please explain how to do it so that a beginner can understand it? I’m using OpenCart 1.5.3.1.

    • Hi,

      This is pretty advanced stuff so you would probably be best having an extension built for that. It is too localised to warrant writing a blog post on it I’m afraid, you can hire me to build it though!

      Cheers,

      Jack

  9. Thiru says:

    Hi,
    I want to add an image in homepage under the banner.How do i call the image in home.tpl.

    • You can always add the image to the bottom of the banner, then it will always be underneath no matter where it is. In which case you will need to add it to the bottom of catalog/view/theme/*/template/module/slideshow.tpl

      Cheers,

      Jack

  10. sundar says:

    Sir is it possible to integrate an html template to opencart theme if yes the how???

  11. varadha says:

    hi , i was trying to customize the home page of Open cart, but it was not looking good and its not properly working for me, Now its easy for me to create my own custom home page for my open cart,

    if you want to see my results, just visit here. http://kvcodes.com/

  12. jeeva k says:

    Hi jack,

    i am new UI designer. pls tel me how to integrate(change) opencart free theme…

    which folder are having coding for the template?

    • Hi,

      Do you mean which folder to install a new theme into? That would be catalog/view/theme/ (just place the folder named after the theme with all the contents into this folder), then go to the Settings menu and you should be able to switch between the themes.

      Thanks,

      Jack

  13. Murenzo says:

    Good day, i have been trying to move the header search form to the body content of the home page. i was able to move the search script from the header.tpl to the home.tpl, the search text box is showing, but the search button is not appearing, and the search functionality is not working when i press enter button. What am i not doing right, as i have been on this for a week now. Will appreciate if you can assist with this. Kind Regards

  14. If you want to add one page on module but shows only if user has been logged, how to?

    Thank You and great article

    • Jack says:

      Hi Julio,

      Use:

      if($this->customer->isLogged()){
      //Customer is Logged in to their account
      } else {
      //Not logged in
      }

      Thanks,

      Jack

  15. Prashanth says:

    Hi Jack.
    Is it possible to display only a single product on the homepage of open cart.
    i.e i dont want any featured items or carousels to appear.Just a single product with all its details

  16. Mohsin says:

    hello,
    i want to ask that how can i add a div in between slidehow and products?

    • Jack says:

      Hi Mohsin,

      Either you can add something to the end of the slideshow.tpl file or add a new Welcome module to the homepage and set it to show in the Homepage, Content Top and whatever sort order you need it to.

      Thanks,

      Jack

  17. dinu says:

    nice description jack

  18. Thanks, it helps me a lot.

  19. John says:

    Thank’s for the tutorial as with the welcome message header.How can I place it in the center of the home page.

    • Jack says:

      Hi John,

      You will need to add a module placement. Set the route as “Home”, the position as “Content Top” and the sort order as “1″. This will place the welcome module top center on the homepage.

      Thanks,

      Jack

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>