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

Store Design

Topic summary

A user is attempting to add a Pinterest ‘Pin-It’ button that appears on hover over product images in the Dawn theme, but encountering implementation issues.

Methods Tried:

  • Adding Pinterest’s hover script to theme.liquid resulted in the button appearing on all site images (banner, about page, etc.) rather than just product images
  • Creating a custom liquid block in the product page template placed the button as a separate page element instead of overlaying on images
  • Created a liquid snippet but unsure of proper placement

Code snippets provided include Pinterest’s official hover script and a custom implementation attempting to generate pin URLs with product data.

Current Status:
A second user reports similar issues—the pin button displays but doesn’t open the Pinterest save window when clicked, preventing users from actually saving images to their boards. Both users are seeking guidance on proper implementation to achieve the hover-overlay effect specifically on product images.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
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
  1. custom liquid for product template
<a href="//pinterest.com/pin/create/button/?url={{ shop.url }}{{ product.url }}&media=http:{{ product | img_url: '1024x1024' | split: '?' | first }}&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

2

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