Add Social Media Icons to Opencart.

For this tutorial I will be adding social media icons to my opencart store. I will be using my cPanel to do so. 

Before I start talking about where I'm putting the icons or how to link the social media accounts to the icons, first you have to get the icons that you want to use. I got mine from http://www.dreamstale.com/free-download-72-vector-social-media-icons/ and I would highly recommend using these, there is many different choices and sizes so thank you for sharing them. Download the file and extract to where ever you want to store the images, when you open the folder there will be three sub folders css, png and svg. I have used the png, once in this folder i chose 48px, then have a look through all the different styles and choose which ones you like. I have chosen the the grey style as it matches the theme of my website. You do not need to do anything with these images just yet, its just easier for me to have an idea of what i wanted to use.

This is where i wanted my social media buttons to be shown on my opencart store:

Where I want to add the social media icons.

Once you have decided on what icons you will be using you need to go to your cPanel and find image (public_html/catalog/view/theme/default/image) once in this folder you will need to create a new folder, i named mine social media (for simplicity). 

Creating the folder.

Once you have done this click on the social media folder. In here you are going to upload your icon images, click on upload and individually upload all the icons you have chosen from the downloaded file.

My uploaded images.

Now to add the code, you need to find content_bottom.tpl (public_html/catalog/view/theme/default/template/common/content_bottom.tpl). In this file you will notice that there is only 3 lines that have writing on, after the 3rd line <?php } ?> is where we will start writing. On line 5 you will need to write the position of where you want your icons displayed. I want mine on the right hand side of the page so you will need to write <div style="float: right; clear: left;"> if you want your icons to stay to the left use <div style="padding:10px 0;text-align:center;">. Your content_bottom.tpl will now look like this:

<?php foreach ($modules as $module) { ?>
<?php echo $module; ?>
<?php } ?>

<div style="float: right; clear: left;"> or <div style="padding:10px 0;text-align:center;">


Once you have done this you need to write the code for the icons and link them with the social media profiles of your store. I will use facebook for my first example. Underneath the code you have just wrote for the position of the icons you will need to write this:

<span class="facebook"> <a target="_blank" href="http://www.facebook.com/So-Infinity-1038228802875473">
<img src="http://www.soinfinity.co.uk/catalog/view/theme/default/image/Social Media/facebook.png" width="50"

height="50" alt=”facebook_icon”></a></span>


However, you will need to change a few things while writing this, where it says http://www.facebook.com/So-Infinity-1038228802875473 you will need to add your stores facebook url, the one shown links to mine and i am just using it as an example of how it should look.
Additionally you will need to change http://www.soinfinity.co.uk/catalog/view/theme/default/image/Social Media/facebook.png  this will need to be changed to your stores url and the path to your images that you uploaded to your social media folder.
If you save this and try your store the facebook icon will appear at the bottom of your store.

To link your stores twitter account, the code you will need is almost the same as above.

<span class="twitter"> <a target="_blank" href="http://www.twitter.com/soinfinityuk">
<img src="http://www.soinfinity.co.uk/catalog/view/theme/default/image/Social Media/twitter.png" width="50"
height="50" alt=”twitter_icon”></a></span> 

When writing this for different social media accounts you will need to change a little bit of this code every time.

<span class="twitter">  This part of the code will need to be changed to instagram, google+, pinterest and all other social media names that you want to link with your store.

 <a target="_blank" href="http://www.twitter.com/soinfinityuk"> This part needs to be changed to the url of the social media account you are linking to your icon and store.

<img src="http://www.soinfinity.co.uk/catalog/view/theme/default/image/Social Media/twitter.png" width="50" This needs to be changed to your stores url and path to the image you will be using, once you have done this once only this part will need change to the images saved name.

height="50" alt=”twitter_icon”></a></span>  For the last part the icons name needs to be changed to the social medias name such as instagram, google+ or pinterest.

Once you have done this and wrote it for each social media account underneath (at the bottom of page) add </div>. 

I linked up my facebook, twitter, instagram, pinterest, blogger and google+. This is what my content_bottom.tpl  looks like now:


 <?php foreach ($modules as $module) { ?>
<?php echo $module; ?>
<?php } ?>

<div style="float: right; clear: left;">

<span class="facebook"> <a target="_blank" href="http://www.facebook.com/So-Infinity-1038228802875473">
<img src="http://www.soinfinity.co.uk/catalog/view/theme/default/image/Social Media/facebook.png" width="50"
height="50" alt=”facebook_icon”></a></span> 

<span class="twitter"> <a target="_blank" href="http://www.twitter.com/soinfinityuk">
<img src="http://www.soinfinity.co.uk/catalog/view/theme/default/image/Social Media/twitter.png" width="50"
height="50" alt=”twitter_icon”></a></span> 

<span class="instagram"> <a target="_blank" href="http://www.instagram.com/soinfinityuk">
<img src="http://www.soinfinity.co.uk/catalog/view/theme/default/image/Social Media/instagram.png" width="50"
height="50" alt=”instagram_icon”></a></span> 

<span class="pinterest"> <a target="_blank" href="http://www.pinterest.com/soinfinity">
<img src="http://www.soinfinity.co.uk/catalog/view/theme/default/image/Social Media/pinterest.png" width="50"
height="50" alt=”pinterest_icon”></a></span> 

<span class="blogger"> <a target="_blank" href="http://www.samweatheritt.com">
<img src="http://www.soinfinity.co.uk/catalog/view/theme/default/image/Social Media/blogger.png" width="50"
height="50" alt=”blogger_icon”></a></span> 

<span class="googleplus"> <a target="_blank" href="http://www.plus.google.com/u/0/116110436731362947248">
<img src="http://www.soinfinity.co.uk/catalog/view/theme/default/image/Social Media/google+.png" width="50"
height="50" alt=”google+_icon”></a></span> 

</div>

My store now looks like this:

Icons on the left.

Icons on the right.

I also wanted to create a space between my products and social media icons. After <?php } ?> (on line 3) add <hr>. So the code will now look like this (line 3 -7):

<?php } ?>

<hr>

<div style="float: right; clear: left;">

This is the final look, make sure you go on your store and click on all the icons to ensure they all work and take you to the correct social media pages and remember to back up.

Sam.