Magento. How to edit social icons block

This tutorial shows how to edit Social icons block in Magento.

In our template Social icons block which is called Follow Us. In order to set links and change icons we should go to admin section and follow instructions below.

1. Go to CMS-Static Blocks. Find your Social icons block. In this template it is called follow_us. Please note that block name can be different in your template:



2. Open the follow_us block (block name can be different in your template). There you will see links for Social icons and path to images for Social icons.



3. Now we need to set links. In <a href="#/"> tag we should replace # sign with the actual link. Link should look like <a href="http://twitter.com/">

Complete link looks like:

<a href="http://twitter.com/"><img src="{{skin url='images/media/follow_1.jpg'}}" alt="" /></a>

4. Perform the same actions and set appropriate links. After modification your block should look similar to screenshot below:



You can change image icon name as well. The following code shows path to image:

<img src="{{skin url='images/media/follow_1.jpg'}}"

In our template icon is located in skin\frontend\default\theme291\images\media (path can be different in your template)

5. Upload your icon to skin\frontend\default\themeXXX\images\media folder and specify image name in code. We have uploaded Icon1.jpg image. Complete path with link your can check in the screenshot below:



6. We have set links for all icons. Please click on Save Block. Refresh your home page.





Feel free to check the detailed video tutorial below:

Magento. How to edit social icons block