How To Add Social Media Icons In Shopify Footer [2024]
Shopify - 3 Day Free Trial - No cc Needed   Free Trial
Detect Shopify Theme

Or go to our Shopify Theme Detector directly

How To Add Social Media Icons In Shopify Footer

Last modified: May 7, 2024

How To Add Social Media Icons In Shopify Footer
Free Shopify Trial

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.

Key Takeaways
Log in to your Shopify store to begin the process of adding social media icons.
Navigate to the theme editor to access the relevant files for modification.
Save changes to the theme files to ensure social media icons are displayed.


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="" title="{{ }} on Social Network Name">
<img src="social-icon.png" alt="{{ }} on Social Media Network Name">

You will need to make some changes. These include:

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

Keep Reading

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.

2 thoughts on “How To Add Social Media Icons In Shopify Footer”
  1. Avatar for George George says:

    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?

    1. Avatar for Team Team says:

      Yes, img src is just the way to add an image in HTML.

Got Something To Say?

Your email address will not be published. Required fields are marked *