Or go to our Shopify Theme Detector directly
How To Add Social Media Icons In Shopify Footer
Last modified: November 9, 2023
Many stores like to have their social media icons added to their Shopify store. There are numerous locations that you can add these to. One of them is the footer of the website. You can add social media icons easily to your footer in several ways. However, one of the best ways is to add the correct code to the right theme file.
For this, you will need to add in a few things. The first is a copy of the image for the social media icon. The other is the code within the footer that allows the user to click on it and be sent to the social media channel.
These are the steps that you need to take to add social media icons to your Shopify store’s footer.
Step 1 – Login To Your Shopify Store
Use your login credentials to login to your Shopify store.
Step 2 – Edit Theme
Go to the admin section, then the online store and then themes. Find the theme you’re using and click on the ‘Edit HTML/CSS’ option.
Step 3 – Assets
Within the ‘Assets’ section, you need to upload an image of the social media profiles you would like to use. Many of the sites have copies of the images that you can use. Otherwise you can use image sites like Pixabay or another site. You should make sure that your image is approximately 32 x 32 pixels big. This is the perfect size for the social media icon.
You should name the new asset social-icon.png where social-icon is replaced with the name of the social media network. For instance, Facebook should be used when connecting Facebook.
Step 4 – Snippets
Then, under the snippets section in the themes section, you need to find the ‘footer.liquid’ file. Open this up. At around line 72, there will be a <p>, this is just before the end of the social media icons section. Before this <p> you will need to add in the following code.
<a class="social_link" target="_blank" href="http://www.socialmedianetwork.com" title="{{ shop.name }} on Social Network Name">
<img src="social-icon.png" alt="{{ shop.name }} on Social Media Network Name">
</a>
You will need to make some changes. These include:
- http://www.socialmedianetwork.com with the URL of your social media profile. Not the general social media channel.
- Social Network Name the name of the social media account.
- social-icon.png with the file name for the icon of the social media network you’re connecting.
Step 5 – Save
Don’t forget to save the changes you’ve made.
Conclusion: How To Add Social Media Icons In Shopify Footer
You can add as many social media networks to your profile as possible. However, that doesn’t mean you should go crazy. It’s better if you’re established on four or five social media profiles rather than spreading yourself too thin on loads of platforms.
The major platforms you should be on include Facebook, Twitter and Instagram. This leaves you with one or two other social networks to use. Professionals might prefer LinkedIn, while consumers might prefer YouTube. But in the end, the choice is yours.
-
Can social media icons affect my store’s loading speed?
Yes, they can. While social media icons are relatively small, using high-resolution images or numerous icons can impact your site’s loading time. We recommend using SVG files for icons as they provide quality graphics with minimal impact on speed.
-
How can I ensure the social media icons are mobile-responsive in the Shopify footer?
Use media queries in your CSS or ensure the theme you’re using is mobile-responsive, which will adapt the icons for mobile devices.
-
Are there any size limitations for social media icons in the Shopify footer?
The size of social media icons should be balanced with the overall design, but there’s no strict limitation unless specified by the theme.
PageFly Landing Page Builder 
Shopify 
SEMrush 
Website Maintenance 
UpPromote
This almost works for me, but the site can’t find my image for the social network I chose. is “img src=” the best way to reference an asset uploaded to the base folder on Shopify’s backend?
Yes, img src is just the way to add an image in HTML.