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:
- Go to any Product Detail Page (PDP) that currently displays reviews.
-
Add this to the PDP's URL:
?REVIEW_DISPLAY_PAGINATION_TYPE=VERTICAL -
For example:
* 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 - 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:
- Go to any Product Detail Page (PDP) that currently displays reviews.
-
Add this to the PDP's URL:
?REVIEW_DISPLAY_LIST_TYPE=CONDENSED -
For example:
* 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 - 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.