Skip to content

Instantly share code, notes, and snippets.

@cshold
Created June 11, 2014 19:00
Show Gist options
  • Select an option

  • Save cshold/65b72bc0aadbc2c2c622 to your computer and use it in GitHub Desktop.

Select an option

Save cshold/65b72bc0aadbc2c2c622 to your computer and use it in GitHub Desktop.
A snippet for social sharing buttons in a Shopify theme. Notice the use of theme settings to show/hide each button.
{% comment %}
This snippet is used to showcase each collection during the loop,
'for product in collection.products' in list-collections.liquid.
{% endcomment %}
{% assign shareCountClass = '' %}
{% if template contains 'article' or template contains 'blog' %}
{% capture permalinkURL %}{{ shop.url }}{{ article.url }}{% endcapture %}
{% unless settings.social_sharing_count %}
{% assign shareCountClass = 'no-count' %}
{% endunless %}
{% elsif template contains 'product' %}
{% capture permalinkURL %}{{ shop.url }}{{ product.url }}{% endcapture %}
{% unless settings.social_sharing_count %}
{% assign shareCountClass = 'no-count' %}
{% endunless %}
{% endif %}
<div class="social-sharing {{ shareCountClass }}" data-permalink="{{ permalinkURL }}">
{% if settings.share_facebook %}
<a target="_blank" href="//www.facebook.com/sharer.php?u={{ permalinkURL }}" class="share-facebook">
<span class="icon icon-facebook"></span>
<span class="share-title">Share</span>
<span class="share-count">0</span>
</a>
{% endif %}
{% if settings.share_twitter %}
<a target="_blank" href="//twitter.com/share?url={{ permalinkURL }}" class="share-twitter">
<span class="icon icon-twitter"></span>
<span class="share-title">Tweet</span>
<span class="share-count">0</span>
</a>
{% endif %}
{% if template contains 'product' %}
{% if settings.share_pinterest %}
<a target="_blank" href="//pinterest.com/pin/create/button/?url={{ permalinkURL }}&amp;media={{ product.featured_image | product_img_url: 'original' }}&amp;description={{ product.title | escape }}" class="share-pinterest">
<span class="icon icon-pinterest"></span>
<span class="share-title">Pin it</span>
<span class="share-count">0</span>
</a>
{% endif %}
{% if settings.share_fancy %}
<a target="_blank" href="http://www.thefancy.com/fancyit?ItemURL={{ permalinkURL }}&amp;Title={{ product.title }}&amp;Category=Other&amp;ImageURL={{ product.featured_image | product_img_url: 'original' }}" class="share-fancy">
<span class="icon icon-fancy"></span>
<span class="share-title">Fancy</span>
</a>
{% endif %}
{% endif %}
{% if settings.share_google %}
<a target="_blank" href="//plus.google.com/share?url={{ permalinkURL }}" class="share-google">
<!-- Cannot get Google+ share count with JS yet -->
<span class="icon icon-google"></span>
<span class="share-count">+1</span>
</a>
{% endif %}
</div>
@vanbara

vanbara commented Nov 15, 2017

Copy link
Copy Markdown

Good work. Thank you!

@Kapil-patidar-patidar

Copy link
Copy Markdown

How to share product in instagram, please share code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment