Here's How To Add Social Media Icons To Your Shopify Store
If you’re looking to add social media icons to Shopify, you’ve come to the right place! We go through brand guidelines, best practices, and the step-by-step process of adding it to Shopify.
Content Marketing Lead
Reading time: 7minutes
You and I both know that social media is an extremely powerful and valuable marketing channel. Whether you run a physical store or an e-commerce platform, social media is vital in spreading brand awareness and generating leads.
However, no matter how active you are on social media, visitors who end up on your website via organic search wouldn’t know that.
So how can you let these visitors know that you have social media? How do you direct them to your platforms?
Enter: Social media icons.
In this article, we’ll be highlighting the best practices of social media icons and how you can go about adding them to your Shopify store. Let’s dive right in! 👇
Get more revenue from your Shopify store 💰
Start your 7-day free trial and recover Shopify abandoned carts with our pre-built WhatsApp automation — completely free of charge.
Social media icons are buttons that link to your company profile on different social media platforms. They often use the first letter or logo of the social media company. For example, Facebook’s ‘f’, the Twitter bird, and Instagram’s camera.
These icons also come in mainly squares and circles that are filled with the company’s official colors.
Oftentimes, social media icons are added to the footer of your website. In other cases, they are added to a sticky bar and appear on a fixed part of your website even when users scroll through your page.
‼️ Do take note that these icons are not the same as social sharing buttons.
How can social media icons benefit your Shopify store?
Social media icons make it easier for users to find your business on various social media platforms. As we’ve mentioned earlier, not all users who know of your business or end up on your website came through social media.
Hence, adding icons that direct users to your social media can help them easily connect with your business and increase your following on these different channels.
Furthermore, using social media icons is a subtle way of telling your users you’re on social media, unlike using intrusive pop-ups asking users to give you a follow.
Brand guidelines on social media icons
Social media icons are registered trademarks, so there are certain limitations on what you can modify.
Key brand guidelines:
Make sure the “f” logo is in Facebook blue or white. If this isn’t possible due to technical limitations, stick to black and white.
Do not deconstruct or modify the “f” logo in any way by changing the color, design, or scale.
The icon should be similar in size to other icons and don’t make it the most distinctive or prominent feature of what you’re creating.
Avoid animating or fabricating the logo in physical form.
Don’t imply partnership, sponsorship, or endorsement by using Facebook’s logo.
If you’re using multiple icons, make sure that the social media icons are of the same size. Also, ensure that there’s ample space between each icon so that they can be clearly visible even at a glance.
This improves the overall appearance of social media icons because of their consistent size and padding.
Don’t modify the logos
One key similarity we can see among all the brand guidelines is the fact that you aren’t allowed to alter the logo. Once again, they’re registered trademarks.
This is to ensure that the logos are still recognizable to customers and still reflect the platform’s own branding.
Make sure you’re not rotating, scaling, skewing, animating, or changing the colors. If the icon’s official color clashes with yours, use a monochromatic version of the logo.
If you run multiple social media platforms, the challenge comes when you’re deciding which to include on your website.
One important thing to remember is that you don’t want to overwhelm your audience with 10 different social media icons. Stick to a maximum of five to six icons that are your brand’s most important or active social media pages.
Place icons strategically
Social media icons are practically useless if they’re placed at a location on your website that’s hidden or can’t easily be seen. While they shouldn’t be the main focus of your page, you still want to include them somewhere your audiences will take notice.
With that said, the most common practice is to add social media icons in the footer of your page. This way, it’s still visible but not in your face.
How to add social media icons to Shopify
There are two ways you can add social media icons to Shopify — the simple method of using Shopify themes and apps, and the advanced method of using code. We’ll go through both methods and you can decide which is best for you.
Simple method: Using Shopify themes and apps
In the Shopify theme store, there are several themes that already come with social media icons. You can check if a theme has social media icons by going to the customized theme page and seeing the ‘Header’, ‘Sidebar’, ‘Homepage’, and ‘Footer’ menus.
Alternatively, if you’ve already set up a theme that doesn’t include social media icons, there are tons of Shopify apps that help you add these icons to your website. Best of all, some of these apps are free of charge! Simply pick an app that suits your needs and follow the app’s instructions to add it to your Shopify store.
Advanced method: Using code
To add social media icons to your theme using code, follow these steps:
1. In your Shopify admin dashboard, navigate to ‘Online Store’ and then click on ‘Themes’.
2. Open the ‘Asset’ folder.
3. Scroll down until you will find a link that says ‘Add a new asset’. Click on it.
4. After clicking on it, there will be a list of icon files. Select the icon file you want to upload and click on ‘Upload Asset’.
5. The icon button will now be available but will only start working once you add the code to it. To add the code, open the theme.liquid file.
6. The button will appear in your theme according to the line in which you pasted the code. Scan through the code to detect your ideal location.
7. Once you’re done, click ‘Save’.
And that’s it! You now have a working social media icon on your website. Remember to test the icon by clicking on it and checking if you’re directed to the right social media profile.
We hope that this article has given you a better understanding of the best practices of social media icons and how you can easily add them to your Shopify store!
Albeit only being a tiny icon when compared to the heap of information and content on your website, having social media icons on your website paints a more professional picture to your visitors.
Furthermore, it can help direct substantial traffic from your website to your social media platforms and grow its following. This can help to improve brand awareness and bring in more sales for your e-commerce business.
Don’t hesitate any longer and add social media icons to your Shopify store today!
Try NovoChat for free! 🚀
An e-commerce chat marketing platform to grow your sales.