Adding Reviews and Category Snippets (PDPs)

This article discusses how to implement Reviews and Category Snippets on your product detail pages (PDPs). To learn more about the Review Display and its features, click here. To learn more about Category Snippets, click here.

Components

The Review and Category Snippet components include:

• ReviewSnippet - Shows the aggregate rating and review count. You will install this above the fold.
• ReviewDisplay - Shows the Review Snapshot and Review List of individual customer reviews. You will install this below the fold.
• Category Snippets - Can be used on related/recommended product sections or carousels on a PDP. These include the aggregate review count.

You must also create div containers to house the PowerReviews content on your PDPs.

Installations Steps

1. Ensure you have your Account Credentials, which can be found in your Implementation Project Workbook. If you do not have these in hand, please reach out to your Implementation Team.
2. Install your content containers:

• Install the Review Snippet container
  Example: <div id="pr-reviewsnippet"></div>
  
  
• Install the Review Display container
  Example: <div id="pr-reviewdisplay"></div>
  
  

• Install the Category Snippet containers

  Example:

  <div id="category-snippet-1"></div>

  <div id="category-snippet-2"></div>

  <div id="category-snippet-3"></div>

3. Install the PowerReviews ui.js library and render function. Load the ui.js file before making the function call in the body of the page. This function should be placed at the bottom of the page after all content containers.

The sample code below includes only one Category Snippet and is meant to illustrate how you should structure your Category Snippet data. You are not limited to one Category Snippet, and can add more if needed.

<script src="https://ui.powerreviews.com/stable/4.1/ui.js" async></script>

<script>
 window.pwr = window.pwr || function () {
  (pwr.q = pwr.q || []).push(arguments); 
 };
 pwr("render", {
   api_key: 'API_KEY',
   locale: 'LOCALE',
   merchant_group_id: 'MERCHANT_GROUP_ID',
   merchant_id: 'MERCHANT_ID',
   page_id: 'PAGE_ID',
   review_wrapper_url: 'WRAPPER_URL',
   components: {
      ReviewSnippet: 'pr-reviewsnippet',
      ReviewDisplay: 'pr-reviewdisplay'
   }
  },
      ENABLE_CLIENT_SIDE_STRUCTURED_DATA: false,
      api_key: 'API_KEY',
      locale: 'LOCALE',
      merchant_group_id: 'MERCHANT_GROUP_ID',
      merchant_id: 'MERCHANT_ID',
      page_id: 'PAGE_ID',
      components: {
         CategorySnippet: 'category-snippet-1',
     }
   }]);</script>

4. Replace the values for the following required variables with your specific information.

Multiple Render Functions and Performance

The render function can only be called once on each page, so if you find yourself needing to call it separately in different parts of your code, build an array and call the render function on that array.

For an additional performance enhancement, include the parameter enable_content_collection_modal and set it to false if the modal is not being used.

Products That Have Zero Reviews

If you currently have no reviews for a product, an empty Review Display appears. You can modify the way this empty display renders using your own CSS to style the pr-no-reviews class found in the pr-review-snippet-container, or the pr-rd-no-reviews class for the entire display. For more information on CSS styling guidelines, see Customizing Your PowerReviews Platform.