How to Add Social Media Icons to Shopify: A Complete Guide

Table of Contents Hide

Tony Pham Jan 23 2026

In today's digital business landscape, social media serves as a powerful strategic lever, directly influencing traffic attraction and brand credibility. In this guide, NextSky will walk you through how to add social media icons to Shopify store from basic setup to advanced customisations, creating seamless connections between your store and key platforms like Instagram, Facebook, TikTok, and more.

How to add social media icon to Shopify with 3 methods

Method 1: Using the theme editor (Easiest for Beginners)

Most modern Shopify themes (especially Online Store 2.0 themes like Dawn and its variants) include built-in support for social media icons, requiring no code edits.

Step 1: Log in to Shopify Admin → Online Store → Themes.
Step 2: For your active theme, click Customize to open the Theme Editor.

Step 3: In the editor interface, click the Theme settings icon (gear) in the left sidebar (usually at the bottom).

Step 4: Scroll to the Social media section. Paste your profile URLs for platforms like Instagram, Facebook, TikTok, YouTube, Pinterest, Twitter/X, LinkedIn, etc. (Shopify supports many popular ones natively).

Step 5: Return to the main editor preview. Select the footer (or Header / Announcement bar if available) section. Enable the option Show social media icons (wording may vary slightly by theme, e.g., "Display social media icons").
Step 6: Click Save. Preview your live store on desktop and mobile to confirm the icons appear correctly and the links work.

Pro tip: If your theme lacks this option (older themes), duplicate it first (Actions → Duplicate) for safety. This method handles “add social media to Shopify footer” effectively and supports up to 10+ platforms out of the box.

Method 2: Manually add social media icons via code (Advanced customisation)

Ideal for custom icons, exact placement (e.g., header next to cart, product page, or unique branding), or when the built-in option falls short.

Step 1: From Shopify Admin, go to Online Store → Themes → For your active theme, click Actions → Edit code.

Step 2: In the Assets folder, click Add a new asset and upload your custom icons (PNG or SVG recommended). Ideal size: 24×24px or 32×32px for sharpness across devices.

Step 3: Open the relevant file based on the desired location:
- Footer: Sections → footer.liquid
- Header: Sections → header.liquid
- Product page: Sections → main-product.liquid or Templates → product.liquid

Step 3: Manually add social media icons via code

Step 4: Insert Liquid/HTML code where you want the icons (e.g., in a <div> inside the footer social block). Replace with your links and asset filenames:

{{ 'facebook-icon.svg' | asset_url | img_tag: 'Facebook', 'Facebook icon', width: 24, height: 24 }}

</a>

{{ 'instagram-icon.svg' | asset_url | img_tag: 'Instagram', 'Instagram icon', width: 24, height: 24 }}

</a>

</div>

(Use img_tag for responsive images or direct <img src="{{ 'icon.svg' | asset_url }}" ... > for SVGs.)

Step 5: In Assets → theme.scss.liquid (or base.css / theme.css), add styling:

CSS

.social-icons {

display: flex;

gap: 16px; /* Adjust spacing */

justify-content: center; /* or flex-start/end */

align-items: center;

}

.social-icons a img {

width: 24px;

height: 24px;

transition: opacity 0.3s ease;

}

.social-icons a img:hover {

opacity: 0.7;

}

Step 6: Save, preview changes, and test on mobile/desktop for a consistent experience.

Method 3: Using Third-Party Apps (For Advanced Features)

If you need social feeds, dynamic share buttons, analytics, floating bars, or support for more platforms, apps offer easier, feature-rich solutions.

Recommended apps (popular and updated in recent years):

Zotabox Social Sharing Buttons: Supports 45+ platforms with share, follow, and messaging buttons. Fully customizable (style, position, colour). Great for social proof and no-code setup.
Elfsight Social Media Icons / Share Buttons: Stylish, brand-matching icons; supports floating/inline layouts. Affordable (~$3–5/month for premium features).
Dakaas Social Media Icons / Social Bar: Adds follow icons and product share buttons, boosting trust and conversions across multiple platforms (Facebook, Instagram, WhatsApp, etc.).
Sharely: Social Media Icons or similar free/paid options: Simple sharing buttons with strong reviews.

Installation tip: Search the Shopify App Store for "social media icons" or "social share buttons," install, connect your profiles, and customise via the app dashboard—no deep coding needed.

Why add social media icons to your Shopify store?

Boost brand recognition: Subtle CTAs encourage follows and shares, spreading your brand organically via user mentions and content.
Drive traffic & sales: Direct sharing from product pages creates social proof, recirculates traffic to your store, and can increase revenue by 15–20% through customer advocacy.
Build trust: Active social links signal authenticity and a real community, reducing cart abandonment and improving conversions.
Indirect SEO benefits: More shares and backlinks enhance domain authority and search rankings.
Increase engagement & retention: Enable real-time interaction, feedback collection, and exclusive offers to foster loyalty.

Best places to position social media icons

Footer: The most standard and user-friendly spot—aligns with browsing habits, provides consistent visibility without cluttering the main layout.
Product pages: Add share buttons near images/pricing to encourage instant sharing, amplifying reach as products appear in friends' feeds.
Blog posts: Integrate sharing icons to let readers spread valuable content, driving referral traffic back to your site.

Best practices for adding social media icons in Shopify

Strategic placement: Use the footer for ongoing visibility, the header for quick access, and product pages for sharing. Limit to 4–6 icons to keep the design clean and focused.
Brand consistency: Match icon colours to your palette; prefer SVGs for crisp rendering at any resolution. Ideal size: 24–32px desktop, slightly larger on mobile for tap-friendliness.
Mobile optimisation: Always preview on smartphones—ensure icons stack neatly, remain tappable (min 44px touch target), and don't disrupt scrolling.
Accessibility & compliance: Add descriptive aria-label attributes (e.g., "Follow us on Instagram") for screen readers and SEO. Include privacy policy links if handling data (GDPR compliance).
Track performance: Monitor social referral traffic in Shopify Analytics or Google Analytics. A/B test positions or styles to find what drives the most clicks/follows.
Encourage sharing: Pair icons with micro-CTAs like “Share this product” to boost virality.

Common pitfalls to avoid: Overloading with too many icons (causes distraction), forgetting mobile checks, or using broken links—always test in incognito mode as a real visitor.

Mastering how to add social media icons to Shopify unlocks significant growth in brand visibility, customer interaction, and sustainable traffic. Have you implemented this and seen results? Or need help with your specific theme? Drop a comment—I'm happy to assist based on real-world experience!

Frequently Asked Questions (FAQs)

How do you add social media icons to the Shopify footer?

In the theme editor, go to Sections > Footer, enable Show social media icons, then enter your social media links in Theme settings > Social media. Save your changes and preview the store to confirm the display.

Where should social media icons be placed on a Shopify store?

Common placements include the footer (via sections), the header (depending on theme settings), and product pages (using code or apps). Among these, the footer is the most popular choice because it is easy to find, familiar to users, and does not disrupt the shopping experience.

How can you add social media icons to the Shopify header?

You can edit the Sections > header.liquid file to insert icons using code, or use built-in blocks if your theme supports them. If you prefer a no-code approach, apps like Floatify offer a simple and effective solution.

Can you add social media buttons on Shopify without using an app?

Yes. You can add basic social media icons directly through the theme editor or by editing the theme code. Apps are only necessary if you want advanced features such as dynamic sharing buttons, engagement tracking, or social media feeds.

Tags:

Tony Pham

Hello! I'm Tony Pham, a full-stack Shopify, Magento, and WordPress developer with over 12 years of experience in both front-end and back-end development.

Since 2016, I have been proudly working at Nextsky as the Tech Lead, where I continue to enhance my skills and contribute to exciting projects. One of my proudest works is the Agile theme, which passed Shopify's high standard and is currently available on Shopify Theme Store.

I am passionate about researching new technologies and staying updated with the latest trends in the industry. It not only makes my life more fulfilling and exciting but also allows me to bring better service to clients.