Polyvore Clipper Not Working in Bigcommerce? Here’s How to Fix It.

Pinterest

How to Fix the Polyvore Clipper in Bigcommerce

You may not have heard of Polyvore (yet), but if you or your clients sell clothing or accessories, you will.

Like Pinterest, Polyvore is a highly visual social medium, and they are among the pioneers in the new territory of social commerce. Currently, Polyvore’s biggest foothold is in the style community, because it allows users to create and share virtual outfits. Polyvore can then send users directly into an ecommerce site to purchase the items that make up the outfit, making it an ideal way to funnel into your store.

Polyvore accomplishes this by use of the “clipper,” which is just a javascript shortcut that a user can drag to their bookmarks (similar to the way the Amazon Wishlist or Instagram shortcuts work). The clipper then pulls a selection of images and a price from the product page a person is viewing.

Polyvore Clipper

However, if your ecommerce site uses Bigcommerce,  Polyvore’s clipper may be having trouble capturing the price as well as the image, and social media statistics demonstrate that including the price has a significant impact on clicks and purchases. But we’ve fixed it!

The panels and snippets that are used in Bigcommerce templates include native HTML that is structured in a way that makes it difficult for the Polyvore clipper to capture the price. Polyvore determines a product’s price by examining the HTML surrounding the image you’ve selected. When you are viewing the “slideshow” of product images of a particular product, you are actually looking at an iframe containing the ProductImagePopup.html panel. This panel does not contain the price in the HTML anywhere, nor does it allow the %%GLOBAL_ProductPrice%% variable to be accessed (for some odd reason).

The quick and dirty way around this is to manually include the price in the image description. Of course, that breeds a whole new set of problems when you change a product price. Until Bigcommerce allows the %%GLOBAL_ProductPrice%% variable to be accessed in that panel, you’ll have to use the following javascript fix.

First, open the ProductDetails.html panel and place this line of javascript inside the script tags:

var ProductGlobalPrice = “%%GLOBAL_ProductPrice%%”;

Next, open the ProductImagePopup.html panel and put this line near the title section:

<div style=”position: absolute; left: -99999px;”>

<script type=”text/javascript”>

//<![CDATA[

document.write(‘Price:’ + parent.ProductGlobalPrice);

//]]>

</script></div>

The CSS there just offsets the price so it doesn’t show up in the description area. If you WANT it to show up, you can leave that part out.

Thats it! Your Polyvore clipper should work perfectly now.

Check back here for more web design and development tips, weird things we find on the Internet, and local color. Say Hi in the comments below!

You can also find us on Facebook, Twitter, and LinkedIn. We’d love to hear from you!

Paul Gibson
As the VIEO Design art director and lead designer, Paul spends most of his time knee-deep in Photoshop or CSS. Paul is a loving husband and an amazing craftsman. His hobbies include forging knives, flying RC planes, marksmanship, and working on his 1978 Chevy c10.