How to Add Social Share Icons on Shopify Product Page (Dawn/Horizon Theme Tutorial) | 2025

<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>