Review Display Configurations

[CommunityJedi22]

This document gives you instructions for implementing Vertical Pagination and the Condensed Review List on your Product Detail Pages (PDPs).

If you need an overview of these features and their benefits before you start implementing, please refer to our main Review List Configuration Options documentation.

Vertical Pagination

Vertical pagination replaces the standard "Previous" and "Next" links with a single "+ Show More Reviews" button, loading more reviews as users scroll.

Previewing Vertical Pagination

To quickly see how vertical pagination would look on your site without making any code changes:

1. Go to any Product Detail Page (PDP) that currently displays reviews.
2. Add this to the PDP's URL:

   ?REVIEW_DISPLAY_PAGINATION_TYPE=VERTICAL

3. For example:

   https://www.prdemostore.com/collections/food-beverage/products/armitage-hazelnut-ganache-truffles?RE...

   * Tip: If the URL already contains a question mark (?), use an ampersand (&) instead of a second question mark. For example: https://www.example.com/product?id=123&REVIEW_DISPLAY_PAGINATION_TYPE=VERTICAL

4. Press Enter to reload the page. The vertical pagination style will now be active for you to preview.

Implementing Vertical Pagination

Recommended Method (No Code Needed): The simplest way to turn on vertical pagination across your entire site is to contact your PowerReviews Customer Success Manager or Implementation Team. They can enable this setting globally for your merchant ID(s) without any development work required on your part.

JavaScript Implementation: If you prefer to implement vertical pagination directly via your JavaScript configuration, add the following parameter within the pwr("render", { ... }) call:

REVIEW_DISPLAY_PAGINATION_TYPE: 'VERTICAL'

Example Code Snippet:

<script>
  window.pwr = window.pwr || function () {
    (pwr.q = pwr.q || []).push(arguments);
  };
  pwr("render", {
    api_key:'<YOUR_API_KEY>', // Provided by PowerReviews
    locale: '<YOUR_LOCALE>', // Provided by PowerReviews
    merchant_group_id: '<YOUR_MERCHANT_GROUP_ID>', // Provided by PowerReviews
    page_id: '<YOUR_PAGE_ID>', // The unique ID for the product
    review_wrapper_url: '<YOUR_REVIEW_WRAPPER_URL>', // Your wrapper URL
    REVIEW_DISPLAY_PAGINATION_TYPE:'VERTICAL', // Add this line for vertical pagination
    components: {
      ReviewDisplay: 'pr-reviewdisplay'
    }
  });
</script>

Note on Placeholders: Make sure to replace the bracketed placeholders (e.g., <YOUR_API_KEY>) with your specific PowerReviews integration values. Your API Key, Locale, Merchant Group ID, and Merchant ID are all provided by PowerReviews.

Condensed Review List

The Condensed Review List shows a more compact version of reviews. It initially displays just the key details, with the full review available by clicking a "[+]" button.

Previewing Condensed Review List

To quickly see how the condensed review list would look on your site without making any code changes:

1. Go to any Product Detail Page (PDP) that currently displays reviews.
2. Add this to the PDP's URL:

   ?REVIEW_DISPLAY_LIST_TYPE=CONDENSED

3. For example:

   https://www.prdemostore.com/collections/food-beverage/products/armitage-hazelnut-ganache-truffles?RE...

   * Tip: If the URL already contains a question mark (?), use an ampersand (&) instead of a second question mark. For example: https://www.example.com/product?id=123&REVIEW_DISPLAY_LIST_TYPE=CONDENSED

4. Press Enter to reload the page. The condensed review list will now be active for you to preview.

Implementing Condensed Review List

Recommended Method (No Code Needed): The simplest way to enable the condensed review list across your entire site is to contact your PowerReviews Customer Success Manager or Implementation Team. They can enable this setting globally for your merchant ID(s) without any development work required on your part.

JavaScript Implementation: If you prefer to implement the condensed review list directly via your JavaScript configuration, add the following parameter within the pwr("render", { ... }) call:

REVIEW_DISPLAY_LIST_TYPE: 'CONDENSED'

Example Code Snippet:

<script>
  window.pwr = window.pwr || function () {
    (pwr.q = pwr.q || []).push(arguments);
  };
  pwr("render", {
    api_key:'<YOUR_API_KEY>', // Provided by PowerReviews
    locale: '<YOUR_LOCALE>', // Provided by PowerReviews
    merchant_group_id: '<YOUR_MERCHANT_GROUP_ID>', // Provided by PowerReviews
    page_id: '<YOUR_PAGE_ID>', // The unique ID for the product
    review_wrapper_url: '<YOUR_REVIEW_WRAPPER_URL>', // Your wrapper URL
    REVIEW_DISPLAY_LIST_TYPE:'CONDENSED', // Add this line for a condensed review list
    components: {
      ReviewDisplay: 'pr-reviewdisplay'
    }
  });
</script>

Note on Placeholders: Make sure to replace the bracketed placeholders (e.g., <YOUR_API_KEY>) with your specific PowerReviews integration values. Your API Key, Locale, Merchant Group ID, and Merchant ID are all provided by PowerReviews.