How To Customise The OpenCart Homepage For Branding, Conversions And SEO
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.
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 Jack Davis