1. Commerce
  2. Store Front
  3. Marketing
  4. Communications
  5. Social Media
  6. Pinterest

Pinterest

Commerce web stores support Pinterest Product Rich Pins on your Product Details Pages (PDPs). By default, shoppers can point to an image and then click the Pinterest icon or button in the cart details region. The Pinterest entry automatically populates with item details such as the product image, pricing, and availability.

Pinterest

Pinterest Open Graph

Pinterest uses Open Graph markup for data collection. With this method, product metadata is included in the HTML header of the PDP. The following Open Graph 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 About Rich Pins.

The following screenshot shows Open Graph metadata collected in the HTML header output of a PDP:

Pinterest Rich Pins

Configure Pinterest Properties

To configure Pinterest properties:

  1. Go to Commerce > Websites > Configuration.

  2. Select your website and domain and click Configure.

  3. Go to the Integrations tab and the Pinterest subtab.

  4. Configure the following properties as required:

    • Enable Hover - Check this box to enable the Pinterest Pin It button to hover over an image.

    • Enable Button - Check this box to enable the Pinterest Pin It button to be displayed.

    • Image Size - Enter the Pinterest image size ID to show on Pinterest.

    • Pinterest Popup Status - Select yes to enable the Pinterest popup. Select no to disable it.

    • Pinterest Popup Resizeable - Select yes to make the Pinterest popup resizable. Select no to restrict resizing.

    • Pinterest Popup Scrollbars - Select yes to show scrollbars on the Pinterest popup menu. Select no to hide them.

    • Pinterest Popup Personalbar - Select yes to show a personal bar on the Pinterest popup menu. Select no to hide it.

    • Pinterest Popup Directories - Select yes to show a directories bar on the Pinterest popup menu. Select no to hide it.

    • Pinterest Popup Location - Select yes to show a location bar on the Pinterest popup menu. Select no to hide it.

    • Pinterest Popup Toolbar - Select yest to show a toolbar on the Pinterest popup menu. Select no to hide it.

    • Pinterest Popup Menubar - Select yes to show a menu bar on the Pinterest popup menu. Select no to hide it.

    • Pinterest Popup Width - Enter the width (in pixels) of the Pinterest popup.

    • Pinterest Popup Height - Enter the height (in pixels) of the Pinterest popup.

    • Pinterest Popup Top - Enter the top offset (in pixels) of the Pinterest popup.

    For more information about the Pinterest configurable properties, see Pinterest Subtab.

  5. Click Save.

To configure Pinterest properties (SuiteCommerce Advanced pre-Vinson):

  1. Create a custom ShoppingApplication@x.x.x module to update the SC.Shopping.Configuration.js file. See Develop Your SCA Customization for instructions.

    Note:

    Do not edit the original SC.Shopping.Configuration.js file. See Best Practices for Customizing SCA for information and best practices for customizing JavaScript.

    This task requires developer experience.

  2. You can enable the Pin It Hover or the Pin It button or both options. Other configuration options are available as shown in the following code snippet:

                            // 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:

    The SC.Shopping.Configuration.js file also contains a Pinterest setting within the addThis.servicesToShow function. Due to the single page configuration of SuiteCommerce Advanced, enabling Pinterest from the addThis function can result in incorrect product information displayed in the user’s Pinterest board.

    The AddThis service is no longer available. See addthis.com.

  3. Save and deploy to your website. See Deploy SCA Customizations to NetSuite for more information.

For detailed instructions about creating a custom SuiteCommerce Advanced module, see Develop Your SCA Customization.

Validate Rich Pins

Validate and enable your Pinterest Rich Pins with the Rich Pins Validator tool on the Pinterest developer’s site.

To use the validator tool, enter the URL for the product you want to test and click Validate. The validator returns a success or error message. If the webpage you are applying with is correctly marked-up, an approval message is displayed. If the validator returns an error message, instructions about how to correct your metadata are displayed.

After the pin is validated, 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 appear on Pinterest within the hour.

Note:

You only need to validate one URL to apply for Rich Pins for your entire domain. This validation applies to all pins on your website.

Related Topics

General Notices