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).
Learn More About the Awesome Plan
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 store 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__body { 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 Star Ratings (this code adds an offset to the product Review Widget, which sometimes overlaps with product description)
<script> jdgmSettings.scrollTopOffset = 120; </script>
Display product ratings and the total number of reviews via Judge.me metafields
Need to display a product's average rating and its total number of reviews in a specific location on your store? You can use Judge.me metafields to access these data and add them to your theme code. Judge.me provides 2 Shopify standard metafields: reviews.rating (stored as a rating type) and reviews.rating_count (stored as a number_integer type). Read more here.
If you need help with advanced customizations for the Review Widget, contact our team at [email protected]. We're available to help 24/7!