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

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
24,272 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
21,627 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
24,272 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
13,760 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

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.

8 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!