Pinterest: Rich Pins for Products

Rich Pins for ProductsRich Pins allow merchants to share additional details about their products with Pinterest users.  Similar to a Google Product Listing Ad, the Rich Pin contains product attributes, such as Title, Brand, UPC, Description, Price, URL and Availability.  A comprehensive list of supported attributes can be found at:

http://developers.pinterest.com/rich_pins/

When pinners find something they love on Pinterest, they often want to act on it…That’s why we’re making pins better by including automatically updated details like prices, availability…”  – pinterest.com

Implementing Rich Pins In ShopSite

In this post, we’ll focus on incorporating Rich Pins in ShopSite using Semantic Markup.  This is the simplest integration method available and is based on Facebook’s Open Graph framework.

Semantic Markup only supports one product per page.  Thus, we’ll be incorporating our Rich Pins on Product More Information pages only.

To get started, paste the code below into the [– DEFINE MORE_INFO_PAGE –] section of your ShopSite product template.  The code must be placed between the <head></head> tags.

<meta property="og:title" content="[-- PRODUCT.MoreInformationTitle --]" />
<meta property="og:description" content="[-- PRODUCT.MoreInformationMetaDescription --]" />
<meta property="og:type" content="product" />
<meta property="og:url" content="[-- PRODUCT.MoreInfoURL --]" />
<meta property="og:site_name" content="[-- STORE.Name --]" />
[-- IF PRODUCT.SaleAmount --]
[-- IF PRODUCT.SaleOn --]
<meta property="og:price:amount" content="[-- PRODUCT.SaleAmount --]" />
[-- ELSE --]
<meta property="og:price:amount" content="[-- PRODUCT.Price --]" />
[-- END_IF --]
[-- ELSE --]
<meta property="og:price:amount" content="[-- PRODUCT.Price --]" />
[-- END_IF --]
<meta property="og:price:currency" content="USD" />
<meta property="og:availability" content="in stock" />

Optionally, the og:availability property can be set to the “Google Shopping/Merchant Center Feed” Availability field (as shown below).

<meta property=”og:availability” content=”[– Product.GoogleAvailability –]” />

Note, that we’re not including all possible fields above.  You can add more Pinterest supported attributes as necessary.

After completing your template changes, a full site regeneration will be necessary (Utilities > Publish > Regeneration).

caution_smallCAUTION: If you’re using a tag where the value contains double-quotes, you’ll want to remove them before adding this code (will break the product page).  If quotes are critical to your TITLE or META DESCRIPTION values and you’re a hosting client of LexiConn, let us know and we’ll install the appropriate code to support them!

Validation

After reviewing the Rich Pins code generated on your product pages, you can validate them at:

http://developers.pinterest.com/rich_pins/validator/

It’s not necessary to validate all pages (though you certainly can).

Pinterest Validation

(click to enlarge)

Site Approval

Once you’ve validated one or more pages, you’ll be able to apply for full site approval.  This is done by clicking on the ‘Apply Now’ link, which is displayed after you’ve successfully validated a page.

That’s it! :)

Photo Credit

Leave a Reply