Note: Display 3 documentation is provided as a courtesy for clients on this legacy version of PowerReviews. It is no longer supported. We recommend contacting your Account Manager to discuss upgrading to our newer Display 4.1 version as soon as possible.
This article contains the following sections:
- Review Snippet
- Review Display with Snapshot
- Using the CSS Override File
- Styling the Snippet
- Styling the Review Snapshot
- Responsive Reviews
- Styling the Review Display
- One-Column Layout
Review Snippet
The Review Snippet is a condensed version of review content built to have a smaller footprint on your Web page. The Review Snippet, which includes a summary of the star rating and the number of reviews the product has received, can be used anywhere on your website (category and/or product pages), but is typically shown above the fold (the portion of a Web page that is visible without scrolling) on a Product Detail page so that it is immediately visible to anyone looking at that product.
Review Display with Snapshot
The Review Display includes a Review Snapshot® and all individual customer reviews. The Review Pros, Cons, and Best Uses tags are shown in a column format to make it easy to read at a glance. The Review Display is usually shown below the fold or in a tab on the Product Detail page. Unlike a Review Snippet, the Review Display can be shown only once per Web page. The Review Display is fully responsive, allowing you to leverage review content on everything from desktop to mobile experiences.
Using the CSS Override File
To perform CSS styling of your Review Display form, you create a CSS override file and host it on a publicly accessible Web server. Then in the source code of the Product Display Page, point to the path of the CSS override file using the JavaScript variable pr_style_sheet.
The path you specify for the pr_style_sheet value must be absolute/fully qualified; for example:
var pr_style_sheet = "https://www.yoursite.com/css/my_styles.css";
Styling the Snippet
Review Snippet
The Review Snippet can be customized to display in many different formats. The default version can be styled to display in a more compact manner (see “Compact Snippet,” below) and/or with minimal styling (see “Minimal Snippet” on page .)
Compact Snippet
The compact Snippet is typically used on the product page (outside of the review section) and is commonly located above the fold and near pricing and product detail information.
To display the compact Snippet, add the following CSS rules to your CSS override style sheet:
.pr-snippet-wrapper {
background-color: #FFF;
border: 1px solid #CBCBCB;
}
.pr-snippet-stars {
background: #FFF;
border: none;
float: none;
margin: auto;
width: 110px;
}
.pr-snippet-review-count {
display: none;
}
.pr-snippet-read-write {
background: none;
border: none;
}
.pr-snippet-read-review, .pr-snippet-write-review {
float: none;
}
The parent container controls the width of the Snippet. To explicitly set the width of the Snippet, add a width to the pr-snippet class and add the class to your CSS override style sheet.
Minimal Snippet
The minimal Snippet is typically used on category pages where there are multiple products in view. These Snippets appear alongside the product image and name, and provide a small snapshot of the average star rating along with its numerical average.
To display the minimal snippet, add the following CSS rules to your CSS override style sheet:
.pr-snippet {
background: none;
border: none;
padding: 0;
}
.pr-snippet-stars {
background: none;
border: none;
float: none;
margin: auto;
padding: 0;
width: 110px;
}
.pr-snippet-review-count {
display: none;
}
.pr-snippet-read-write {
display: none;
}
Styling the Review Snapshot
The Review Snapshot is made up of five major sections:
- Snapshot Header
- Rating Summary
- Tag Summary
- Attribute Summary
- Write A Review Link
Snapshot Header
You can customize the Review Snapshot styling so that it matches your website’s look and feel; see this topic’s subsections for details.
The snapshot header contains the Review Snapshot title text and is composed of three main elements:
- .pr-snapshot-head: Background styling for the snapshot header container.
- .pr-snapshot-title: Review Snapshot title.
- .pr-snapshot-cobrand: Link to the our website
Rating Summary
The rating summary provides the overall rating of a product; its elements are:
- .pr-stars: Average star rating for the product.
- .pr-rating: Average numerical rating for the product.
- .pr-snapshot-average-based-on-text: Number of reviews used to compute the star and numeric average ratings.
- .pr-snapshot-consensus-value: Average percentage of reviewers who would recommend this product to a friend.
One of the most popular customizations is to replace the default stars with a custom set to reflect your product and/or brand.
![]() Default Stars |
![]() Custom Stars |
Star Image Requirements
It is very important that your new star images conform to the following requirements:
- GIF format; We recommend using transparency.
- Large star ratings are 112 pixels wide x 250 pixels tall; small star ratings are 83 pixels wide x 195 pixels tall.
- Three (3) pixels between rows.
The star displays are implemented using CSS Sprites (see http://www.alistapart.com/articles/sprites/). We use one large star image and one small star image, and via CSS display only a small portion of the image at a time. Placing the following CSS overrides into your CSS override style sheet while referencing your new star images will effectively change all the star rating images on your site:
.pr-snapshot-rating .pr-stars, div.prStars {
background-image: url(http://www.yoursite.com/images/large_stars.gif);
}
.pr-stars-small, .pr-snippet-stars .pr-stars-small {
background-image: url(http://www.yoursite.com/images/small_stars.gif);
}
Tag Summary
The tag summary is the collection of the most popular tags that reviewers have applied to the product. The tags are displayed in a three-column layout categorized by Pros, Cons, and Best Uses.
Clickable Histogram
An optional Review Snapshot feature is the Styling Clickable Review Histogram. Turning this on removes Best Uses from the Review Snapshot and replaces it with Histogram section that your users can click on. Clicking a rating will filter reviews to show only those with the corresponding rating.
Attribute Summary
The attribute summary is a collection of custom attributes with which reviewers have tagged the product. The markup consists of an unordered list and list elements:
- .pr-other-attributes-list: The <ul> element.
- .pr-other-attributes-label: The <li> element that contains the attribute label.
- .pr-other-attributes-value: The <li> element that contains the attribute.
To override the default list marker, add the following CSS override to your CSS override style sheet:
.pr-other-attributes-list li.pr-other-attribute-label {
background-image: url(path/to/your/marker.gif);
background-position: left center;
background-repeat: no-repeat;
padding: 0 0 0 0.7em;
/* padding varies depending on image size */;
}
Write-a-Review Link
The bottom section of the Review Snapshot is the Write A Review link. To display the link as a button, you either reference a customized button image or mimic a button by adding color to the background, as described below.
Reference a Customized Button Image
To change the link to a customized button, add the following CSS rules to your CSS override style sheet:
.pr-snapshot-write-review {
background-image: url("path/to/your/write_review.gif");
height: 25px;
width: 10em;
}
.pr-snapshot-write-review span {
display: none;
}
![]() Write a Review Link |
![]() Customized Button |
![]() CSS Button |
If you prefer to mimic a button instead of using a custom button image, change the background color of the containing div, as follows:
.pr-snapshot-write-review {
background-color: #000;
color: #FFF;
padding: 0.5em;
width: 7em;
/* set width; else it stretches over the entire page */;
}
Responsive Reviews
The elements of the primary review display (with the exception of modal popups) are responsive to their parent container. This is an important distinction to point out versus the more common practice of being responsive to a browser’s width. Being responsive to the review display’s parent container results in the cleanest layout regardless of a full width or multi-column product page template.
Fluid Div
Make sure to keep the parent container fluid. If the parent container of div.pr-review-engine is a fixed width, the review display will maintain its form to that width.
A snippet of javascript tracks the width of the .pr-review-engine div (the review display container). When this element has a width less than 690px, the javascript adds a class indicating the smaller size. That added class can be targeted in your css to style elements only when the container's width is less than 690px.
Desktop
Parent container greater than 690px
<div class="pr-review-engine">
<div class="pr-attribute-group"> </div>
</div>
.pr-review-engine .pr-attribute-group { width: 30%; }
Responsive Breakpoint
Parent container less than 690px.
<div class="pr-review-engine pr-review-engine-max-width-690px">
<div class="pr-attribute-group"> </div>
</div>
.pr-review-engine.pr-review-engine-max-width-690px .pr-attribute-group { width: 100%; }
For clients without CSS development resources, this makes for an easy out-of-the-box solution. If you are customizing your display and prefer media queries, you may still use them, but remember to override the base responsive classes to avoid conflicting styles.
Responsive Review Summary Breakpoints
Element | 690px and narrower | 690px and wider |
Histogram/Pros/Cons | Stacked layout, content listed | 3-column layout, content bulleted |
Styling the Review Display
The Review Display comprises the following major sections:
- Review Header
- Reviewer Profile
- Review Date
- Review Tags
- Review Comments
- Review Attributes
- Review Footer
You can customize the Review Display styling so that it matches your website’s look and feel; see this topic’s subsections for details.
Review Header
The review header is very similar to the rating summary, but it includes the most helpful text (for example, “1 of 1 customers found this review helpful”) and the small-sized ratings stars.
For information about using custom stars, see “Rating Summary” on page . The following elements make up the review header:
- .pr-review-most-helpful: Most helpful text.
- .pr-stars: Star rating for the review.
- .pr-rating: Numerical rating for the review.
Reviewer Profile
The reviewer profile section displays information that the reviewer has provided during the Write A Review process, including their name, location, and affinities. The reviewer profile comprises the following elements:
- .pr-review-author-name: Author’s name for the review.
- .pr-review-author-location: Location of the author.
- .pr-review-author-affinities: Affinity provided by the author (there may be multiple affinities).
Review Date
The review date is a date stamp of when the review was submitted.
- .pr-review-author-date: Author’s name for the review.
Review Comments
The review comments are the focus of the customer review, showing the comments provided during the Write A Review process. This section comprises the following elements:
- .pr-comments-header: Name of the reviewed product.
- .pr-comments: Actual review comment/text.
Review Attributes
The review attributes are a collection of attributes with which the reviewer has tagged the product during the Write A Review process. It is identical to the attribute summary described in “Attribute Summary” on page.
Review Footer
The review footer is the final section of the customer review. It contains the bottom line and review tools elements:
- .pr-review-bottom-line-wrapper—Bottom Line stating whether the reviewer would recommend the product.
- .pr-review-helpful-text—Links for customers to mark whether the review was helpful or not.
- .pr-review-report-issue—Link for customers to report a review for being offensive or incorrect.
A typical customization is to break apart the review’s “helpful text” and “flag this review text” into two separate lines by adding the following to your CSS override style sheet:
.pr-review-engine .pr-review-report-issue {
display: inline;
}
.pr-review-report-issue-hyphen {
display: static;
}
![]() Default helpful and flag text |
![]() In-line review footer helpful and flag text |
One-Column Layout
The default Review Display is a two-column format: the first column contains the reviewer profile and the second column contains everything else. However, if you have narrow real estate in which to display your reviews, you can easily modify the Review Display to a one-column format so that all elements are displayed within a single column. Add the following rules to your CSS override style sheet:
.pr-review-author p {
display: inline;
}
.pr-review-rating-wrapper, .pr-review-main-wrapper {
float: none;
width: 100%;
}
.pr-review-author {
float: none
width: 100%;
}
Break Points
Element | 690px and narrower | 691px and wider |
Reviewer Profile | Under headline and star rating | Floated to left of review |
Pagination Links | Centered at the top and bottom of review display | Floated to the right on the top and bottom of review display |
Sort Bar | Centered at the top of review display | Floated to the right on the top of review display |
Remember that the review display does not use @media queries to power the responsive display, but instead uses javascript to observe the div width. If you are customizing your display and prefer media queries, you may still use them, but remember to override the base responsive classes to avoid conflicting styles.
Parent container greater than 690px
<div class="pr-review-engine pr-review-engine-max-width-690px">
<div class="pr-attribute-group">
</div>
</div>
.pr-review-engine.pr-review-engine-max-width-690px .pr-attribute-group {
width: 100%;
}
Parent container less than 690px
<div class="pr-review-engine pr-review-engine-max-width-690px"> <div class="pr-attribute-group"> </div> </div>
.pr-review-engine.pr-review-engine-max-width-690px .pr-attribute-group {
width: 100%;
}