May 10, 2013 | Paul Gibson

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

fix-polyvore-clipper.jpgYou 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.

Maggie Bags on PolyvoreHowever, 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”>


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



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.

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


Subscribe to our blog!


Paul Gibson

Paul Gibson

As the leader of our design team, VIEO Design principal and founder Paul Gibson oversees our designers and developers as they create marketing-optimized websites, digital graphics, and print materials. Paul also oversees VIEO's 3D printing division. To date, his most impressive project has been a replacement head for an old My Little Pony. He went with Yoda.

Related Post: