26 November 2021

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.

Faye Chong

Content Marketing Lead

Reading time: 7 minutes

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.

What are social media icons?

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.

Social media icons on NovoChat's website — Social media icons on NovoChat’s website

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

Facebook

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.

📥 You can download the logo from the Facebook Brand Resource Center.

Instagram

Key brand guidelines:

Only use the icons provided in the Instagram Brand Resource Center. You can get versions in multicolor or in black and white.
You have the freedom to change the color of the logo to any solid color without changing other aspects of the design
Always maintain the icon’s set proportions and make sure it’s never smaller than 29×29 pixels.
Maintain a clear space around the glyph that’s at least one-half of its size so it doesn’t compete with other visual or text elements.

📥 You can download the logo from the Instagram Brand Resource Center.

Twitter

Key brand guidelines:

Using the icon without a container is preferable, but you have the option to use it inside a circle, square, or square with rounded edges.
You can only show the icon in Twitter blue or white. In case of color limitations, you can display it in black after getting permission from Twitter.
Do not modify the logo such as skewing or rotating it, filling it with patterns, and adding elements.
Do not animate or anthropomorphize the logo.

📥 You can download the logo from Twitter Brand Resources.

Key brand guidelines:

Always display the LinkedIn icon on a solid white background. If that’s not possible, you may use a solid light color instead.
Do not modify or distort any elements including the colors, shape, and proportions.
Don’t use their icons more prominently than your product or service name.

📥 You can download the logo from LinkedIn’s Brand Resources.

Key brand guidelines:

Only use the Pinterest badge without the wordmark.
Always include a call to action when using the Pinterest badge.
While the primary logo is red, you may change the color to make it feel cohesive with your brand communications.
Do not alter the logo with other elements like filters or effects.

📥 You can download the logo from Pinterest’s Brand Guidelines.

YouTube

Key brand guidelines:

Maintain a clear space around the logo that must be at least half the icon’s width around the YouTube logo.
The YouTube Logo must be clear and legible.
Don’t use the logo in a phrase or sentence.
You can choose to use two versions of the logo — either full-color with the YouTube Red icon or Almost Black full-color.
Don’t use colors other than YouTube Red, Almost Black, or White.

📥 You can download the logo from YouTube Brand Resources.

Key brand guidelines:

Do not use other trademarks, names, domain names, logos, or other content that could be confused with WhatsApp.
Use the green and white logo whenever possible.
Only use the green square logo when you refer to the iOS version of the app.
Do not modify the logo in any shape or form, or change its colors.
Don’t use the WhatsApp icon in a way that implies partnership, sponsorship, or endorsement by WhatsApp or any of its affiliates.
Don’t make WhatsApp the most distinctive or prominent feature of your materials.

📥 You can download the logo from WhatsApp Brand Resources.

Snapchat

Key brand guidelines:

Don’t use the brand elements in a way that suggests or implies a partnership, sponsorship, or endorsement by Snap Inc.
Don’t alter, rotate, or modify the logo.
Only show Snapchat’s Ghost logo in black and white and maintain a clear space around the logo.
Only use the Snapchat app icon on a mobile phone or in the context of mobile apps.

📥 You can download the logo from Snap Inc.

Best practices on using social media Icons

Maintain a uniform space and size

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

Avoid cluttering

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.

Conclusion

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!