Best method to add additional social logos to your Shopify theme

First thing you should do

Contact your Shopify theme provider to see if they are willing to add it for you. If you are a developer like me, you will know that this is a no-brainer task for them. However, if they refuse (like mine did), then keep on reading.

Problems with other solutions

Both the solution recommended by Shopify and the answer I saw on Stack Overflow use SVG. However, it would be tricky to apply styles to SVG, especially if your theme provider uses <i> element for loading icons.

Adding social logos

This is an advanced tutorial. Knowledge of HTML and CSS is required, and familiarity with Shopify Liquid is recommended.

In my case, I am adding the WeChat logo & link to our navigation.

How are social logos loaded?

Social logos (social media icons) are loaded as vector icons, often via popular icon libraries such as Font Awesome. By standard they are displayed on footer, or the bottom of mobile navigation.

Theme files that load social logos

My theme provider (Venue) load social logos via footer.liquid and mobile-drawer.liquid, both of which can be found under the Sections folder of your theme. I presume this would be the same for other theme providers if they follow the Shopify standard.

To get to the Sections folder of your theme, navigate to your Shopify dashboard. From here, go to: Online Store > Actions > Edit Code.

Code that loads social logos

You may see code like below in footer.liquid:

Now if you have familiarity with front end development you probably already know that icons are often loaded via <i>, the idiomatic text element. You will also know that most developers use Font Awesome to load them.

If you see "fab" in the <i> element (e.g., <i class="fab fa-instagram"></i>), then your theme developers load the logos directly via Font Awesome and most likely loaded the entire library (which it not the best practice, by the way, since we should not load the entire library for a few icons). Then you can add social icons by searching for the corresponding brand icons (e.g., <i class="fab fa-weixin"></i> for WeChat). 

However, if your theme developer took the hardcore approach - uploading their own icon fonts -  like ours (Venue) did, there are a few more steps you need to take:

1. Use tools like IcoMoon to create mini font files for the social icons you want
2. Add your font library to your Shopify theme (see this tutorial or the code block below on adding fonts to your Shopify theme).

You will have something like this:

Now go back to your theme editor and add the link to your WeChat profile. You will see the WeChat logo showing up.

Enjoy this blog post? Try our free currency conversion app that integrates with your theme.