Search Bar and Shopping Cart Opencart

For this blog post I will be showing you how i changed my search bar and shopping cart in the header of my opencart store, I will be using my cPanel file manager to make all the changes. I did not like the way the home page on my store looked so I changed a few things, what I will be writing and changing is the way I found easiest and may not be the way that others do it. 

So, I wanted to change where my search bar and shopping cart were located. 

Where I want to move them, I also wanted them to join.

Once in my cPanel file manager I accessed header.tpl (public_html/catalog/view/theme/default/template/common/header.tpl). Between </div> and <div class="col-sm-5"><?php echo $search; ?> (found on line 80) i added four </br>, so it looked like this.

</div>

      </br>

      </br>

      </br>

      </br>

      <div class="col-sm-5"><?php echo $search; ?>

      </div>

After I had done this i accessed stylesheet.css (public_html/catalog/view/theme/default/stylesheet.css). Find #search { (line 130), underneath margin-bottom add width: 487px;, it should now look like this:

#search {

margin-bottom: 10px;

width: 487px;  

This is where the search and cart bar should now be located.

Staying on your stylesheet.css under #search .btn-lg { (line 140), after text-shadow add background: #fff; (this will be added to line 145), looking like this:

#search .btn-lg {

font-size: 15px;

line-height: 18px;

padding: 10px 35px;

text-shadow: 0 1px 0 #FFF;

background: #fff;

Now to change the cart, find #cart > .btn { (line 151) and add background: #fff; underneath color, also remove the line for text shadow. It will look like this: 

#cart > .btn {

font-size: 12px;

line-height: 18px;

color: #848484;

background: #fff;

Staying on stylesheet.css you need to find .btn-inverse { (line 487), change the text shadow to 0, change the border colour to which ever colour you chose and remove the line background image. It should look like this:

.btn-inverse {

color: #ffffff;

text-shadow: 0 0px 0 rgba(0, 0, 0, 0.0);

background-color: #363636;

background-repeat: repeat-x;

border-color: #848484 #848484 #848484;

Now to change .btn-default { (line 412), still on the stylesheet.css. Change the border colour to which ever colour you choose and delete the line background image. This section should look like this:

.btn-default {

color: #777;

text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);

background-color: #e7e7e7;

background-repeat: repeat-x;

border-color: #848484 #848484 #848484 #848484;

That is the buttons all changed now.

This was my final look.

However this didn't look right to me and I decided to add another image to the header (you don't have to do this part if you are happy with the above look).

I wanted to add an image to say 'search our store' above the search bar.

Where I wanted to add my image.

Find the image that you want to insert and go to your cPanel, you will need to upload the file to images (public_html/catalog/view/theme/default/image). Once in this folder click on upload and add the picture. (for this tutorial i have named my image logosecond.png, simply to show you where to add the image code).

Once you have uploaded the picture you will need to go back to your header.tpl (public_html/catalog/view/theme/default/template/common/header.tpl). Where you have just added </br> (line 81) you need to add <img src="catalog/view/theme/default/image/logosecond.png" title="Search Our Store" alt="Search Our Store" /> in between the second and third </br>. Looking like this:

      </br>

      </br>

      <img src="catalog/view/theme/default/image/logosecond.png" title="Search Our Store" alt="Search Our Store" />

      </br>

      </br>

      <div class="col-sm-5"><?php echo $search; ?>

(Please remember in this line to change logosecond.png to what you have called the image you have uploaded)

Then you need to change what the search box text shows, currently mine says search and I want to change it to ... (the text can be anything you want). You need to find search.php (public_html/catalog/language/english/common/search.php). Edit the file using cPanel file manager, under $_['text_search'] (line 3) change where it says search to ... (or what ever you have chosen to write), mine looks like this:

<?php
// Text
$_['text_search'] = '...';

This is the look I achieved.

Final look.

Hope this helps. 

Sam