(V5) How do I edit the links in the top bar of the website? Print

By default, the top bar of the website contains a set of links (or menu links), such as Register | Log in | My Account | Wish List (0) | Compare (0) | Shopping Cart | Checkout | Affiliates

You can edit these in your store administration panel if you wish to place different content there, or not have them at all.

To edit the links, go to Design > Blocks in your Store Admin Menu. A list of editable components in your store will be shown. Scroll down to HTML Content and click to expand it.

This will then open up the top menu HTML for you to edit the links, or add different content (images, text, and so on).

Note that, in the brackets after wish list, are the words [wishlist_items] in square brackets. This is a shortcode. Our Ozcart software recognises this as a data field and substitutes in the current count of wish list items for the customer, when the page is shown. The same goes for the link, compare, which is [compare_items].

Here's how to add those two to your pages:

In any text editor, click on the Source (or </>) button to enter HTML mode (where you can enter/view the code) and copy the below, starting with <a and ending with </a>:

1. [wishlist_items]: <a href="wishlist" id="wishlist-total"><span class="hidden-lg hidden-sm hidden-md"><i class="fa fa-heart"></i>&nbsp;</span><span class="hidden-xs">Wish list ([wishlist_items])</span></a>
   
   
2. [compare_items]: <a href="compare" id="compare-total"><span class="hidden-lg hidden-sm hidden-md"><i class="fa fa-adjust"></i>&nbsp;</span><span class="hidden-xs">Compare ([compare_items])</span></a>

Some notes about the above:

1. The href="" is for the link, i.e., where users are taken when clicking that link. Since Ozcart has an SEO URL for compare and wishlist already set, you won't need to enter a link there. You can change the SEO URL by following our SEO URL documentation.
2. The id="" must be there in order to calculate the amount of items.
3. The 2 <span class=""></span> tags do not have to be included. However, what they do is, when a screen size is small, such as when a mobile phones or tablets are used, it will disable the menu link titles, i.e., Compare and Wish List, and then show an icon in their stead, which is brought over by this example code <i class="fa fa-heart"></i>.
4. Where Wish list is (before the ([wishlist_items])), that is the text that is shown to your customers. You can change it to another text.

You can also use the following shortcodes to simplify the links:

[register_link] will automatically insert a link to the account registration page for a customer not logged in. If the customer is logged in, it will insert a link to the My Account page instead.
[account_link] will automatically insert a link to the My Account page for a signed in customer or a link to the login page for a customer not signed in.
[login_link] will automatically insert a link to the Login page for a customer not logged in, or the Log out page for a customer already signed in.

The build a parent menu with a dropdown menu, you can use this sample My Account code. In any text editor, click on the Source (or </>) button to enter HTML mode (where you can enter/view the code) and copy the below:
<ul class="list-inline pull-left">
    <li class="pull-left dropdown"><a class="dropdown-toggle btn-topbar" data-toggle="dropdown" href="account" title="My account"><i class="hidden-lg hidden-md hidden-sm zmdi zmdi-account fa fa-user"></i>&nbsp;<span class="hidden-xs">Account</span> <i class="fa fa-angle-down"></i></a>
    <ul class="dropdown-menu">
        <li><a href="account">My account</a></li>
        <li><a href="index.php?route=account/guestorder">Guest Order History</a></li>
        <li>[register_link text_register=&quot;<span>Register</span>&quot;]</li>
        <li>[login_link text_login=&#39;<span>Log in</span>&#39; text_logout=&#39;<span>Log out</span>&#39;]</li>
    </ul>
</ul>

Some notes about the above:

1. The href="" is for the link, i.e., where users are taken when clicking that link. Since Ozcart has SEO URLs already set, you won't need to enter a link there for those items. If you want to link to other pages, you can enter either the absolute path or the relative path (full link or partial link). You can change the SEO URLs by following our SEO URL documentation.
2. The Register, Log in, and Log out links are different. Follow the examples above, i.e., by copying them, to set them up.
3. The <span class="hidden-xs"></span> tag does not have to be included. However, what it does is, when a screen size is small, such as when a mobile phones or tablets are used, it will disable the menu link titles, i.e., Account, and then show an icon in its stead, which is brought over by this example code <i class="fa fa-angle-down"></i>.
4. The <li>, <a and sometimes <span> contain the name of the menu items, such as Account, Guest Order History, Register, Log in, Log out. You can change those terms.

You can customize the text of these short links - full details can be found on the shortcode page.