Skip to content
Best method to add additional social logos to your Shopify theme

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.

Note: Shopify blog editor does not support code blocks, so I will use screenshots instead.

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.

Example of social logos on the footer

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:

Code for loading social icons
Adding to settings_schema.json

In your settings_schema.json, add the option of linking to the social media profile you want to add, so it will show up in the theme editor. For example:

settings_schema.json screenshot  

Now the option of linking to your WeChat profile will show up in the theme editor under theme settings.

Social media settings in the theme editor

The <i> element

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

Social media icons in footer

Older Post
Newer Post

4 comments

  • 👏🏾👏🏾👏🏾👏🏾

    Ty
  • very informative

    Tommy
  • Thank you this is so useful

    W

Leave a comment

Close (esc)

Popup

Use this popup to embed a mailing list sign up form. Alternatively use it as a simple call to action with a link to a product or a page.

Age verification

By clicking enter you are verifying that you are old enough to consume alcohol.

Search

Shopping Cart

Your cart is currently empty.
Shop now