The Review Widget helps you collect and display your product reviews and star ratings on your product pages. This widget serves as social proof on your product pages, allowing your customers to evaluate your products, and provides additional information on top of your product descriptions. You can install the Review Widget and choose star color on our Forever Free plan, while the three widget themes and full customizations can be unlocked on our Awesome plan ($15/month).

There are multiple ways to modify the look and feel of your Review Widget. You can choose the widget themes and make small adjustments in the app settings. In this article, we'll show you more advanced customization of the Review Widget using style attribute and CSS.


Using the style attribute

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 }}
</div>

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 }}
</div>

This will result in decreasing the width of the review widget and result in the same margin on the left and right sides. 

Tip
Use relative numbers (80%) instead of absolute numbers (600px) so that your product page will look great on both 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 }}
</div>

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

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 latter file is compiled from the former file.

  • Changing the color of shop replies for customer reviews (you can replace "black" with another color name or code):
.jdgm-rev__reply-content { 
  color: black !important;
 }
  • Hiding review titles.
.jdgm-rev__title { 
  display: none !important; 
}
  • Changing Reviewers First Letter circle's display (this CSS code changes the background and text color, as well as font-weight (bold or not), as well as the font family - remove or change any property as you wish):
.jdgm-rev__icon {
  background-color: #6692bd !important;
  color: white !important;
  font-weight: bold !important;
  font-family: Open Sans !important;
}
  • Changing Reviewer Name (this CSS code changes the color, capitalizes all characters, makes the texts bold, and changes its font - remove or change any property as you wish)
.jdgm-rev__author {
  color: #6692bd !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
  font-family: Open Sans !important;
}
  • Changing Review Title (this code changes the text color and its font)
.jdgm-rev__title {
  color: #4f4f4f !important;
  font-family: Open Sans !important;
}
  • Changing Review Body (this code changes the text color and its font)
.jdgm-rev__title {
  color: #4f4f4f !important;
  font-family: Open Sans !important;
}
  • Don't show the absolute number of reviews for small devices (screen width 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 !important;
}
  • If on mobile, the badge did not align correctly with the price/title, paste this at the end of the CSS file (the #product-description can be changed to another text or :
@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 introductory 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 tablet or smaller devices

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

Script customization

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 (this code adds an offset to the product review widget, which sometimes overlaps with product description)

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