Creating and Adding a Banner to Opencart

For this tutorial, I will be showing you how to create a banner and add it to your opencart store. For this, I will be using my cPanel file manager. To create my banner I have used picmonkey.com for quickness. So this is my banner and where I want to add it:

The banner.

Where I want to place the banner.

First, you need to upload your image using your file manager. To do this you need to find your image folder, the path is public_html/catalog/view/theme/default/image. Now you need to upload your banner to this folder, remember what the name is of the banner is after you uploaded it, mine is untitled.jpg (for simplicity).

After the banner has been uploaded you will need to add it to the store, to do so you need to find header.tlp. The path to this file is public_html/catalog/view/theme/default/template/common/header.tlp, in this file we need to add the image and I will be adding a link to my delivery terms (since the banner is about free shipping).In your header.tlp you will need to scroll to the end of the code, in between the last </nav> and </div> (line 122) you will need to add your new code.

I will break it down into sections but it all needs to be on the same line (line 122).  
The first piece of code is <a href="delivery">, this is which page of your store you image will direct to when clicked. Where it says "delivery you will need to use the SEO that you have given your store page, so change it accordingly. 

SEO of the page you want to direct the image too.

The next part you will add to this line of code is the image, <img src="catalog/view/theme/default/image/Untitled.jpg" (change untitled.jpg to what you have named your image).

Next, you're going to give the image an id so add id="delivery".

Lastly, you will need to add the style of the image, style="max-width:100%;height:auto;"/> </a>.

This section of your code will now look like this:

</nav>

    <a href="delivery"> <img src="catalog/view/theme/default/image/Untitled.jpg" id="delivery" style="max-width:100%;height:auto;"/> </a>

</div>

Once you have finished save your changes, check your store and back up.

Final Look.

Sam. 

  

Read More

Add a Home Button to Navbar on Opencart

For this Tutorial I will be showing you how to add a home button to your navbar, I want to add mine to the left-hand side of the bar. For this, I will be using my cPanel File Manager.

Where I want to add my home button.

You will need to find the file header.tpl, this can be found through the path public_html/catalog/view/theme/default/template/common/header.tpl. You will need to find the code <ul class="nav navbar-nav"> (on line 98), underneath this line at <li><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a></li> (on line 99).

This section should now look like this:

<div class="collapse navbar-collapse navbar-ex1-collapse">

      <ul class="nav navbar-nav">

      <li><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a></li>

        <?php foreach ($categories as $category) { ?>

        <?php if ($category['children']) { ?>

Refresh your opencart store and it will be in your navbar, make sure it works and back up your store.

Home button added.

Sam.

Read More

Removing the Breadcrumbs from Opencart

For this tutorial, I will be showing you how to remove the breadcrumbs from your opencart website,  I will be using my cPanel File Manager to do this.

What I want to remove.

The breadcrumb shows on almost every page on the store, so there is a lot of files to edit. The piece of code you will need to remove:

<ul class="breadcrumb">

    <?php foreach ($breadcrumbs as $breadcrumb) { ?>

    <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>

    <?php } ?>

This is found on line 3 - 6 on every file you will be editing. To find the files you need to edit you will need to use your file manager and go to the folder template, this can be found through the path public_html/catalog/view/theme/default/template. There are several folders you will need to access from here to find the files you need to edit, these are the folders and files you need to change:

• Product - product.tpl, category.tpl, search.tpl, compare.tpl,
  
• Account - every file in this folder.
  
• Checkout - cart.tpl, checkout.tpl,
  
• Information - contact.tpl, information.tpl, sitemap.tpl
  
• Common - success.tpl
  
• Product - special.tpl
  
• Error - not_found.tpl

All of these files need the breadcrumb code removed, save the changes and check your store to ensure they are all gone. These are the only ones that I found on my store, there maybe a few different depending on how you have your store set up.

Sam.

Read More