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:
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:
Now the option of linking to your WeChat profile will show up in the theme editor under theme settings.
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:
- Use tools like IcoMoon to create mini font files for the social icons you want
- 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.
5 comments
Thank you this is so useful
Finally saw a guide that uses element, thank you!