How to Add a Social Media Marketing Icon to Your Theme

Entrepreneurs today have more ways than ever before to connect with potential buyers. A wide range of online communities have sprung up over the past few years, catering to different interests and industries, and open new opportunities for engagement. These social channels have allowed merchants to become more specialized in how and where they build a community. Savvy entrepreneurs are breaking new ground in vibrant online territories, and their online store experiences—and the social media marketing icons in that experience—should reflect this.

Currently, the existing Shopify-built themes have built-in settings for linking up merchants with the most popular social media channels. But what about some of the more niche communities, like Twitch, where gamers can amass legions of fans who tune in to watch them play? It's common for Twitch streamers to sell their own merch, so it makes sense that their online store would connect easily to their Twitch channel page. 

B2B clients tell a similar story, with a lot of their online interactions happening over LinkedIn. Having a simple theme setting where a B2B client can display a social media marketing icon that connects to their LinkedIn profile means that it's easier for them to build and maintain their business network. 

If you're customizing a theme for your client, you can add value to the project by identifying which social channels your client is engaged in, and building a connection between the online store and their social profile. For clients who are selling art prints, you can add a social setting for Behance; for younger influencers, you could enable linking their TikTok profile page. 

In this article, we'll look at how to upload a social media marketing icon to your theme, create a theme setting that clients can interact with, and display the linked image on your footer. 

Finding your social media marketing icon SVGs

For this tutorial we'll be using SVG icons since these are very lightweight and can scale to different size screens without losing clarity. SVGs can also be imported quite easily to a Shopify theme without a high performance cost. 

Once you've decided which social media icons would be the most appropriate for your client, the first step is locating SVG images for these brands. 

There are many online resources where you can download icon packs and high-quality branded images. Sites like Font Awesome and Icons8 also provide free and paid visual assets that you can use in your themes. 

For this example, I'm going to add a Twitch logo to my custom store, for my hypothetical gamer client who has a following on the live streaming platform. After some searching online, I've found exactly the icon I'd like to use on Font Awesome, where I can save it as an SVG file on my computer. 

You might also like: How to Refactor a Shopify Site for Javascript Performance.

Editing and uploading the SVG

For this image to be displayed on a Shopify online store, we'll need to import it into the snippets folder of our theme. Since we're using an SVG file, we'll first need to convert it to a .liquid file. In this tutorial, I'll be customizing the Debut theme, but the same approach can work on any theme.

Locate the image on your computer, and open the SVG file in a text editor, like Atom (which can be extended with several Atom packages that are available) or Sublime. Once you open the file, you'll see that the image is an svg element, containing properties like class and role. You can add or change the class so that it matches the naming convention on your existing icons, eg: icon-twitch. 

When you're ready, you'll need to save the file as a .liquid file. When choosing how to save the file, ensure that the name matches your existing icon file names, eg: icon-twitch.liquid. 

Once the file is saved with the .liquid extension, and can add it into your theme's /snippets directory. If you are developing with Theme Kit, you can simply add the file to the local version of your theme's /snippets folder, while theme watch is running. Otherwise, you can create a new file in the /snippets folder via the code editor on the Shopify Admin, and copy the code of the SVG file over. 

You might also like: Extend Into the Storefront With Online Store App Extensions.

Creating the theme setting

In order for my gamer client to add their Twitch link to the theme, I'll need to create a setting that they can interact with on the online store editor. Since this is a global theme setting, we'll be editing the settings_schema.json config file, rather than creating a section setting. 

The settings_schema.json file lists all settings that are available for your theme, grouped into categories, and controls the organization and content of the menu in the theme editor. Within this file we can define input settings that will display the the social icon on the footer, when a URL is added. 

The easiest and most reliable way to create a new setting for displaying the newly added icon is to model the setting off an existing social link setting. On the settings_schema.json file, locate the area where the existing settings for adding social media links are. For example, if you search the file for "facebook," you should find a setting that looks something like this on the Debut theme:

Around this area, you should see the other social link settings, like Twitter, Pinterest, etc. You can replicate one of these settings in the position where you would like the setting to appear. For example, I'd like the Twitch setting to be the second social media option below Facebook, so I'll add a new setting below the Facebook one. 

Once this is added, it will look like this:

What this is telling the theme editor is that the input setting will accept text, and has an ID of "social_twitch_link," which we'll reference when adding markup for the footer of the theme. The label property is a heading, or title that will indicate on the online store editor what this setting is for, while info will display an example of what your client can add into the text field. 

If you navigate to the online store editor, we can see this setting—however it's not fully functional until we add some markup to the footer. 

Adding markup to footer.liquid

The final step in this process is to add markup to display the new social icon on the actual footer of your theme. This means you'll be editing the footer.liquid section of your theme by adding code that will output the social icon with a link attached when your client adds a URL to the setting. 

First, we'll need to locate the markup for the existing social icons. Again, you can search for the name of an existing social link, such as "facebook," to see the current configuration. It's likely the markup will be nested in an unordered list element as a line item that loads if a link is set on the editor. For example, the markup for displaying a Facebook icon appears like this on the Debut theme:

In the markup above, we can see that there is a span element with a class of "icon__fallback-text" for accessibility purposes. This class has CSS added on the stylesheet that makes it hidden unless the icon isn't present, and allows screen readers to interpret what the icon is. 

You'll need to create a version of this for your new social icon, in the sequence that corresponds with how the theme setting was added to the settings_schema.json file. For example, in my case, the Twitch setting is the second option on the theme editor, so I will add the markup below the first line item. Otherwise the position of the setting on the theme editor might not match the position where my twitch icon actually appears on the footer. 

The markup for this new icon should model your existing code, and will look like this:

Here we can see that the new line item is wrapped in control flow tags that will run the code inside, if there's text entered into the theme setting I created. If that condition is met, it will output a link that targets the content entered in the theme setting, a render tag that loads the icon snippet I uploaded to the theme, and span fallback text for describing the icon. 

Depending on the theme you are using, you may also need to adjust existing rules that exist in the footer.liquid file. For example, I had to add a line for Twitch to the if statement that creates a variable when any social link is added:

Staying connected with marketing icons

Adding custom social media marketing icons to a theme will boost a client's social media engagement, strengthen the overall user experience of the online store, and add value to your project. Even if a client is currently not using a social channel, you can predict, based on their industry, which channels make sense to include in the theme. 

This is just one approach that shows by researching and understanding your client's niche industry, you can spot potential areas for personalizing and improving their online store.