Social media platforms can help you reach more customers, increase your brand awareness, and grow your sales. Not to mention, 87% of online shoppers agree that social media helps them make e-commerce purchasing decisions!
But how do you integrate your social media accounts with your Shopify store?
In this article, we will show you how to add social media to Shopify as comprehensively as possible. You will learn how to display your social media icons on your store and how to link them to your social media profiles.
Let’s get started!
| 💡 Recommended reading: |
The Importance Of Adding Social Media To Shopify
Social media has become more potent as a marketing weapon for online retailers in recent years. As a Shopify store owner, you don’t want to miss the chance to learn how to add social media to Shopify.
1. Increase brand awareness
Brand awareness refers to the level of your brand’s reputation. The more people know about your business, the higher brand awareness it achieves.
This is exactly why you should consider learning how to add social media to Shopify.
To bring attention to your Shopify store, approach your new potential customers by establishing a wider online presence on social platforms like Facebook, Instagram, and Twitter.
For example, noteworthy features like Reels, TikTok, and YouTube Shorts have increased the chance of reaching more followers lately.
| 💡Interestingly, in a report by Statista in 2022, the most popular social media platforms that online shoppers worldwide would be more likely to make a purchase are Facebook (33%), Instagram (24%), and Tiktok (8%). |
Make sure you have a comprehensive strategy to grow your social media channels in the short and long terms, including goals, objectives, key results, etc.
2. Generate leads
Social networking helps eCommerce enterprises generate leads in many ways. The most common strategies are content marketing and online advertisements.
Creating and distributing captivating social media content is an excellent tactic to engage potential customers. Users who perceive your material as educational and helpful are likely to learn more about your products, make a purchase, and eventually, increase your sales!
Conductor, in a recent report, found out that consumers who read educational content from a brand before purchase were 131% more likely to buy from that brand immediately!
Businesses can also acquire contact information from interested users via lead-generation advertising. However, these ads demand a budget in exchange for more effective targeting of specific demographics and interests.
| 💡 For your further reading about advertising: |
3. Engage with customers
Social can come with broadcast features, but it is originally a place to form communities of like-minded people, where brands connect with customers more personally.
If you’re familiar with social proof apps, you might understand that they are built upon this wholesome aspect of social media: Engagement.
A high level of engagement implies that you respond to your clients quickly and efficiently. This makes customers feel heard and cared for, improving brand advocacy and sales at the lowest possible cost.
Plus, while monitoring your customers on social media, you will learn more insights about them. The more you understand your customers, the more ideas you’ll have for improving your products and services.
4. Drive traffic to the website
Some of the primary reasons people use social media, according to DataReportal, are to find content, see what’s being talked about, and find inspiration for things to do and buy.
And with over 4.80 billion users worldwide, social is a gold mine for online businesses. This number alone indicates that social media will be a game-changer for your store’s web traffic, if implemented correctly.
Now, learn how to add social media to Shopify, build robust traffic, and erase the fear of stagnant conversion rates!
Step-by-step Guide On How To Add Social Media To Shopify
Here comes our easy guide to help you learn how to add social media to a Shopify store, including the usual theme customization and the coding guide.
1. How to add social media to Shopify
Theme Editor has a simple feature that lets you add social media accounts easily and quickly. Here’s how to do it manually:
Step 1. Go to your Shopify admin, navigate to Online Store > Themes > Customize.
The first step on how to add social media to Shopify is access the Customize button from the Themes tab
Step 2. Click the Theme settings icon. Scroll down on the sidebar to find the Social Media option, then click on it.
Find the Social Media tab on the left sidebar to insert social URLs
Step 3. Copy all your social media profile URLs and paste each into the correct field. This is how to add social media links to Shopify.
Fields to add social media links to Shopify
Step 4. Check if the social icons are correctly displayed based on what social accounts you have added. Right above the footer is where they are by default.
Step 5. Finalize the process and click Save.
That’s all the steps on how to add social media to Shopify! Pretty easy, isn’t it?
2. How to add social media icon to Shopify
As you learn how to add social media to Shopify, you might have seen only a few options in the Social Media tab. These are by default, such as Facebook, Instagram, Youtube, etc.
If you’d like to add more social media icons to your store, apart from the defaults, follow the steps below.
| ❗Heads up
The following guide is optional, depending on your preference and skill level in terms of coding knowledge. In case you need support, consider contacting a Shopify Expert. |
Step 1. Grab your SVG social icons
SVGs are lightweight and adaptive to any size screen while maintaining clarity. Plus, it’s easy to add SVG icons to a Shopify theme.
Finding these social media icons is easy as well. Sites like Incons8 and Font Awesome are the best sources for free icon packs and other visual assets you can use.
For example, I want to add a WhatsApp logo to my store. Once I’ve found precisely the icon I want to use from one of the aforementioned sites, I’ll save an SVG file of the logo on my computer for use in the later steps.
Step 2. Edit and upload the SVG
This step might require a small piece of your coding know-how to work. We’ll cut through the noise so you’ll spot what’s essential to follow.
1. First, locate the SVG file on your computer.
2. Open the file in a text editor, such as Atom or Sublime.
3. Look for the svg element in the file. This element contains the code for the image.
4. Add or change the class attribute of the svg element. The class should match the naming convention of your existing icons. For example, if your existing icons have the class icon-facebook, then you would add the class icon-whatsapp to the svg element.
5. Save the file as a .liquid file. Again, the file’s name should match the name of your existing icons. E.g., icon-whatsapp.liquid
6. Access Shopify’s code editor by clicking on the “…” button next to Customize option.
Access Shopify’s code editor to edit and upload the SVG
7. Add the .liquid file to your theme’s /snippets directory. You can do this by adding it to the theme’s /snippets directory using the Shopify code editor.
Search for the Snippets folder and start adding a new snippet
Step 3. Create a theme setting
In this step, you’ll create a theme setting that allows you to add social media links to the online store editor. Simply put, you’re coding a new field to put the URL of a new social media.
We’ll show you how to edit the settings_schema.json config file directly. This file controls all the configuration elements of the theme editor’s menu, including social media links.
1. Find the settings_schema.json file in the Config folder.
Finding the settings schema json file in the Config folder
The easiest way to add a new setting for the newly added icons is to replicate an existing social link setting.
2. On the settings_schema.json file, find the area for the social media link setting. For instance, it should look like this for Facebook:
{
"type": "text",
"id": "social_facebook_link",
"label": "Facebook",
"info": "https:\/\/facebook.com\/shopify"
},
3. To add a new setting, you can copy one of these existing settings and place it in the desired location.
For example, I want to add a WhatsApp box above the Facebook box, so I will copy the Facebook code, configure it to Whatsapp, and paste it right above Facebook.
Don’t forget to edit the social media name and info in these codes to match your newly added social media icon. Once it’s done, the code lines should look like this:
{
"type": "text",
"id": "social_whatsapp_link",
"label": "WhatsApp",
"info": "https://wa.me/<number>"
},
4. Now you’ve just created the setting for a new social media option where you can add its link in the theme editor. Your newly imported setting tells the Shopify theme to present something like this:
A new social URL box appears after you create a theme setting
However, more than this step is needed to program the theme to display the social icon at your storefront. To make it happen, you must add some markup to the footer.
Likewise, you’ll edit the codes in the footer.liquid section to exhibit the social icons by copy-and-paste.
These icons then come with URLs that you’ve added earlier. When someone clicks on one of them, it will direct them to the social platform of your brand.
1. First, in the code editor, search for the footer.liquid file, which is located in the Sections folder. Locate the markup for the existing social icons. For example, the markup for a Facebook icon contains the code lines below:
{%- if settings.social_facebook_link != blank -%}
<li>
<a class="social-icons__link" href="{{ settings.social_facebook_link | escape }}" aria-describedby="a11y-external-message">
{%- render 'icon-facebook' -%}
<span class="icon__fallback-text">Facebook</span>
</a>
</li>
{%- endif -%}
2. Simply copy the codes above and paste them into the correspondent position.
For example, in the previous step, I added WhatsApp above Facebook. Thus, in this footer.liquid file, the markup for the WhatsApp icon must be placed above the Facebook icon relatively.
Take WhatsApp as an example again. Once you’ve made a markup version for the new social icon, this is how it looks:
{%- if settings.social_whatsapp_link != blank -%}
<li>
<a class="social-icons__link" href="{{ settings.social_whatsapp_link | escape }}" aria-describedby="a11y-external-message">
{%- render 'icon-whatsapp' -%}
<span class="icon__fallback-text">Whatsapp</span>
</a>
</li>
{%- endif -%}
Nicely done! You’ve successfully added a new social media icon to your Shopify store.
Final Words
As an online retailer, you want to maximize the sales-winning opportunities for your store. Knowing how to add social media to Shopify is among the key tasks to achieve them.
Thanks to the social icons displayed right above the footer of your website, your customers know there is more than a place to keep in touch, get updated, share feedback, and help boost your brand name to another level.
If you like our guide and want to learn more, stay tuned on OneCommerce Blog for more tips and tricks to supercharge your Shopify business!