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).
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
<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.
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.
.jdgm-rev__reply-content { color: black !important; }
.jdgm-rev__title { display: none !important; }
.jdgm-rev__icon{ background-color: #6692bd !important; color: white !important; font-weight: bold !important; font-family: Open Sans !important; }
.jdgm-rev__author{ color: #6692bd !important; text-transform: uppercase !important; font-weight: bold !important; font-family: Open Sans !important; }
.jdgm-rev__title{ color: #4f4f4f !important; font-family: Open Sans !important; }
.jdgm-rev__title{ color: #4f4f4f !important; font-family: Open Sans !important; }
@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; }
@media screen and (max-width: 425px) { #product-description .jdgm-prev-badge { text-align: center; } }
.jdgm-widget .jdgm-temp-hidden { pointer-events: none; }
You can add an introdcution sentence to your review widget by adding the following code to your respective css.liquid
file.
.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; }
@media all and (max-width : 768px) { .jdgm-rev-widg__title:after { width: 90%; } }
Script changes have to be added to the bottom of the product.liquid
template
<script> jdgmSettings.scrollTopOffset = 120; </script>