Skip to content

Instantly share code, notes, and snippets.

@cshold
Created June 11, 2014 19:00
Show Gist options
  • Save cshold/65b72bc0aadbc2c2c622 to your computer and use it in GitHub Desktop.
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>
@fufales
Copy link

fufales commented Jul 27, 2017

Hello, how can i active those buttons? i dont see my settings

@vanbara
Copy link

vanbara commented Nov 15, 2017

Good work. Thank you!

@Kapil-patidar-patidar
Copy link

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