This article has moved to a new home. View the updated version Tweak Library

Colour Filter Swatch

Social icons, helping to increase your social followers.


  • Fashion
  • Fitness & Supplements
  • Music & Instruments
  • Gifts


Coding Instructions

Step 1. Add the icons to the sidebar

Open cms/includes/sidebar.template.html and add the below code directly below the closing [%/cache%] tag underneath [%/categorymenu%]:

<ul class="list-inline list-social">
    <li><a href="[%url type:'page' id:'contact_us'/%]" target="_blank"><i class="fa fa-envelope"></i></a></li>
    [%if [@config:facebook_account_id@]%]
    <li><a href="[@config:facebook_account_id@]" target="_blank"><i class="fa fa-facebook-square text-facebook"></i></a></li>
    [%if [@config:twitter_account_id@]%]
    <li><a href="[@config:twitter_account_id@]" target="_blank"><i class="fa fa-twitter-square text-twitter"></i></a></li>
    [%if [@config:googleplus_account_id@]%]
    <li><a href="[@config:googleplus_account_id@]" target="_blank"><i class="fa fa-google-plus-square text-google-plus"></i></a></li>
    [%if [@config:youtube_account_id@]%]
    <li><a href="[@config:youtube_account_id@]" target="_blank"><i class="fa fa-youtube-square text-youtube"></i></a></li>
    [%if [@config:instagram_account_id@]%]
    <li><a href="[@config:instagram_account_id@]" target="_blank"><i class="fa fa-instagram text-instagram"></i></a></li>
    [%if [@config:pinterest_account_id@]%]
    <li><a href="[@config:pinterest_account_id@]" target="_blank"><i class="fa fa-pinterest-square text-pinterest"></i></a></li>
    [%if [@config:tumblr_account_id@]%]
    <li><a href="[@config:tumblr_account_id@]" target="_blank"><i class="fa fa-tumblr-square text-tumblr"></i></a></li>
    [%if [@config:linkedin_account_id@]%]
    <li><a href="[@config:linkedin_account_id@]" target="_blank"><i class="fa fa-linkedin-square text-linkedin"></i></a></li>

Notes On The Above Code

The social icons will only show provided the business owner has populated URLs for them in the cPanel.

Step 2. Shuffle elements or update styles to suit

Update the CSS to suit if necessary - for example, the padding would likely need adjusting.

Final Result

Download Files

Download Files

Was this article useful?

Be notified when this page is updated. Optional.