In this tutorial we will show you a quick example of how you can edit a OpenCart template to change the default layout that is used for your OpenCart site. As an example let’s say you have created a gift voucher in OpenCart. By default it’s just going to show a link for customers to redeem their gift voucher at the bottom of the page in your site map. If you don’t have your categories menu at the top filled all the way up, adding a link to your gift vouchers in this menu might be handy for your customers.
Edit the OpenCart header template
By default when you install OpenCart all of the templates will be located in the following directory:
/catalog/view/theme/default/template/
- Open up the File Manager Code Editor in cPanel.
Navigate to the following directory in the File Manager:
/catalog/view/theme/default/template/common/- Right click on the header.tpl file and select Code Edit.
If the encoding check pop-up displays, you can simply click Edit
Around line 93 will be where the menu at at the top of your page completes. You’ll want to insert a link to your gift voucher page here. The link you’ll want to use should look like this:
<p> <span class="code_block"></span></p> </li><li><a href="./index.php?route=account/voucher">Gift Voucher</a></li> <p> </p> <p>The section of code that you're adding this to is the <strong>DIV</strong> with the ID <strong>menu</strong>, the full code once you're done should look like this:</p> <pre> </p><div id="menu"> <p></p> <ul> <!--?php foreach ($categories as $category) { ?--> <p></p> <li><a href="<?php echo $category['href']; ?>"><!--?php echo $category['name']; ?--></a> <br> <!--?php if ($category['children']) { ?--> <div> <!--?php for ($i = 0; $i < count($category['children']);) { ?--> <p></p> <ul> <!--?php $j = $i + ceil(count($category['children']) / $category['column']); ?--><br> <!--?php for (; $i < $j; $i++) { ?--><br> <!--?php if (isset($category['children'][$i])) { ?--> <p></p> <li><a href="<?php echo $category['children'][$i]['href']; ?>"><!--?php echo $category['children'][$i]['name']; ?--></a></li> <p> <!--?php } ?--><br> <!--?php } ?--> </p></ul> <p> <!--?php } ?--> </p></div> <p> <!--?php } ?--> </p></li> <p> <!--?php } ?--><br> <strong></strong></p><strong> <li><a href="./index.php?route=account/voucher">Gift Voucher</a></li> </strong><p><strong></strong> </p></ul> </div>
Once you’re done making your modification, click on Save Changes at the top right.
Now you should have a nice visible link to your gift vouchers right in your top menu, instead of tucked away down in the bottom menu. Here is a before and after showing what this change accomplished:
| Before | After |
|---|---|
|
|
Hi,
How to locate customer’s name on the top menu (INSIDE THE HEADER )?
I am asking for opencart fastor theme 2.1.0.1.
Thank you.
Edis
It looks like opencart stores the username in the session data, so you should be able to edit the menu in your theme to show that data, there is a link to the opencart forums showing more info on how to get that session data here
Except footer,evrything including menu sliders,product list etc ,are appearing twice on my opencart homepage.Kindly tell me the solution for the same
We are happy to help, but will need some additional information. Can you provide a link to the website for us to test?
What were you working on when this started happening?
Thank you,
John-Paul
hello …
i want to add buy now button in my opencart 2.1.0.2 by coding so what changes should i make in my product.tpl and where…how to do this
plz help me thanks in advance….
Hell Pavan,
The issue of adding a button in your OpenCart site depends on the template you’re using. We do not provide code (as it’s normally outside of our support scope). Make sure to make use of the OpenCart support forum. They may already have an answer that you can use. Here’s a post that may relate to your question: OpenCart forums – How to add a button in the Journal theme.
I hope that helps to answer your question! If you require further assistance, please let us know!
Regards,
Arnel C.
Thank You! This Article prevented me from switching to Shopify! Thank You a 190000000000000 times over!
Hi Everyone,
I have doubt regarding while creating a new module. I am creating new module. In this module it will have the following options:
1. Module Name
2. Status
3. Textbox
4. Image
5. Product List
6. Sort.
I have doubt can we save image paths in any existing table in database or we need to create a new table in database for saving this module images and other data.
And I would like to know whether it is possible to create new table in database for the new modules and using them.
Thanks in advance…………..!
Thanks & Regards
J.Phanindra
Hello Jallipalli,
Yes you should be able to use the install() function while creating your module. I also found a stack overflow thread regarding this very query.
Best Regards,
TJ Edens
How can I add a new slider in the home page of opencart other than the default slider? I am using opencart 2.1.0.2
Hello Abin,
Thank you for contacting us. There are many Extensions available for adding slider functionality to your OpenCart site, here is a list of search results.
Thank you,
John-Paul
Awesome
hello,
after disable the extension nothing happen. my slideshow homepage is not working now.
with regards
prateek
Hello Prateek,
If you’re having problems with your OpenCart site because you installed the wrong version of an application, then you may want to speak to the developers of that particular extension in order to determine if they can help you to correct the behavior. The whatsapp share is a third party application and they will best know how to approach the problem for you.
I hope that helps to answer your question! If you require further assistance, please let us know!
Regards,
Arnel C.
hi
i insalled wrong version of whatsapp share on my opencart version 2.0.2.0 and now my home page slideshow is not working and after disable this whatsapp share nothing is going ok so please tell me now how i solve this problem.
with regards
prateek
sir,
i upload extension whatsapp share on my website www.monthlybazaar.co.in .then my other modules disabled from my front page of website . we make new slideshow and featured item but front page is not shown. so please help me on this matter as early as possible.
thanks
Hello,
What happens when you disable the extension? There may be a problem with the extension and the version of OpenCart you are using.
Best Regards,
TJ Edens
Hi,
I am using Opencart 1.5.6.4 for my site on localhost and I want the open catalog view and also want to add vqmod in my site plz suggest me how to configure it?
I need help with my Opencart Store arrangement. My homepage only show on one stretched product line. I want it to fall on the next line www.*******.com.ng. just like normal default template.
thanks all
Hello Inamullah,
Thank you for contacting us. Here is a link to our full Installing vQmod on OpenCart.
Could you provide more details on what you mean by “open catalog view” ?
Thank you,
John-Paul
Hi opencart team,
I am working with e-commerce website using opencart. I need to bind a landing page for a website. When a user is clicked on any category on that landing page then he will be redirected to that category page displaying products list. But here the problem is that landing page and other pages will have different designs. So that can any one help how to bind this pages. Can I know whether their is possibility for this in opencart.
Thanks in advance………….
Thanks & Regards,
J.Phanindra.
It is certainly possible to have a link on your landing page that leads to a category page. However, I admit your request about the pages having different design requires some clarification for me. Do you want the pages to have a different look and feel? Or, do you want the design to be different depending on the category your visitor may choose.
Hi Arnel,
Thanks for info. I would like to know one more thing regarding developing extensions in opencart. Can you tell me any reference tutorial for developing an extensions for an opencart, So that it will help full to study and develop any new extensions.
Thanks & Regards,
J.Phanindra
Hello J.Phanindra,
Thank you for contacting us. Here is a helpful guide from the official documentation on Developing an OpenCart Module.
Thank you,
John-Paul
How to edit Menu header colour in 2.1.0.1 version of opencart
Please help since long i am searching
Hello bhuvan,
Thank you for contacting us. Since I could not find a built-in way to change your menu header color in OpenCart, you will have to custom code a solution (such as suggested here in the official OpenCart forums) or use a 3rd party plugin (such as Live Theme Editor ).
Thank you,
John-Paul
Hi,
I am new to opencart. Can anyone help how should I need to customize my design by adding some features like new arrivals, need to display products according to category in main page. And also I need to desing an intro page. Please anyone help for this.
Thanks,
Phanindra
Hello Jallipalli,
Sorry for the confusion in using OpenCart. We unfortunately don’t provide services for OpenCart design, though we do have many articles related to OpenCart that may help. Many of the options you’re talking about typically require an extension module, or it may simply be a part of the OpenCart functionality. You can also check out the official OpenCart documentation. They have links to other (paid) options that provide information about what you’re trying to do.
I hope this helps to answer your question, please let us know if you require any further assistance.
Regards,
Arnel C.
One of service prowider had made with open cart 1.5.6 and theme nicole-fashion. How can I change the link path for the Header MEnu as the website was earlier with a different name and then it migrated to a new name but some Menu Header still showing links with the previous website where that website name is not existing and it giving a problem. How can solve this problem
Hello Francisco,
Thank you for contacting us about editing your header in OpenCart. I’m not sure exactly what you mean by “link path” for header menu. The above article offers advice on how to edit the files. Was there a particular piece of code you were having trouble accessing?
Hello! please I need help in Opencart 2.1.0.1 in the header cart button I can’t remove price and word -item(s)- I had edit language file at \catalog\language\english\common/cart.php
$_[‘text_items’] = ‘%s’;
but it didn’t help. After reload page it shows 0 but when I add to cart items it became again 1 Item(s) – 100$
Dear Scott,
Thanks for your wonderful support here. Just have few question for my opencart 2.0 portal. Can you please help.
1. How to add few manual codes only on header part of homepage of website.
2. How to add canonical tag on home page
3. how to configure the 301 redirect for the homepage. As not able to login in my admin after adding 301 redirect. Please suggest.
Thanks Scott
Hello Ed,
Thanks for the question about changing the OpenCart theme name. Changing the theme name isn’t a normal part of the usage for modifying OpenCart themes. I did look up the issue and the best I can find is the same topic being discussed in the OpenCart support forum. You may want to post the question with the OpenCart developers/support forum for the appropriate answer.
If you have any further questions or comments, please let us know.
Regards,
Arnel C.
Hello Arpit,
1. How to add few manual codes only on header part of homepage of website.
You have to edit the template file that makes up the theme of your OpenCart site. The files will differ from theme to theme, so you may need to look at your theme files to determine the exact file to change.
2. How to add canonical tag on home page
Best way to do this is to obtain an third party extension .
3. how to configure the 301 redirect for the homepage. As not able to login in my admin after adding 301 redirect.
This issue is often discussed within the OpenCart support forums. Please see this post for a possible answer to your question. If you’re having problems with logging in, please make sure to undo your 301 first. There are also extensions for OpenCart that make this much easier.
I hope this helps to answer your question, please let us know if you require any further assistance.
Regards,
Arnel C.
Dear Arnel,
I really appreciate if you could guide me to change the Open Cart Theme Name which I purchased. As source page someone can see the theme name, I have tried many ways but still struggling to do so.
Thank you very much.
I want to know in opencart verion 2.0.1.1 is this possible to modify my website in multicity.
You may want to check with the OpenCart forums as we currently have no support articles for OpenCart 2.x
On the oc returns page there is a back button that ships the user to a login page. The back button url is in the html code. I cannot find the html code to change the url the home page. Would you please tell me where I can find that specific html code. oc version 2.1.0.1
Thanks
Hello Matt L.,
Thanks for the qeustion about changing the code on the returns page. If it’s not a module/extension then you would need to find a templates page and modify it or the CSS. The issue is discussed in this OpenCart support forum post.
I hope this helps to answer your question, please let us know if you require any further assistance.
Regards,
Arnel C.
elo.
My opencart contact page has this error
Notice: Undefined variable: site_key in /home/techgearmobile/public_html/ecommerce/catalog/view/theme/default/template/information/contact.tpl on line 133
Hello Mike,
In order to take the telephone ICON you will need to edit the template files for OpenCart. Click on the link to see the OpenCart support community posts on that subject.
If you have any further questions or comments, please let us know.
Regards,
Arnel C.
Hello Joshua,
Sorry for the problem. I was not familiar with the error, but I did find something about in the OpenCart Support Community. Please click on the link and review the possible solutions offered.
If you have any further questions or comments, please let us know.
Regards,
Arnel C.
Hi! how do I remove the telephone icon from the top of my website page?
Hi All
I have purchased Open Cart Theme, now I need to change the theme name, because of is someone view the source code they can find the theme name,
Please advice
Sure
Hello Sure,
While it is an older thread, there seems to be instructions on the OpenCart forum regarding this.
Kindest Regards,
Scott M
i changed and edited my menus,so how do i update them so that the changes are visible at the front end
Hello Duka,
Be sure to clear our your browsers cache and OpenCarts cache if you are you using it.
Best Regards,
TJ Edens
i want to knw the path of default page frontent.
Hello Deepak,
Can you please provide more information for what you are looking for?
Best Regards,
TJ Edens
Hi I am using OC2.x default theme. I want to edit the menu bar style.. and add js to the menu bar
Hello Sandal,
The issue you are facing is coding for the different steps of that checkout. We can not provide that information unfortunately (as it’s custom code), but you are in the right location for where it will need to be. You will need to identify each stage and then change the CSS requirement for each step. You may want to post to the OpenCart development forums for further assistance on that issue. Apologies that we can’t provide the code for this particular issue.
Kindest regards,
Arnel C.
Hello Gokul k,
Thanks for the question about editing the menu bar. Unfortunately, if the change you’re seeking is beyond the tutorial above, then you will need to most likely consult with the OpenCart support forum for additional assistance. Check out this post in regards to the topic. There may be more information from other who have already made changes along the lines of what you’re trying to do.
Apologies that we can’t provide you the code for what you’re trying to accomplish. If you have any further questions or comments, please let us know.
Regards,
Arnel C.
I am sorry but I know how to change the menu bar colors or any other color, It is from stylesheet.css or sometimes from bootstrapmin.css. I am in trouble at the checkout page where there are atleast 6 steps and color of each step heading is same. I it I want to add a functionality that if a person is on step 2 that is registration then the heading color of step 2 is green and rest are as before. If he switch to step 3 then this heading would be green and rest are same.
Hi I am using OC2.x default theme. I want to edit the checkout page, that the panel heading color for the closed panel should be differ from open panel. As when a customer is at step 1 then the heading color of step 1 is black and all other heading are in grey as default. tHANKS in aDVANCE
Hello Sandal Shukla,
You will need to make manual changes in the CSS for the theme. This is generally the stylesheet.css for the theme. Check out this post from the OpenCart support forums. It provides more information on what should be changed and how to get the color you’ll need for the change.
I hope this helps to answer your question, please let us know if you require any further assistance.
Regards,
Arnel C.
opencart 1.5.x to opencart 2.x update and module also update. the module with update to change code with 2.x fomate and the class to use catalog module-> modeule file function index() to give public or protected which one is working .. some time public to working and protected working ..
and also i have know module have differ to this class indexing ,
Hello Gokul,
Unfortunately we currently have no support articles for OpenCart 2.x. We have not yet begun to work with it.
Kindest Regards,
Scott M
Hi john, this forum for openchart or else sir?
i got some headache for develop opencart could you give me reference abour customize template for opencart?
thanks john
Hello putra,
Thank you for contacting us. This is a Support forum for InMotion Hosting, and we are happy to guide you. Here is a link to the official OpenCart Support.
The above tutorial is just a basic guide on editing your opencart template, but we do not have any more in-depth guides at this time.
Thank you,
John-Paul
Hi, Support Can i know your chat ID for fast response?
Because Iam doing to change coding button for my site opencart for purpose e-commerce could you help me how to do that sir?
My ID Chat Yahoo : ********
Plz ASAP can adding me to your chat
Thanx
Hello Putra,
Thank you for contacting us. This is just a Public Forum for InMotion Hosting. For assistance via Chat, please contact our Live Support Team.
Thank you,
John-Paul
Hello I am new to open cart ……
I want to know if i can customized my theme by Adding any extra CSS file or i can edit any css file so that i can have my own choice of theme ……..
Thanks in advance ……
Hello Shaon,
Yes you can customize the CSS files within the themes directory. You would just need to follow the guide below on how to do so.
Best Regards,
TJ Edens
Hey, thanks for the reply, I saw the thread and that’s exactly what I want to do, but the answer isn’t given.
Someone has told to change a specific code, but what it should be changed to isn’t given.
Iam just an amateur and have no idea what to change it too.
If you can provide with a test code I can try and let you know how it goes, otherwise I’ll just have to keep the Sub-Category duplication method for now.
Thank You
Varun Anand
Hey, thanks for the reply. My open cart version is 1.5.6.4
Hello Varun,
Thank you for contacting us. I looked at your site, and it looks like the theme is coded to display the food this way. For example, the “Categories” menu lists categories, not “products” beneath it. Most likely, you will have to custom code a solution for listing your product under a category menu.
I found a similar question in the Official OpenCart community forums, where they offer possible solutions. But, you will have to work with your code, and test/develop as you go.
Thank you,
John-Paul
Hi,
This is my first Opencart install and all has gone smoothely. I have modified a couple of .tpl files in the default theme, for instance the header and footer .tpl files amongst a couple of others. I am running v2.0.2.0 and an upgrade is available to 2.0.3.1 is available. Will I need to keep the diff files I have created with the changes and make the edits again to these .tpl files? or will they not be overwritten in the upgrade?
Thank You!
Hello Kevin,
Yes, you should KEEP your changed code somewhere, so that when the update arrives it can be re-applied as needed. Teh developers don’t know what customization would have been made to templates, so any changes are generally kept outside of the original TPL files and then applied as necessary.
I hope this helps to answer your question, please let us know if you require any further assistance.
Regards,
Arnel C.
how to change theme in open cart2.0.2.0 or 2.0.1.1
Hello sneha,
Thank you for contacting us today. Here is a link to our walk-through guide on Installing an OpenCart Theme.
The screen shots may be a little different, but the steps are the same.
Thank you,
John-Paul
Hello Varun,
Before we continue looking at your problem with the products not appearing categories, can you please give us the version of OpenCart that you’re using? It would help us in troubleshooting the problem, please.
If you have any further questions or comments, please let us know.
Regards,
Arnel C.
Hey, thanks for the reply, firstly I found how to change categories, it can be done by changing the ‘echo’ to ‘Menu'(or anything) from ‘Categories’ in the Header.php file.
Secondly my products are in various categories, but they aren’t displaying directly in the categories drop down menu.
Www.hungermustdie.com
See, under categories, I have asubcategory named N.Veg, under that there is a product called Butter Chicken, but I had to make a totally different category called butter chicken with the product to be displayed under N.Veg.
If you click on ‘Butter Chicken’, you will be directed to a subcategories named ‘butter chicken’ from where you can access the actual product ‘butter chicken’. I cannot directly link up butter chicken to the drop down menu for some reason.
Thanks for the reply, but Iam still stuck at how to place products directly under the categories menu.
Hello Varun,
I spoke with our design team who work with OpenCart regularly and they advised that a product can be in as little as one category or as many as all categories on your site, but they do have to be in at least one category to display in the menu dropdown.
Kindest Regards,
Scott M
Hey, I have been searching for a long time now and this is one of the main things letting me go live.
I want to display products directly under the categories menu.
For instance in my Categories I have a sub Category called ‘N.Veg’, under that I want to directly place my product link.
For now I have to make Categories-N.Veg–Chicken Burger(Subcategory of the same name as the product)-Chicken Burger(The actual product).
Also I want to change the name ‘Categories’ to Main Menu.
Hope you understand me and can help.
My domain https://www.hungermustdie.com
Any help would be really appreciated.
Thank You
Varun Anand
Hello Varun,
You would need to alter the theme directly to change the name from “Categories” to “Main Menu”. You may find this somewhere in the core code of the theme.
Kindest Regards,
Scott M
how can i get all pages code to edit through myself
Hello ravi,
I am not quite sure what your question is. Could you give as much detail as possible?
Kindest Regards,
Scott M
Hi Scott – tnx for info and your swift reply.
I’ll try if I can find a possibility to do this and will inform you later if I succeed or not.
All the best
/Christer Allvin
Hi
I am using Opencart Version 1.5.6.4. Is it possible to hide/show alternatives on a product with a yes/no alternative i.e. I have a product with 2 standard alternatives and if the customer is satisfied with this I don’t want to show all extras unless he want to see this. Just to make choice more simple. If possible – how do I do this?
Thanks in advance
/Christer
Hello Christer,
That is not a standard feature of OpenCart and I am not sure of any extensions that have this feature off the top of my head. You may need to search through the extension library and evaluate the different features to see if one exists.
Kindest Regards,
Scott M
Hello all, I want to edit the default theme in opencart 2.x….. how can i get to the cpanel?
Hello Abubakar,
Thank you for your question. Here is a link to our guide on How to Login to cPanel.
We also have a helpful guide on How to Manage Files on your server.
Thank you,
John-Paul
hi, I’m devloping a site which uploaded 2 years ago by someone else and now compony wants me to edit check out page, but I cant see it!!How can I modified it? regards.
Hello Eli,
The checkout template file is located at atalog/view/theme/default/template/checkout/checkout.tpl
Kindest Regards,
Scott M
Hi,
I want to change the menu color of the default them. I am using opencart 2.0. Kindly suggest how can I change the mousehover color and menu color.
Thanks
Aashi
Hello Aashi,
You normally will not be able to change the colors of the mouse hover or menus in themes without customizing the themes. Check out theLive Color Customizer recently released for OpenCart 2.0. This may meet your needs. If not, then you would need to get the Theme Customizer in order to change the theme without having to wade through the theme’s code.
I hope this helps to answer your question, please let us know if you require any further assistance.
Regards,
Arnel C.
Hi, am new to Open Cart.
Please help me out the following issues
1.How to integrate facebook,twitter etc to show to my opencart website front page
2.How integrate my country payment processor(interswitch)
3.How to change the default currency to my local currency
4.Is it possible to edit the footer and the header?how do i achieve that.
pls pictorial steps
thanks
Hello Johnson,
We do not have instructions for all the things you asked for, but I will provide what we can.
1) Integration things such as Facebook, you will need to check for specific modules.
2) We do not have an article for that specific payment processor, but be sure to check our article on payment processors for OpenCart.
3) We have an article on adding new currencies to OpenCart.
4) We do have information on editing the footer. You may want to use our search to find anything specific that you want to modify in the header.
Kindest Regards,
Scott M