Social icons

Social icons, helping to increase your social followers.

Wireframe

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

• Read through the Getting Started to get a better sense of how the control panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

Coding Instructions

Step 1: Open the sidebar template

The sidebar template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/cms/includes/sidebar.template.html.

Step 2: Add the code into the template

Add the below code directly below the closing [%/cache%] tag underneath [%/categorymenu%]:

<ul class="list-inline list-social">
    [%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%]
    [%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%]
    [%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%]
    [%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%]
    [%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%]
    [%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%]
    [%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%]
    [%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>
    [%/if%]
</ul>

Notes On The Above Code

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

Step 3: Shuffle elements or update styles to suit

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

Final Result