I bet you’re familiar with Pinterest, it’s really hot these days. Pinterest is one of the fastest growing and addictive social channels on the internet right now. If you run a web store, you might have wanted to put Pinterest buttons on products pages to get more traffic to your site. Here’s a quick tutorial that will show you how to add a “Pin it” button right to a product image, so that visitors can easily share your picture on their Pinterest.

First of all, you need to find media.phtml file. You can find it in this directory:

app/design/frontend/default/your_theme/template/catalog/product/view

“your_theme” is the name of the theme that you are using.

We’ll put the “Pin it” button in this place:

After finding out the media.phtml file, you can open it and find the following piece of code:

<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>[xml]
Then insert the code below:
[xml]<?php
$pin_url = urlencode( $this->helper('core/url')->getCurrentUrl() );
$pin_media = urlencode( $this->helper('catalog/image')->init($_product, 'image') );
$pin_description = urlencode( $_product->getShortDescription() ) . " $" . urlencode( number_format( $_product->getPrice(),2 ) );
?>

<div class="Pinterest">
<a href="http://pinterest.com/pin/create/button/?url=<?php echo $pin_url; ?>&media=<?php echo $pin_media; ?>&description=<?php echo $pin_description; ?>" class="pin-it-button" count-layout="horizontal">
Pin It
</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
</div>

After completing all the steps above, you will see the Pin It button appearing in your product page. When shoppes click on “Pin it” button, a Pinterest dialog box will be opened for them to share the image to their Pinterest Board.

As always, drop your comments below if you have any questions.

Just one more thing: Have you known Magestore’s Pinterest? Don’t forget to follow us if you have any interest.

Happy Pinning!

Related Tutorials: