How to Add Social Media Icons in Shopify Footer

Showing social media icons in your Shopify footer is one of the quickest wins you can score for your online store. It's a simple, powerful way to connect your storefront with your brand's community, turning shoppers into followers and followers into repeat customers. This guide will walk you through exactly how to do it using an easy-to-use editor, and also show you a bit of code for when you need more custom control.

Why Your Shopify Footer Needs Social Media Icons

Before jumping into the "how-to," let's quickly cover the "why." While it seems like a small detail, these little icons do some heavy lifting for your brand. They’re much more than simple window dressing, they’re a fundamental part of building a modern, credible e-commerce brand.

1. Builds Trust and Authenticity

A footer with links to active social media profiles shows customers that there’s a real, active brand behind the website. It proves you're not just another faceless storefront. Shoppers can click through, see your content, check out your engagement, and get a feel for your community. This kind of social proof is incredibly powerful and helps new visitors trust you enough to make a purchase.

2. Increases Your Social Following Organically

The people scrolling to the bottom of your website are already engaged. They've browsed your products or read your "About Us" page. This makes them the perfect audience to convert into long-term followers. By placing social links in the footer, you give these highly interested visitors a passive, no-pressure invitation to connect with your brand on their favorite platforms. It's one of the easiest ways to grow your followers without spending a dime on ads.

3. Creates a Channel for Community and Content

Your social media profiles are where you share your brand’s story, announce new products, run promotions, and showcase user-generated content. Your footer icons are a bridge that connects the transactional experience of your store to the relational experience of your community. It encourages one-time buyers to become part of your brand’s daily conversation, keeping them engaged long after their purchase.

4. Provides an Alternative Contact Method

Many customers, especially younger demographics, prefer reaching out via a DM on Instagram or a message on Facebook instead of sending an email. Your social icons give them a direct, familiar, and low-friction way to ask questions about products, shipping, or returns. This accessibility can dramatically improve the customer experience.

Method 1: The Easy Way with Your Theme's Built-in Settings

For most store owners, this is the only method you’ll ever need. Shopify’s Online Store 2.0 themes (like Dawn, and most modern paid themes) have built-in settings that make adding social media icons incredibly straightforward. You don’t have to touch a single line of code.

Step-by-Step Guide for Most Shopify 2.0 Themes:

Step 1: Go to the Theme Editor

From your Shopify Admin dashboard, look at the left sidebar and click on Online Store > Themes. Find your current theme and click the green "Customize" button. This will open up the theme editor, which gives you a live preview of your store on the right and editing panels on the left.

Step 2: Navigate to Your Footer Section

In the left-hand panel, you’ll see a list of the sections on your homepage (Header, Image Banner, etc.). Scroll all the way down until you see "Footer." Click on it to open up the specific settings for that section.

Step 3: Open the General "Theme Settings"

This is the part that trips some people up. The links themselves are usually not in the "Footer" section settings, but in the general Theme Settings. In the very bottom-left corner of the editor panel, you'll see a small gear icon labeled "Theme settings." Click that.

Step 4: Find the "Social Media" Tab

A new panel will open with a list of global settings for your theme (Colors, Typography, etc.). Scroll through this list until you find an option called "Social media." Click it. This is where your store-wide social links live.

Step 5: Add Your Profile Links

You’ll now see a series of fields for different social platforms like Instagram, Facebook, TikTok, Pinterest, YouTube, and X (formerly Twitter). Go to each of your social profiles, copy the full URL from your browser's address bar, and paste it into the corresponding field.

• For Instagram, use: https://www.instagram.com/yourusername
• For TikTok, use: https://www.tiktok.com/@yourusername
• For Facebook, use: https://www.facebook.com/yourpagename

It's important to use the full URL, including the https:// part. If you just put your username, it won't work. As you add a link, the corresponding icon should magically appear in your live preview footer.

Pro-tip: To display the icons, you might need to make sure a setting like "Show social icons" is checked in your Footer section settings as well. Just hop back to Section settings and look under the Footer.

Step 6: Hit Save and Check Your Live Site

Once you’ve added all your links, click the "Save" button in the top right corner. Then, open your live store in a new browser tab and navigate to the footer. Click each icon to make sure it directs to the correct profile. And that’s it!

Method 2: Adding Custom Icons by Editing Theme Code

Sometimes the built-in options aren't quite enough. What if your theme doesn't have an icon for a new platform like Threads? Or what if you want the icons to be a different shape or style? In these cases, you’ll need to do a little theme code editing. It sounds scarier than it is!

First, a very important warning: Before you edit ANY code, always duplicate your theme. Go to Online Store > Themes, click the three-dot menu next to your current theme, and select "Duplicate." This creates a backup copy. If you make a mistake, you can just delete the flawed copy and start over with a new duplicate.

Step 1: Finding the Right Theme File

From the themes page, click the three-dot menu on the duplicated theme and select "Edit code." This opens the code editor. On the left, you’ll see a list of all your theme’s files. You're looking for the file that controls the footer.

This is usually named footer.liquid, located inside the "Sections" folder. Sometimes, the social icon code is kept in a separate file for cleanliness, often called social-links.liquid or a similar name, located in the "Snippets" folder. Use the search bar at the top to find "social" or "footer" to narrow it down.

Step 2: Prepare Your Custom Icon

You'll need an icon to add. The best formats are SVGs because they're just code, meaning they load quickly and can be easily styled with CSS (e.g., changing the color on hover). You can find great free SVGs at sites like Feather Icons or Font Awesome.

Once you find your desired icon, download the SVG file and open it in a basic text editor (like Notepad or TextEdit). You'll see a block of XML code. Copy all of it.

Step 3: Add the HTML and Liquid Code

In your footer.liquid or related file, look for the code where the existing social icons are rendered. It will likely look like a loop in Shopify’s Liquid language. You're going to add a new, static link for your custom icon right beside it.

For example, to add a custom Threads icon, your code would look something like this:

<,!-- Existing social media code might be here -->,

<,!-- Your New Custom Icon Code -->,
<,a href="https://www.threads.net/@yourusername" class="social-icon-link" target="_blank" rel="noopener" aria-label="Follow us on Threads">,
<,!-- Paste Your SVG Code Here -->,
<,svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">,<,path d="M11 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/>,<,path d="M13 14.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/>,<,path d="M16 3.82c.98 0 1.8.82 1.8 1.8s-.82 1.8-1.8 1.8-1.8-.82-1.8-1.8.82-1.8 1.8-1.8Z"/>,<,path d="M9.18 20.18c-3.47-.6-6.18-3.4-6.18-6.9 0-3.9 3.2-7.1 7.1-7.1h1.3"/>,<,path d="M14.82 3.82c3.47.6 6.18 3.4 6.18 6.9 0 3.9-3.2 7.1-7.1 7.1h-1.3"/>,<,/svg>,
<,!-- End of SVG Code -->,
<,/a>,

Just replace the link with your profile URL and paste the SVG code you copied earlier between the <,a>, tags.

Step 4: Style Your New Icon with CSS

The new icon might look out of place. To fix this, you’ll need to add a touch of CSS. In the code editor's file list, find your main CSS file in the "Assets" folder. It’s often called base.css or theme.scss.liquid.

At the very bottom of this file, add some code to style your new icon to match the others. You can control its size, color, spacing, and a hover effect.

/* Style for Footer Social Icons */
.footer-section .social-icon-link svg {
width: 20px,
height: 20px,
fill: #333333, /* Use your store's text color */
transition: fill 0.3s ease,
}

/* Hover Effect */
.footer-section .social-icon-link:hover svg {
fill: #777777, /* A slightly lighter or primary brand color */
}


Click "Save," and your new, fully custom icon should now appear perfectly styled with the rest.

Final Thoughts

Adding social media icons to your Shopify footer is a fast, effective method to build your brand’s credibility and grow your online community. Whether you use the simple theme editor or add custom code to get the perfect look, it’s an essential step in linking your store to your brand's wider social ecosystem.

Once those new footer icons start driving traffic and shoppers begin engaging with you on social platforms, managing all the DMs, comments, and mentions becomes the next big task. As a team deeply invested in social media, we built Postbase to solve this specific problem. Our unified inbox brings all your customer conversations from Instagram, Facebook, TikTok, and more into one clean feed, making it simple to have timely and organized conversations that turn new followers into loyal customers.