Dawn theme - how to add Pinterest pin-it button to product images

mmstudio
Tourist
4 0 1

Hello - I'm trying to add the 'Pin-It' Pinterest button to product images that appear when the mouse is moved over them.  I've tried two methods: 1) adding the code below to the theme.liquid file and 2) creating a custom liquid entry in product page template.  In the first case the 'pin-it' image appeared on every image on my site - my banner, about, etc which isn't really what I'm looking for.  The second option created the Pin-It as a block on the page, not on the image itself.  I've also created a liquid snippet with this code, but not sure where to place it to have it provide the desired effect.   

 

1) theme.liquid code

<script async defer data-pin-hover="true" data-pin-tall="true" data-pin-round="true" data-pin-save="false" src="//assets.pinterest.com/js/pinit.js"></script>

 

2) custom liquid for product template

<a href="//pinterest.com/pin/create/button/?url={{ shop.url }}{{ product.url }}&amp;media=http:{{ product | img_url: '1024x1024' | split: '?' | first }}&amp;description={{ product.title | strip_html | truncate: 200, '' | url_param_escape }}{% for tag in product.tags limit: 3 %}{{ tag | replace: ' ', '-' | prepend: ' #' | url_param_escape }}{% endfor %}" data-pin-do="buttonPin" data-pin-config="none">
  <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>
<script async src="//assets.pinterest.com/js/pinit.js"></script>

 

 

My site is https://michelle-masters-topiary-art.myshopify.com

 

Password:  auggul2

Replies 0 (0)