In this blog we are going to be looking at how to customise the OpenCart navigation bar to show whatever links you want it to show. We will be setting them manually so they can even be to other websites other than the one OpenCart is installed on.
First of all you need to find the file which sets out the navigation menu template which is in the header.tpl file (incidently, for those who don’t know what a .tpl extension is, it just means “Template File”) located at:
- catalog/view/theme/[YOUR THEME]/template/common/header.tpl
The Quick Way To Add Custom Links To Your OpenCart Nav Bar
Now open up the file in your editor and find the section that looks like:
Looks like a bit of a mess but don’t be put off if you’re not that good at PHP just a little bit of HTML will get you adding in your own links. Basically this code is looking through all the product categories in your OpenCart database and adding them to the Nav bar on your website, you just need to get in the middle of that process with your own links!
Towards the end of the section you will need to put a space in the code and add your unique links to be included towards the end of the navigation bar. I have shown an example below:
The Complete Custom Nav Bar For OpenCart
This is the way that I would recommend you to customise your OpenCart Nav bar as it gives much more flexibility with your control over what the navigation shows. It involves the same process as before but you take away the ability for OpenCart to take your categories as links and define each one easily.
Immediately, this will raise the question What if I still want the categories shown?. Easy answer: Just insert the links manually to the category pages so it has the same effect although the difference between this method and the previous one is that you will be able to choose the order which the links show!
Here is the code example of how you can completely define the navigation bar list:
There are a few benefits to creating a custom navigation bar in OpenCart which is you can:
- Boost SEO by assigning an “attribute tag” to your nav bar links
- Customise how your navigation bar looks
- Create custom pages using OpenCart Information pages and adding them to the nav bar
- Can choose the order the links are in
- Can add links to other websites (which might be good for groups of shops under one company)
I hope this OpenCart tutorial helps you in your mission to customise every aspect of OpenCart and, as always, if you need anything clarifying or have any ideas please leave me a comment below!
