Tue. Jul 2nd, 2024

19. Magento. How to edit social icons block

1 min read

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.
magento_how_to_edit_social_icon_-block_1

    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:

magento_how_to_edit_social_icon_-block_2

    1. 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.

magento_how_to_edit_social_icon_-block_3

    1. 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:

1
<a href=”http://twitter.com/“><img src=”{{skin url=’images/media/follow_1.jpg’}}” alt=”” /></a>
    1. Perform the same actions and set appropriate links. After modification your block should look similar to screenshot below:

magento_how_to_edit_social_icon_-block_4

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

1
<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)

    1. 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:

magento_how_to_edit_social_icon_-block_5

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

magento_how_to_edit_social_icon_-block_6

July 2024
M T W T F S S
« Jun    
1234567
891011121314
15161718192021
22232425262728
293031