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:
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:
//This is my Welcome Message and Lead Gen Box
Welcome To My Store!
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!
Sign Up!
This is our Lead Generation form which allows our customers to add in their email address and join the OpenCart company mailing list
//End Custom Script