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.
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).
var ProductGlobalPrice = “%%GLOBAL_ProductPrice%%”;
Next, open the ProductImagePopup.html panel and put this line near the title section:
<div style=”position: absolute; left: -99999px;”>
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!