Pinterest

This topic applies to

Applies to

SuiteCommerce Web Stores

SuiteCommerce Advanced supports Product Rich Pins from Pinterest in the product details page. By default, shoppers can point to an image and then click the Pinterest icon or click the Pinterest button in the cart details region. The Pinterest entry automatically populates with item details such as the product image, pricing, or availability.

The data collection method used for Pinterest is Open Graph semantic markup. With this method, product metadata is included in the HTML header of the product page. The following metadata tag mappings for Pinterest are defined in the SC.Shopping.Configuration.js file in the ShoppingApplication@x.x.x module:

metaTagMapping: {         
         // [Open Graph](http://ogp.me/)
         'og:title': seo_title
      ,   'og:type': seo_type
      ,   'og:url': seo_url
      ,   'og:image': seo_image
      ,   'og:site_name': seo_site_name
      ,   'og:description': seo_description         
      ,   'og:provider_name': seo_provider_name
      ,   'og:price:standard_amount': seo_price_standard_amount
      ,   'og:price:currency': seo_price_currency
      ,   'og:availability': seo_availability

For more information and details on supported fields, refer to the Pinterest developer documentation at Pinterest Rich Pins Overview.

The following screenshot shows Open Graph data collected in the HTML header output.

Configure Pinterest

You can edit Pinterest settings by creating a custom ShoppingApplication@x.x.x module and making your changes to the SC.Shopping.Configuration.js file. You can enable Pin It Hover or the Pin It button or both options. Other configuration options are available as shown in the following code snippet. For detailed instructions on creating a custom SuiteCommerce Advanced Module see Customize and Extend Core SuiteCommerce Advanced Modules in the SuiteCommerce Advanced Developer’s Guide

// hover_pin_it_buttons
   ,   hover_pin_it_button: {
         enable_pin_it_hover: true
      ,   enable_pin_it_button: true
      ,   image_size: 'main' // Select resize id to show on Pintrest
      ,   popupOptions: {
            status: 'no'
         ,   resizable: 'yes'
         ,   scrollbars: 'yes'
         ,   personalbar: 'no'
         ,   directories: 'no'
         ,   location: 'no'
         ,   toolbar: 'no'
         ,   menubar: 'no'
         ,   width: '680'
         ,   height: '300'
         ,   left: '0'
         ,   top: '0'
         }
      }

Important

Within the SC.Shopping.Configuration.JS file, there is also a Pinterest setting within the addThis.servicesToShow function. Enable Pinterest using the hover_pin_it_button function instead of the addThis.servicesToShow function. Due to the single page configuration of SuiteCommerceAdvanced, enabling Pinterest from the addThis function can result in incorrect product information displayed in the users Pinterest board.


Validate Rich Pins

You must validate your rich pins and apply to have Pinterest enable them. To validate your Pinterest Rich Pins, use the Rich Pins Validator tool on the Pinterest developer’s site. To use this tool, enter the URL for the product to test. The validator returns a success or error message. If the test is successful, the validator displays the item details that are used for pinning that product.

After the pin is validated, you must click the Apply now button to verify your domain. The domain field will be automatically populated with your domain. After your domain is verified, your pins will show on Pinterest within the hour.

Note

You need to validate and click the apply button for only one link on your site. This validation applies to all pins on your site.