Skip to main content

Styling Display 3

  • Updated

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

image02_381x97.png

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

image1_903x544.png

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 .)

image24_600x225.png

 

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.

image03_269x178.png

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.

image04.png

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.

image05.png

Default Stars

 image06.png

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.

image13.png

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.

image26_911x232.png

 

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;
}
image10_213x74.png

Write a Review Link

 image11_159x36.png

Customized Button

 image12_155x55.png
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

image35_800x486.png

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.

image21.png

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;
}
image21_458x86.png

Default helpful and flag text

 image22_456x98.png

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%;
}

image32_800x697.png

 

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%;
}

 

 

 

Was this article helpful?
0 out of 0 found this helpful
Return to top