Social Media eCommerce: Maximizing Your Business Growth
(With Clean Titles, Descriptions & Correct Previews)

Social sharing should be easy—for you and your readers.

Adding social share buttons to your Shopify blog posts helps your content reach more people on platforms like Twitter/X, WhatsApp, Facebook, and email. But if it’s done incorrectly, you may run into problems like broken links, missing domains, or HTML tags showing up in shared text.

In this guide, you’ll learn how to add clean, reliable social share buttons to your Shopify blog posts using simple copy-paste code. We’ll also show you how to ensure your shared links display the right title, description, and image every time.

This tutorial works perfectly with Dawn and most Online Store 2.0 themes.

Why social sharing on blog posts matters

When readers share your blog content:

  • Your posts reach new audiences organically
  • You build credibility and trust through social proof
  • You drive long-term traffic back to your Shopify store

Clean previews matter. If your shared link looks broken or messy, people are far less likely to click.

This guide helps you avoid those issues from the start.

Where to add the share buttons

In Shopify, blog posts are controlled by article templates or sections.

Most modern themes (including Dawn) use one of these files:

  • sections/main-article.liquid
  • sections/article-template.liquid
  • A snippet included inside the article section

How to find it

  1. Go to Online Store → Themes
  2. Click ⋯ → Edit code
  3. Open the Sections folder
  4. Look for a file related to articles or blog posts
  5. Find where {{ article.content }} appears

Tip: The social share buttons should be added below the article content.

Basic social share buttons (copy-paste code)

Start with this simple block.


<div class="article-share">
  {% assign share_url = canonical_url | url_encode %}

  <a href="https://twitter.com/intent/tweet?url={{ share_url }}" target="_blank" rel="noopener">
    Share on X
  </a>

  <a href="https://api.whatsapp.com/send?text={{ share_url }}" target="_blank" rel="noopener">
    Share on WhatsApp
  </a>

  <a href="https://www.facebook.com/sharer/sharer.php?u={{ share_url }}" target="_blank" rel="noopener">
    Share on Facebook
  </a>

  <a href="mailto:?subject={{ article.title | url_encode }}&body={{ share_url }}">
    Share via Email
  </a>
</div>

Why this works

  • canonical_url ensures the full website domain is included
  • url_encode prevents broken or malformed links
  • Each platform uses its official sharing URL

At this stage, your buttons work—but we can make the shared text much cleaner.

Using a clean title and plain-text description

Social platforms don’t handle HTML well. If your blog content includes tags or formatting, those can accidentally appear in shared text.

Step 1: Create clean share variables


{% assign share_title = article.title | strip | url_encode %}

{% assign share_desc = article.excerpt_or_content
  | strip_html
  | strip_newlines
  | strip
  | truncate: 160
  | url_encode
%}

Why this matters

  • Removes HTML tags
  • Prevents broken line spacing
  • Keeps descriptions readable and social-friendly
  • Avoids preview glitches

Step 2: Update Twitter/X and WhatsApp share links


<a href="https://twitter.com/intent/tweet?text={{ share_title }}%20-%20{{ share_desc }}&url={{ share_url }}" target="_blank" rel="noopener">
  Share on X
</a>

<a href="https://api.whatsapp.com/send?text={{ share_title }}%0A{{ share_desc }}%0A{{ share_url }}" target="_blank" rel="noopener">
  Share on WhatsApp
</a>

Now your shared messages look clean, readable, and consistent across devices.

Adding the main image, title, and description for social previews

Social platforms generate link previews using Open Graph meta tags, not your share buttons.

These tags control:

  • Preview image
  • Title
  • Description

They should be placed in your theme’s <head> section.

Where to add Open Graph tags

  • layout/theme.liquid
  • Or an SEO/meta snippet loaded inside the <head>

Step 1: Set the main image (with fallback)


{% if article.image %}
  {% assign share_image = article.image | image_url: width: 1200 %}
{% else %}
  {% assign share_image = settings.share_image | image_url: width: 1200 %}
{% endif %}

Step 2: Add Open Graph meta tags


<meta property="og:type" content="article">
<meta property="og:title" content="{{ article.title | escape }}">
<meta property="og:description" content="{{ article.excerpt_or_content | strip_html | truncate: 160 | escape }}">
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:image" content="{{ share_image }}">

This ensures the correct preview image, title, and description appear when your blog is shared.

Testing your share buttons

Always test before publishing.

  • Click each share button on desktop and mobile
  • Confirm the URL includes your full domain
  • Make sure the text is clean and readable
  • Verify the preview image and description

Optional tools: Facebook Sharing Debugger and X (Twitter) Card Validator can help refresh cached previews.

Final thoughts

You now have:

  • Social share buttons for X, WhatsApp, Facebook, and email
  • Clean titles and plain-text descriptions
  • Full URLs with proper domains
  • Reliable social previews with the right image

Add this setup to all your blog posts and keep descriptions concise and engaging. Small improvements like this can quietly drive consistent traffic to your Shopify store.

Back to blog

Categories

Recent Posts