This article discusses how to implement Category Snippets on your product listing pages (PLPs), also known as product category or collection pages. To learn more about Category Snippets, click here. To learn more about validating your Category Snippets implementation, click here. 



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 beneath each product name:


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 three Category Snippets and is meant to illustrate how you should structure your Category Snippet data. You are not limited to three Category Snippets, 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", [{
 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_1',
   components: {
      CategorySnippet: 'category-snippet-1',
 }
   },
   {
 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_2',
   components: {
      CategorySnippet: 'category-snippet-2',
 }
   },
   {
 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_3',
   components: {
      CategorySnippet: 'category-snippet-3',
 }
   }
   ]);
</script>

 

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

Field Description Requirements Example Additional Notes
api_key Your API key This value is provided to you by PowerReviews ec8f9acb-be0e-489b-a6ff-3eed3811025e  
locale Your Locale This value is provided to you by PowerReviews en_US  
merchant_group_id Your Merchant Group ID This value is provided to you by PowerReviews 49047  
merchant_id Your Merchant ID This value is provided to you by PowerReviews 7751057291  
page_id

The unique identifier at the parent level; typically the master product ID, SKU, style number, etc.

The page_id is determined by you

This field can include up to 50 alphanumeric characters

page_id values are case sensitive

Hyphens (-) and underscores ( _ ) can be used

 7751057291 Reviews always roll up to the page_id. For example, if you have a jacket that comes in different colors, the page_id value must be common across all colors in order for them to display in a single Review Display.

 

Multiple Render Functions

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.