OpenCart 1.5.x. How to manage top menu

In this tutorial we will teach you how to edit the header links in OpenCart templates.

OpenCart. How to manage top menu

1. Go to your OpenCart installation directory on server using the FTP connection or hosting control panel.

2. Find the header.tpl file located in the /catalog/view/theme/themeXXX/template/common folder.

3. Open the file with some code editor like Dreamweaver or Notepad++. You can use the editor directly on your hosting control panel as well.

4. Look for the class <ul class=”links”>.

5. The links are represented by the following code:

   <ul class="links">
   
   <?php if (!isset($this->request->get['route'])) { $route='active'; }  else {$route='';}?> <li class="first"><a class="<?php echo $route; if (isset($this->request->get['route']) && $this->request->get['route']=="common/home") {echo "active";} ?>" href="<?php echo $home; ?>"><i class="fa fa-home"></i><?php echo $text_home; ?></a></li>
   
   <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/wishlist") {echo "active";} ?>" href="<?php echo $wishlist; ?>" id="wishlist-total"><i class="fa fa-star"></i><?php echo $text_wishlist; ?></a></li>
   
   <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/account") {echo "active";} ?>" href="<?php echo $account; ?>"><i class="fa fa-user"></i><?php echo $text_account; ?></a></li>
   
   <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/cart") {echo "active";} ?>" href="<?php echo $shopping_cart; ?>"><i class="fa fa-shopping-cart"></i><?php echo $text_shopping_cart; ?></a></li>
   
   <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/checkout") {echo "active";} ?>" href="<?php echo $checkout; ?>"><i class="fa fa-check"></i><?php echo $text_checkout; ?></a></li>
   
   </ul>

   

   Note: the code may differ in some templates.

6. Each “<li>” item represents a separate menu link, for example,:

   	<li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/wishlist") {echo "active";} ?>" href="<?php echo $wishlist; ?>" id="wishlist-total"><i class="fa fa-star"></i><?php echo $text_wishlist; ?></a></li>   

7. You can change the order of the items here, delete them or add new link. Check this tutorial to learn more how to add a new content page and link it to a new menu tab

8. Save your changes and refresh the front page to check the links after editing.

   ! Make sure to have a saved copy of the file in case any errors appear after editing it.

9. You can edit the titles of these header links in the header.php file in /catalog/language/your language/common/ folder.

   

10. The mobile view menu can be edited in the same header.tpl file in /catalog/view/theme/themeXXX/template/common folder on your server.

    • To find the mobile view menus, look for the HTML class <div class=”swipe-menu”>.

    • The list of mobile view links includes both header and footer links:

      

    • The whole code of the links looks like this:

      <div class="swipe">
      		<div class="swipe-menu">
      			<ul class="links">
      				<?php if (!isset($this->request->get['route'])) { $route='active'; }  else {$route='';}?> <li class="first"><a class="<?php echo $route; if (isset($this->request->get['route']) && $this->request->get['route']=="common/home") {echo "active";} ?>" href="<?php echo $home; ?>"><i class="fa fa-home"></i><?php echo $text_home; ?></a></li>
      				<li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/wishlist") {echo "active";} ?> wishlist-total" id="wishlist-total1" href="<?php echo $wishlist; ?>"><i class="fa fa-star"></i><?php echo $text_wishlist; ?></a></li>
      				<li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/account") {echo "active";} ?>" href="<?php echo $account; ?>"><i class="fa fa-user"></i><?php echo $text_account; ?></a></li>
      				<li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/cart") {echo "active";} ?>" href="<?php echo $shopping_cart; ?>"><i class="fa fa-shopping-cart"></i><?php echo $text_shopping_cart; ?></a></li>
      				<li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/checkout") {echo "active";} ?>" href="<?php echo $checkout; ?>"><i class="fa fa-check"></i><?php echo $text_checkout; ?></a></li>
      				<?php if (!$logged) { ?>
      				<?php echo $text_welcome; ?>
      				<?php } else { ?>
      				<?php echo $text_logged; ?>
      				<?php } ?>
      			</ul>
      			<?php echo $language; ?>
      			<?php echo $currency; ?>
      			<?php if ($informations) { ?>
      			<ul class="foot">
      				<?php foreach ($informations as $information) { ?>
      				<li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
      				<?php } ?>
      			</ul>
      			<?php } ?>
      			<ul class="foot foot-1">
      				<li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>
      				<li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li>
      				<li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li>
      			</ul>
      			<ul class="foot foot-2">
      				<li><a href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li>
      				<li><a href="<?php echo $voucher; ?>"><?php echo $text_voucher; ?></a></li>
      				<li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li>
      				<li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li>
      			</ul>
      			<ul class="foot foot-3">
      				<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
      				<li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li>
      			</ul>
      		</div>
      	</div>	

    • Here you can delete or add new links or change their order.

    • Each link on the mobile menu has a Font Awesome icon next to it. It is added with the help of a specific class, like <i class=”fa fa-home”>. You can find the list of icons and their classes by going to the following link. The version of Font icons can be checked in the /catalog/view/theme/themeXXX/stylesheet/font-awesome.css file of the template.

      

    • Save the file to see the changes.

We hope the tutorial was useful for you. Feel free to check the detailed video tutorial below:

Feel free to check the detailed video tutorial below:

OpenCart. How to manage top menu