How to Add Social Share Icons on Shopify Product Page (Dawn/Horizon Theme Tutorial) – In this step-by-step Shopify tutorial, learn how to add social share icons on your Shopify product page using the Custom Liquid Block in the Dawn and Horizon themes.

This method works without installing any third-party apps and is compatible with all Shopify themes that support the Custom Liquid Block. You’ll be able to create custom social media share buttons (Facebook, WhatsApp, Twitter, Instagram, and more) that allow customers to share the product URL directly on their favorite platforms.

Features of These Icons:

When clicked, the current product page URL will be shared on the selected social media platform.

What You’ll Learn in This Video:

Video Tutorial

How to add social share buttons in Shopify without apps
Add Facebook, WhatsApp, Twitter & more icons to your product page
Shopify Dawn & Horizon theme customization (easy code tutorial)
Create social share icons on the product page (no app needed)
Shopify social media share icons – step-by-step guide

By following this tutorial, you’ll be able to add social share buttons to your Shopify store quickly and boost customer engagement.

Steps:

Login to your Shopify store
Go to Online Store > Themes > Customize
Navigate to Product > Default Product
Add a Custom Liquid Block below the “Buy Now” button
Copy & paste the given code
Done

Code:

<div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
  <!-- Share Text -->
  <span style="font-weight: 600; font-size: 16px; color: #2e2e2e; margin-right: 8px;">
    Share:
  </span>
  <!-- Facebook -->
  <a href="https://www.facebook.com/sharer/sharer.php?u={{ shop.url }}{{ product.url }}" target="_blank" aria-label="Facebook"
     style="display: inline-flex; align-items: center; color: #2e2e2e;" onmouseover="this.style.color='#827225'" onmouseout="this.style.color='#2e2e2e'">
    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 5.003 3.657 9.127 8.438 9.877v-6.988H7.898v-2.89h2.54V9.797c0-2.507 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.464h-1.26c-1.243 0-1.63.772-1.63 1.562v1.875h2.773l-.443 2.89h-2.33V21.877C18.343 21.127 22 17.003 22 12z"/></svg>
  </a>
  <!-- WhatsApp -->
  <a href="https://wa.me/?text={{ shop.url }}{{ product.url }}" target="_blank" aria-label="WhatsApp"
     style="display: inline-flex; align-items: center; color: #2e2e2e;" onmouseover="this.style.color='#827225'" onmouseout="this.style.color='#2e2e2e'">
    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M20.52 3.48A11.91 11.91 0 0012.07.02a12 12 0 00-10.6 17.24L.13 24l6.95-1.83A12 12 0 0012.07 24h.01c6.62 0 12-5.38 12-12a11.9 11.9 0 00-3.56-8.52zM12.07 22a9.93 9.93 0 01-5.06-1.38l-.36-.22-4.13 1.09 1.1-4.02-.23-.37A10 10 0 1112.07 22zm5.6-7.6c-.3-.15-1.77-.87-2.05-.97-.27-.1-.47-.15-.66.15s-.76.97-.94 1.17c-.17.2-.35.22-.64.08a8.2 8.2 0 01-2.42-1.5 9.2 9.2 0 01-1.7-2.12c-.18-.31 0-.47.14-.62.15-.15.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52s-.66-1.58-.9-2.17c-.24-.57-.5-.5-.67-.5h-.57c-.2 0-.5.07-.75.35s-.98.96-.98 2.35.98 2.73 1.1 2.93c.14.2 1.92 2.95 4.65 4.14.65.28 1.15.45 1.54.58.65.2 1.25.17 1.72.1.53-.08 1.77-.73 2.02-1.43.25-.7.25-1.3.17-1.43-.07-.13-.25-.2-.55-.35z"/></svg>
  </a>
  <!-- Twitter -->
  <a href="https://twitter.com/intent/tweet?url={{ shop.url }}{{ product.url }}" target="_blank" aria-label="Twitter"
     style="display: inline-flex; align-items: center; color: #2e2e2e;" onmouseover="this.style.color='#827225'" onmouseout="this.style.color='#2e2e2e'">
    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M20.66 6.01c.01.2.01.39.01.59 0 6.02-4.58 12.97-12.97 12.97A12.89 12.89 0 010 17.9c.3.03.59.05.89.05a9.15 9.15 0 005.67-1.96A4.58 4.58 0 012.9 12.8c.3.05.6.08.92.08.44 0 .87-.06 1.28-.17a4.57 4.57 0 01-3.66-4.48v-.06c.62.35 1.34.57 2.1.6a4.56 4.56 0 01-2.03-3.8c0-.83.22-1.61.6-2.28A12.96 12.96 0 0011.17 6.4a5.17 5.17 0 01-.11-1.04 4.57 4.57 0 017.91-3.12 8.97 8.97 0 002.9-1.1 4.54 4.54 0 01-2.01 2.52 9.08 9.08 0 002.63-.72 9.67 9.67 0 01-2.29 2.37z"/></svg>
  </a>
  <!-- Pinterest -->
  <a href="https://pinterest.com/pin/create/button/?url={{ shop.url }}{{ product.url }}" target="_blank" aria-label="Pinterest"
     style="display: inline-flex; align-items: center; color: #2e2e2e;" onmouseover="this.style.color='#827225'" onmouseout="this.style.color='#2e2e2e'">
    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.04c-5.48 0-9.96 4.49-9.96 10 0 4.15 2.5 7.72 6.07 9.23-.08-.79-.15-2.01.03-2.87.16-.71 1.06-4.54 1.06-4.54s-.27-.56-.27-1.38c0-1.29.75-2.26 1.68-2.26.79 0 1.17.6 1.17 1.32 0 .8-.51 2-0.77 3.11-.22.91.46 1.65 1.36 1.65 1.63 0 2.88-1.72 2.88-4.21 0-2.2-1.58-3.74-3.84-3.74-2.61 0-4.14 1.96-4.14 3.99 0 .79.31 1.64.7 2.1.08.1.09.2.07.31-.08.34-.26 1.08-.3 1.23-.05.2-.16.24-.38.15-1.42-.6-2.3-2.48-2.3-4 0-3.26 2.37-6.25 6.85-6.25 3.6 0 6.39 2.56 6.39 5.98 0 3.57-2.25 6.44-5.38 6.44-1.05 0-2.03-.55-2.37-1.19l-.64 2.44c-.23.86-.85 1.93-1.27 2.59.95.29 1.97.45 3.03.45 5.5 0 9.96-4.49 9.96-10s-4.46-10-9.96-10z"/></svg>
  </a>
  <!-- Instagram -->
  <a href="https://instagram.com/yourprofile" target="_blank" aria-label="Instagram"
     style="display: inline-flex; align-items: center; color: #2e2e2e;" onmouseover="this.style.color='#827225'" onmouseout="this.style.color='#2e2e2e'">
    <svg fill="none" stroke="currentColor" stroke-width="1.5" width="24" height="24" viewBox="0 0 24 24">
      <rect x="3" y="3" width="18" height="18" rx="5" ry="5" stroke="currentColor"/>
      <circle cx="12" cy="12" r="3.5" stroke="currentColor"/>
      <circle cx="17" cy="7" r="1" fill="currentColor"/>
    </svg>
  </a>
  <!-- LinkedIn -->
  <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ shop.url }}{{ product.url }}" target="_blank" aria-label="LinkedIn"
     style="display: inline-flex; align-items: center; color: #2e2e2e;" onmouseover="this.style.color='#827225'" onmouseout="this.style.color='#2e2e2e'">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
      <path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V24h-4V8zm7.5 0h3.8v2.2h.05c.53-1 1.84-2.2 3.8-2.2 4.06 0 4.8 2.7 4.8 6.2V24h-4v-7.6c0-1.8 0-4.2-2.6-4.2-2.6 0-3 2-3 4.1V24h-4V8z"/>
    </svg>
  </a>
</div>