How to Add Social Media Icons to Shopify

Adding social media icons to your Shopify store is a simple change that connects your ecommerce business to your brand's community online. It’s a direct link that helps build trust with new customers and gives loyal followers a way to stay connected. This guide shows you exactly how to add those icons, covering the easiest built-in theme settings, custom code edits for full control, and helpful apps.

Why Bother Adding Social Media Icons Anyway?

Before jumping into the "how," it's worth understanding the "why." Placing social media icons on your site isn't just about design, it's a strategic move that builds your brand and supports your business. When you link your Shopify store to your social channels, you're doing more than just filling space in your footer.

• You Build Trust and Social Proof. A potential customer who discovers your store for the first time will often look for social proof to see if your brand is legitimate. Icons leading to active, engaging social media profiles show that there's a real brand and community behind the products. An empty or non-existent social presence can be a red flag.
• You Grow Your Community. A visitor might not be ready to buy from you today, but that doesn't mean the relationship has to end there. By encouraging them to follow you on Instagram, TikTok, or X, you convert a one-time visitor into a long-term community member. They'll see your new products, promotions, and brand stories in their feed, keeping your store top-of-mind for a future purchase.
• You Create a Two-Way Street for Traffic. While icons on your store link customers away from your site, your social profiles exist to drive them back. A strong social media presence regularly pushes interested followers to your product pages, new collections, and blog posts. It’s a content loop where your store and your social channels feed each other.

The Quickest Win: Using Your Theme's Built-in Settings

For most store owners, the best place to start is right inside your Shopify theme customizer. Nearly all modern Shopify themes have a dedicated, user-friendly section for adding social media links. This method is fast, requires zero code, and is designed to work perfectly with your theme's design.

Step-by-Step Instructions

Here’s how to access these settings and add your links in just a few minutes:

1. From your Shopify Admin dashboard, go to Online Store > Themes in the left-hand navigation menu.
2. On your current theme, click the “Customize” button. This will open the visual theme editor.
3. In the theme editor, look at the menu on the left side. Find and click on “Theme settings”. This is often represented by a gear icon or a paintbrush icon.
4. Within the Theme settings menu, scroll until you find a section named “Social media.” Some themes might call it “Social links” or “Social profiles.”
5. You’ll see a list of fields for different platforms: Facebook, Instagram, TikTok, Pinterest, X, YouTube, and so on.
6. Now, copy and paste the full URL of your social media profiles into the corresponding fields. For example, use https://www.instagram.com/your-brand-name, not just @your-brand-name.
7. As you add the links, you should see the icons appear in the live preview of your store (usually in the footer).
8. Click the “Save” button in the top right corner to make your changes live.

This method typically adds the social icons to one or two default locations, most commonly the footer of your website. Check the bottom of your homepage to see them in action. For most businesses, this is all you need to do.

Adding Icons to Other Sections (Headers, Banners, and Pages)

What if you want your social icons in a different location, like your announcement bar, a page header, or on your "About Us" page? Modern Shopify OS 2.0 themes offer more flexibility here without needing to touch a line of code, using sections and blocks.

Using Theme Sections and Blocks

Let's say you want to add social links to your header. Many themes allow this through the theme customizer:

1. In the theme customizer, go to the "Sections" tab on the left.
2. Click on the “Header” section.
3. Look for settings related to social media links. You might find a checkbox that says "Show social media icons" or a block you can add. This depends entirely on your theme's features.

Similarly, you can add icons to other pages. In a "Rich text" or "Image with text" section on a page, your theme might offer a block for "Buttons" or "Icons." Although primarily meant for calls-to-action, you can use these to create links to your social profiles. It gives you a bit more granular control over where your social links appear on a page-by-page basis.

For Total Control: Adding Icons with Custom Code

If your theme doesn’t offer the placement you want, or you'd prefer to add uniquely styled icons, a small amount of code can give you ultimate flexibility. This approach is for those comfortable with making small edits to theme files.

Fair Warning: Always duplicate your theme before making any code changes! Go to Online Store > Themes, click the three-dot menu on your theme, and select "Duplicate." This creates a backup copy you can restore if anything goes wrong.

Step 1: Get Your Social Media Icon Graphics (SVGs)

First, you need the actual icons. The best format is SVG (Scalable Vector Graphic) because SVGs are just code, load quickly, and look perfectly sharp on any screen size. You can find free, high-quality SVG icons from sites like Ionicons or Feather Icons. On these sites, you click an icon, and it often gives you the SVG code to copy.

Step 2: Create a Reusable Code "Snippet"

Instead of pasting icon code all over your theme, the organized way is to create a reusable snippet. This keeps your code clean and easy to update.

1. In your Shopify Admin, go to Online Store > Themes. Click the three-dot menu on your theme and choose “Edit code.”
2. In the left-hand file list, find the “Snippets” directory and click “Add a new snippet.”
3. Name your new snippet something clear, like my-social-links, and click “Done.”
4. In your new empty file, paste your SVG code wrapped in links. A smart trick here is to pull the URLs directly from your theme settings, so you only have to update them in one place.

Your code in the my-social-links.liquid file might look something like this:

<,div class="custom-social-links">,
<,!-- Instagram Icon -->,
<,a href="{{ settings.social_instagram_link }}" target="_blank" rel="noopener" aria-label="Follow us on Instagram">,
<,!-- PASTE YOUR INSTAGRAM SVG CODE HERE -->,
<,svg xmlns="http://www.w3.org/2000/svg" width="24"...><,/svg>,
<,/a>,

<,!-- Pinterest Icon -->,
<,a href="{{ settings.social_pinterest_link }}" target="_blank" rel="noopener" aria-label="Follow us on Pinterest">,
<,!-- PASTE YOUR PINTEREST SVG CODE HERE -->,
<,svg xmlns="http://www.w3.org/2000/svg" width="24"...><,/svg>,
<,/a>,
<,/div>,

Step 3: Add the Snippet to Your Theme Files

Now, you can place this snippet anywhere in your theme you want the icons to appear. You do this by adding one line of Liquid code:

{% render 'my-social-links' %}

For example:

• To add them to your header, open the header.liquid file (in the "Sections" folder) and find a logical place to paste the `render` tag.
• To add them to your product pages, you could edit the main-product.liquid file.

This method gives you pinpoint accuracy and lets you customize the styling with CSS for complete brand alignment.

The App Approach: When You Need More Features

If the code method feels intimidating or you're looking for more advanced functionality, the Shopify App Store has many great solutions.

When an App Is the Right Choice

Consider using an app if you want to:

• Display a live feed of your Instagram or TikTok posts on your site.
• Add "floating" social icons that stay visible as the user scrolls.
• Include "share" buttons on product pages or blog posts, encouraging visitors to share your content.
• Gain more design control without writing any code.

Apps like XO Social or Social Media Icons and Share make this process a breeze. The main downsides are that they can add a small monthly cost and, like any app, have the potential to slightly impact site speed. However, for the added features and ease of use, they can be well worth it.

A Few Quick Tips for Smarter Social Linking

Simply adding the icons isn't quite the final step. To make sure they serve you well, follow these best practices.

1. Only Link to Active Profiles

If you haven't posted on X in three years, it's better to remove the icon. Linking to a dormant account can make your brand appear abandoned or unprofessional. Feature the 1-3 platforms where you are consistently active and building a community.

2. Open Your Links in a New Tab

This is a small but important detail. When a user clicks a social icon, it should open in a new browser tab. This keeps them from navigating away from your store. All modern themes do this by default, and the code example above includes it with the target="_blank" attribute.

3. Place Icons Where They Make Sense

The footer is the standard, expected place for social media links. It’s accessible but not distracting. Avoid putting them in prime real estate next to your "Add to Cart" button or in your main navigation, as that can pull shoppers away from the primary goal of making a purchase.

Final Thoughts

Connecting your Shopify store to your social channels is a foundational step in building an online brand. Whether you use the simple theme customizer, get more control with a Liquid snippet, or opt for an app’s feature set, adding social icons gives your brand credibility, builds your audience, and creates a stronger connection with your customers.

Once your icons are set up and driving visitors to your profiles, the job of managing those social channels begins. Responding to comments, handling DMs, and scheduling a consistent stream of content - especially performance-driven video for Reels and TikTok - can quickly become a major challenge. This is exactly why we built Postbase. Our goal is to give you a simple, modern platform to handle everything from your visual content calendar to your unified social inbox in one clean space, so you can focus on building your community without fighting your tools.