InMotion Hosting Support Center

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/

  1. Open up the File Manager Code Editor in cPanel.
  2. navigate to common template directoryNavigate to the following directory in the File Manager:

    /catalog/view/theme/default/template/common/
  3. Right click on the header.tpl file and select Code Edit.

    If the encoding check pop-up displays, you can simply click Edit

  4. done editing header template click on save changesAround 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:

    <li><a href="/support/./index.php?route=account/voucher">Gift Voucher</a></li>

    The section of code that you're adding this to is the DIV with the ID menu, the full code once you're done should look like this:

    <div id="menu">
    <ul>
    <?php foreach ($categories as $category) { ?>
    <li><a href="/support/<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
    <?php if ($category['children']) { ?>
    <div>
    <?php for ($i = 0; $i < count($category['children']);) { ?>
    <ul>
    <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
    <?php for (; $i < $j; $i++) { ?>
    <?php if (isset($category['children'][$i])) { ?>
    <li><a href="/support/<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
    <?php } ?>
    <?php } ?>
    </ul>
    <?php } ?>
    </div>
    <?php } ?>
    </li>
    <?php } ?>
    <li><a href="/support/./index.php?route=account/voucher">Gift Voucher</li>
    </ul>

    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:
opencart categories header-before


After:
opencart categories header after
You are viewing Section 5: Edit OpenCart template
Section 4: Adding your store logo to your OpenCart website

Support Center Login

Social Media Login

   
Social Login Joomla

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
n/a Points
2014-11-24 4:41 am

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

 

Staff
28,948 Points
2014-11-24 9:53 am
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
n/a Points
2015-01-16 8:50 am

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

Staff
26,127 Points
2015-01-16 1:13 pm
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.
n/a Points
2015-02-14 12:07 pm

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.

 

Staff
28,948 Points
2015-02-16 11:53 am
Hello Eli,

The checkout template file is located at atalog/view/theme/default/template/checkout/checkout.tpl

Kindest Regards,
Scott M
n/a Points
2015-03-16 5:14 am

Hello all, I want to edit the default theme in opencart 2.x..... how can i get to the cpanel?

Staff
17,698 Points
2015-03-16 9:41 am
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
n/a Points
2015-04-08 10:38 pm

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

Staff
28,948 Points
2015-04-09 8:29 am
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
n/a Points
2015-04-10 4:39 am

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

n/a Points
2015-04-11 1:49 am

how can i get all pages code to edit through myself

Staff
28,948 Points
2015-04-13 9:40 am
Hello ravi,

I am not quite sure what your question is. Could you give as much detail as possible?

Kindest Regards,
Scott M
n/a Points
2015-05-15 2:45 pm

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 http://www.hungermustdie.com

Any help would be really appreciated.

 

Thank You

Varun Anand

Staff
28,948 Points
2015-05-18 1:09 pm
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
n/a Points
2015-05-19 10:29 am

Thanks for the reply, but Iam still stuck at how to place products directly under the categories menu.

Staff
28,948 Points
2015-05-19 1:18 pm
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
n/a Points
2015-05-20 5:35 am

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.

Staff
26,127 Points
2015-05-21 11:31 am
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.
n/a Points
2015-06-04 4:35 pm

Hey,  thanks for the reply. My open cart version is 1.5.6.4

Staff
17,698 Points
2015-06-04 5:25 pm
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
n/a Points
2015-06-07 9:37 am

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

n/a Points
2015-05-21 6:57 am

how to change theme in open cart2.0.2.0 or 2.0.1.1

Staff
17,698 Points
2015-05-21 10:50 am
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
n/a Points
2015-06-03 2:45 pm

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!

Staff
26,127 Points
2015-06-04 11:04 am
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.
n/a Points
2015-07-14 4:20 am

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 ......

Staff
4,991 Points
2015-07-14 11:04 pm
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
n/a Points
2015-08-06 1:36 am

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

Staff
17,698 Points
2015-08-06 12:44 pm
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
n/a Points
2015-08-07 6:00 am

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

Staff
17,698 Points
2015-08-07 2:20 pm
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
n/a Points
2015-08-15 2:38 am

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 ,

Staff
28,948 Points
2015-08-17 10:25 am
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
n/a Points
2015-08-18 12:15 am

thank you

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

35 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!