The Review Widget shows all your product reviews. It will include a summary rating, a histogram and a dropdown menu to filter your reviews. We recommend putting it on top of your Related Products section on your product page.

There are multiple ways to modify the look and feel of your review widget: Especially you can choose the widget theme. Besides that, you can do small adjustments in the app settings or use the style attribute (html).

App Settings

Choosing the Review Widget theme (Awesome plan)

Review Widget themes are only available for version 2.0. For our previous widget version themes cannot be changed.

We offer three different themes with different advantages (click to see the example shop)

Default - Simple to use for your customer

Leex - Highlighting your review pictures

Align - Aligning your reviews into two column

App Settings

Awesome users can also change the widget's appearance in the app settings.

• Widget star color
• Widget header
• Widget layout (toggle showing a border on and off)
• Widget Rating Filter/Histogram bar color
• Verified Buyer Badge colors

Using the style attribute (Advanced)

Additionally, you can change the appearance of the widget by adding the style attribute to the respective <div> tag. Some knowledge of HTML is required to do these changes.

The basic code for our Review Widget is

<div id='judgeme_product_reviews' class='jdgm-widget jdgm-review-widget' data-product-title='{{ product.title }}' data-id='{{ product.id }}'>{{ product.metafields.judgeme.widget }}

You can adjust the look and feel of the Review Widget using the following properties

• max-width, e.g. max-width:80%
• adjust margin, e.g. margin: auto
• margin-right or margin-left, e.g. margin-right:100px

Examples:

<div style='max-width:80%;margin: auto;' id='judgeme_product_reviews' class='jdgm-widget jdgm-review-widget' data-product-title='{{ product.title }}' data-id='{{ product.id }}'>{{ product.metafields.judgeme.widget }}

This will result in decreasing the width of the review widget and result in the same margin on the left and right side. Tip: Use relative numbers (80%) instead of absolute numbers (600px) so that your product page will looks great on desktop and mobile.

<div style='margin-right:100px' id='judgeme_product_reviews' class='jdgm-widget jdgm-review-widget' data-product-title='{{ product.title }}' data-id='{{ product.id }}'>{{ product.metafields.judgeme.widget }}

This will result in moving the widget 100px away from the right side. Tip: You can also use margin-left, margin-top or margin-bottom to move the widget away from other text.

CSS customization (Advanced)

Adding the code below to your scss.liquid file will help you to customize detailed aspects of the review widget. Make sure to only change your .scss.liquid file and not your actual .scss file, because the .scss file is compiled from the .scss.liquid file.

• Changing the color of shop replies for customer reviews.

.jdgm-rev__reply-content {
     color: black !important;
}

• Hiding review titles.

.jdgm-rev__title {
  display: none !important;
}

• Changing Reviewers First Letter circle

.jdgm-rev__icon{
    background-color: #6692bd !important;
    color: white !important;
    font-weight: bold !important;
    font-family: Open Sans !important;
}

• Changing Reviewer Name

.jdgm-rev__author{
    color: #6692bd !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    font-family: Open Sans !important;
}

• Changing Review Title

.jdgm-rev__title{
    color: #4f4f4f !important;
    font-family: Open Sans !important;
}

• Changing Review Body

.jdgm-rev__title{
    color: #4f4f4f !important;
    font-family: Open Sans !important;
}

• Don't show absolute number of reviews for small devices (below 485px)

@media all and (max-width: 485px) {
  .jdgm-histogram__frequency {
    display: none !important;
  }
}

Make the review rating in the histogram unclickable

.jdgm-histogram{
       pointer-events: none;
       cursor: default;
} 

• If on mobile, the badge did not align correctly with the price/title, paste this at the end of the css file:

@media screen and (max-width: 425px) {
  #product-description .jdgm-prev-badge { text-align: center; }
}

• To make the histograms non-clickable, adding this CSS code to the scss.liquid file:

.jdgm-widget .jdgm-temp-hidden {
    pointer-events: none;
}

Adding a description text below the widget header

You can add an introdcution sentence to your review widget by adding the following code to your respective css.liquid file.

Example on thewoodstone.com

.jdgm-rev-widg__title {
  text-align: center;
  border-bottom: 1px solid #aeaeb0;
}

.jdgm-rev-widg__title:after {
  content: "Customers who purchased this product shared below feedback on fit, comfort and quality. If you make a purchase we'll reach out and ask for your thoughts!";
  display: block;
  font-size: 15px;
  text-transform: none;
  width: 60%;
  margin: 15px auto;
}

Additional customization for mobile/tablet view

@media all and (max-width : 768px) {
  .jdgm-rev-widg__title:after {
    width: 90%;
  }
}

Script customization (Advanced)

Script changes have to be added to the bottom of the product.liquid template

Adjustments to the auto-scrolling to the widget header when clicking the preview badge

  <script>
    jdgmSettings.scrollTopOffset = 120;
  </script>