Shopify themes, liquid, logos, and UX
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 }}&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
User | RANK |
---|---|
181 | |
159 | |
75 | |
36 | |
33 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023