Or go to our Shopify Theme Detector directly
How To Add Social Media Icons In Shopify Footer
Last modified: May 7, 2024
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.
Store Branding & Customization
Store branding and customization are essential aspects of creating a unique and memorable online presence. One way to enhance your store’s branding is by adding social media icons to your Shopify footer. This allows customers to easily connect with your brand on various social platforms.
However, before adding social media icons, it’s important to set up a store that reflects your brand’s identity. This includes Removing ‘Powered by Shopify’ footer, adding a Favicon, incorporating your logo to Email templates and Shopify checkout page, and customizing your store’s appearance by learning how to edit the Homepage.
By taking these steps, you can create a cohesive and professional look for your store, which will help build trust with your customers and enhance your brand’s overall image.
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