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

mmstudio
Excursionist
19 0 4

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

Reply 1 (1)

annalou
New Member
6 0 0

hi. I just wondered if you found how to get the save/pin button for Pinterest to work? I have added the code onto my website and the pin button is showing up but it’s not opening up another window to be able to allow people to save it to their Pinterest boards. if you are able to help I’d be so grateful