FreeBeginner

Social Share Buttons

Lightweight social sharing buttons for product pages. No external scripts, pure HTML/CSS with inline SVG icons. Supports Facebook, Twitter/X, Pinterest, Email, and copy link.

Category: Product Compatibility: All OS 2.0 Themes Updated: Feb 2026

snippets/plynthr-social-share.liquid

{% comment %}
  Plynthr — Social Share Buttons
  https://plynthr.com/snippets/social-share-buttons/

  INSTALL:
  1. Create snippets/plynthr-social-share.liquid
  2. Paste this code
  3. Add {%- render 'plynthr-social-share' -%} on your product page
{% endcomment %}

<style>
  .plynthr-share {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
  }

  .plynthr-share__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--plynthr-share-label, #999);
    margin-right: 4px;
  }

  .plynthr-share a, .plynthr-share button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--plynthr-share-bg, #f5f5f5);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: var(--plynthr-share-icon, #666);
  }

  .plynthr-share a:hover, .plynthr-share button:hover {
    background: var(--plynthr-share-hover-bg, #e5e5e5);
    color: var(--plynthr-share-icon-hover, #333);
    transform: translateY(-2px);
  }

  .plynthr-share svg { width: 16px; height: 16px; }
</style>

{%- if template.name == 'product' -%}
  {%- assign share_url = canonical_url | url_encode -%}
  {%- assign share_title = product.title | url_encode -%}
  {%- assign share_image = product.featured_image | image_url: width: 600 | url_encode -%}

  <div class="plynthr-share">
    <span class="plynthr-share__label">Share</span>

    <!-- Facebook -->
    <a href="https://www.facebook.com/sharer/sharer.php?u={{ share_url }}" target="_blank" rel="noopener" aria-label="Share on Facebook">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>
    </a>

    <!-- Twitter/X -->
    <a href="https://twitter.com/intent/tweet?url={{ share_url }}&text={{ share_title }}" target="_blank" rel="noopener" aria-label="Share on X">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 4l6.5 8.5L4 20h2l5.5-6.4L16 20h4l-7-9 6-7h-2l-5 5.8L8 4H4z"/></svg>
    </a>

    <!-- Pinterest -->
    <a href="https://pinterest.com/pin/create/button/?url={{ share_url }}&media={{ share_image }}&description={{ share_title }}" target="_blank" rel="noopener" aria-label="Share on Pinterest">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12c0 4.25 2.67 7.9 6.44 9.34-.09-.78-.17-1.99.04-2.85.18-.77 1.2-5.08 1.2-5.08s-.3-.61-.3-1.52c0-1.42.83-2.49 1.85-2.49.88 0 1.3.66 1.3 1.44 0 .88-.56 2.19-.85 3.41-.24 1.02.51 1.85 1.52 1.85 1.82 0 3.22-1.92 3.22-4.69 0-2.45-1.76-4.17-4.27-4.17-2.91 0-4.62 2.18-4.62 4.44 0 .88.34 1.82.76 2.34.08.1.09.19.07.29l-.29 1.14c-.04.18-.15.22-.34.13-1.26-.59-2.05-2.42-2.05-3.9 0-3.17 2.3-6.08 6.65-6.08 3.49 0 6.2 2.49 6.2 5.81 0 3.47-2.19 6.26-5.22 6.26-1.02 0-1.98-.53-2.31-1.16l-.63 2.4c-.23.88-.85 1.98-1.26 2.65A10 10 0 0012 22c5.52 0 10-4.48 10-10S17.52 2 12 2z"/></svg>
    </a>

    <!-- Email -->
    <a href="mailto:?subject={{ share_title }}&body=Check%20this%20out%3A%20{{ share_url }}" aria-label="Share via email">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
    </a>

    <!-- Copy link -->
    <button type="button" aria-label="Copy link" onclick="navigator.clipboard.writeText(window.location.href);this.innerHTML='&#10003;';setTimeout(()=>this.innerHTML='<svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;><rect x=&quot;9&quot; y=&quot;9&quot; width=&quot;13&quot; height=&quot;13&quot; rx=&quot;2&quot;/><path d=&quot;M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1&quot;/></svg>',1500)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
    </button>
  </div>
{%- endif -%}

Installation

In your Shopify admin, go to Online Store → Themes → Edit Code
Under Snippets, click "Add a new snippet"
Name it plynthr-social-share
Paste the code above and save
Open your product template (e.g., sections/main-product.liquid)
Add {%- render 'plynthr-social-share' -%} where you want the share buttons (usually below the description or Add to Cart)

Customization

--plynthr-share-bg — Button background (default: #f5f5f5)
--plynthr-share-icon — Icon color (default: #666)
--plynthr-share-hover-bg — Hover background (default: #e5e5e5)
Remove or add social platforms by editing the HTML blocks
Change button shapes by modifying border-radius (try 8px for rounded squares)

Want this installed for you?

I'll add this to your Shopify store, test it, and make sure it's working perfectly. Done within 24 hours.

Install for Me — $29

✓ Installed & tested ✓ Within 24 hours ✓ Any OS 2.0 theme

FAQ

Can I add more social networks?

Yes. Copy any link block and update the URL and SVG icon. Popular additions include LinkedIn, WhatsApp, and Telegram.

Why no external scripts?

External share SDKs add weight and require cookie consent in some regions. These native share links work everywhere with zero overhead.

Does the copy link button work on all browsers?

The navigator.clipboard API works in all modern browsers. On older browsers, it will fail silently.

Social Share Buttons

Installation

Customization

Want this installed for you?

FAQ

Related Snippets