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.
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:
<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:
After:
EmoticonEmoticon