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>
@fufales
Copy link
Copy Markdown

fufales commented Jul 27, 2017

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

@vanbara
Copy link
Copy Markdown

vanbara commented Nov 15, 2017

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