PrestaShop: Adding a Pinterest Pin-It Button to Your Products

April 22, 2013

Pinterest is a fantastic way to promote your Prestashop products, and by adding a ‘Pin It’ button to your product pages it will give visitors an easy way to post your product image into Pinterest and allowing you more promotion.

Adding a Pinterest Pin-It button is fairly easy to do. Really you should use a module to properly extend Prestashop. What I am describing here is a small code hack, so you should understand the following:

1) If you subsequently update your Prestashop or Theme you may overwrite the code changes.

2) BEFORE starting, take a backup of at least the file you are going to edit. Then if there’s a problem you can always revert back to the original.

3) You do this at your own risk and don’t blame me! I actually modified my daughters website (HansGems.co.uk), so it worked for me on Prestashop version 1.5.

What I’m doing here is adding a little code to the Smarty Template, so it’s not actually PHP.

You don’t need a Pinterest account to do this as it is the visitor who is pinning the image to their account, but Pinterest is a useful addition to your Social Media assets so sign yourself up. It’s free.

The file I am going to modify is the product.tpl in your /themes/ directory, so you’ll need to know the name of your theme as the file will be in the ../themes/YourThemeName/product.tpl. If you added the twitter button from my post on PrestaShop: Adding a ‘Tweet This’ Button to Your Products, then we are adding the Pinterest Pin-It button next to it in the same section of code.

In the file ../themes/YourThemeName/product.tpl, around line 420:

<div id="more_info_sheets">
 {if $product->description}
 <!-- full description -->
 <div id="idTab1">{$product->description}</div>
 {//if}

Change to:

<div id="more_info_sheets">
{if $product->description}
<!-- full description -->
<div id="idTab1">{$product->description}
 <!-- LK pinterest pin-it mod --> 

 <!-- KEEP THIS ON ONE LINE WITH NO SPACES: -->
 <a href="//pinterest.com/pin/create/button/
 ?url={$link->getProductLink($product)}
 &media={$link->getImageLink($product->link_rewrite, $cover.id_image,
 'large_default')}&description={$product->name}"

  data-pin-do="buttonPin" data-pin-config="beside">

 <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a> 
<!-- end LK pinterest pin-it mod -->
</div>
{/if}

The href line is long and I’ve wrapped it just to fit on this page; the code needs to be on one line so take out the carriage returns and no spaces.

This is what it looked like (from HansGems.co.uk). The button is at the bottom, just after the price.

Pinterest Pin-It button on HansGems.co.uk

2 thoughts on “PrestaShop: Adding a Pinterest Pin-It Button to Your Products

  1. Mike K

    Hello,
    Its great, works like a charm. PS 1.5.4.1.
    Would be useful if you would also add how to have the counter bubble and open it in a new popup page

    1. Les Post author

      You can get Pinterest to open in a new page easily. At the beginning of the code, CHANGE: ‘a href’ TO: ‘a target=”_blank” href’

Comments are closed.