How to Add Social Media Icons to OpenCart
Today, we will be focusing on a cool Social Media feature, which is social media buttons. Social media buttons make your site easier to explore, provide an unfiltered mirror of what your users think about your brand and how you are interacting with them. If all done right social media will bring your Ecommerce store ahead.
It all starts with a button.
In this tutorial, we will show you how to integrate icons and buttons for easy social sharing in your OpenCart website.
In this tutorial, we will show you how to integrate icons and buttons for easy social sharing in your OpenCart website.
#1 Step: Choose Your Icons
(Source: GraphicBurger)
The first thing you have to do is pick the icons that you like the most and think that will fit your site’s design best. Make a simple Google search for social media icons and browse around. We found these and will use them for the examples in this post.
Once you pick the icons you favor the most, it’s time to upload them to your server.
We chose to download the icons for Facebook and Twitter. After that, we created a new folder called social_icons on the server in the main image directory. We uploaded the images there.
This means that the proper route to the images is:
www.YourDomain.com/image/social_icons/facebook.png &
www.YourDomain.com/image/social_icons/twitter.png
#2 Step: Adding a Module to OpenCart
This step will not require you to buy or download any modules. You can do it all manually, with some samples of code that we will show you below.
Go to the admin panel in your OpenCart store. Go to Extensions > Modules and find HTML Content. Install it and click Edit.
This is how the field looks like.
Use the code sample below. Note that we chose to put our icons in the center and edit their dimensions with width and height. You can adjust those options however you want later. We also used padding to separate the icons from the slider.
<div style="padding:10px 0;text-align:center;"> <!--– Facebook Code Start –--> <span class="facebook"> <a target="_blank" href="http://www.facebook.com/iSenseLabs"><img src="http://yourdomain.com/image/social_icons/facebook.png" width="50" height="50" alt=”facebook_icon”></a></span> <!--– Facebook Code End –--> <!--– Twitter Code Start –--> <span class="twitter"> <a target="_blank" href="http://twitter.com/iSenseLabs"><img src="http://yourdomain.com/image/social_icons/twitter.png" width="50" height="50" alt=”twitter_icon”></a></span> <!--– Twitter Code End –→ </div>
Important: The <href> function should contain a link to the social media profile you want to integrate in the button.
This is how the code will look in the editor:
When you are finished editing the HTML Content Module, Enable it and click Save.
To show the HTML Content Module on the front of your OpenCart shop, you have to assign it to a layout.
Let’s see an example. Go to Design > Layouts. Choose your layout and click Edit.
We will enable our social media icons on the Home and Product layouts.
Once you are here, add a new module and find your HTML Content. Select it, choose its position and give it a sort order. The sort order will determine where the social media icons will be placed on your site.
This is how the final result looks like.
Voila. The icons are now in place and visible. Of course, you might want to position them elsewhere on the site which you can do with a bit of CSS.
#3 Step: Consistency Across Platforms is a Must
Social icons are a great opportunity to extend your visual branding consistency. We say consistency because even the smallest design flaws can cause interruption. Flaws like the colors of the social icons not matching the colors in your website or the way you have personalized your social media profile.
Important Note: Please check with the Branding Assets of each social media platform. These are guidelines for how to and how not to use their logos in the social icons. For example - https://about.twitter.com/company/brand-assets
Conclusion
To summarize, this is how you can make your OpenCart store more social and add buttons for easier sharing. This way, your customers will be able to show your website to their friends and followers on various platforms with a single click. It can’t get easier than that. I hope this has been educational and think that you won’t have any problems making social media a part of your store. Good luck and leave us a comment if there is something we can help with.
