The Preview Badge helps you display your star ratings and number of reviews as a badge below the product title on product or collection pages. This badge helps your visitors quickly assess your products and add relevant social proof to improve your shop's conversion rate. You can install and customize the Preview Badge on our Forever Free plan. 

There are multiple ways to modify the look and feel of your Preview Badge. You can change the star color and badge text in the app settings. In this article, we'll show you more advanced customization of the Preview Badge using style attribute and CSS.

Using the style attribute

Additionally, you can change the appearance of badges for individual liquid files by adding the style attribute inside the respective quotes jm_style: ' '. Some knowledge of HTML is required to do these changes.

The basic code for our Preview Badge is

{% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', jm_style: '', concierge_install: true %}

You can typically adjust the look and feel of the preview badge using the following properties

  • margin-top or margin-bottom, e.g. margin-top: -5px or margin-bottom: 10px
  • font-size, e.g. font-size: 12px or font-size: 125%
  • text-align, e.g. text-align:center or text-align:left

Examples:

{% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', jm_style: 'margin-top:5px', concierge_install: true %}

This will result in increasing the margin on the top of the badge by 5 pixels.

Tip
You can also use negative margins to make the badge move closer to text fields

{% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', jm_style: 'font-size:120%', concierge_install: true %}

This will result in increasing the size of the stars and text 'review' on the badge to 120%.

Tip
You can also use absolute values by writing 12px (for example)

{% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', jm_style: 'text-align:left', concierge_install: true %}

This will result in showing the review badge always on the left side (in relation to the container for the product title)

Tip
Other options are "center" or "right".

CSS customization

Adding the code below to your scss.liquid file will help you to customize detailed aspects of the preview badge. 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.

  • Hide the Preview Badge with a specific number of reviews
.jdgm-prev-badge[data-number-of-reviews='0'] {
  display: none !important; 
}
  • Note: If you want to hide it on a specific page, please add an upper class that contains the preview badge
.collection_item_grid .jdgm-prev-badge[data-number-of-reviews='0'] { 
  display: none !important; 
}
  • Hide the Preview Badge on specific pages, e..g homepage (index)

If statement (same liquid file)

{% if template != 'index'  %}
  {% include 'judgeme_widgets', widget_type: 'judgeme_preview_badge', jm_style: '', concierge_install: true %}
{% endif %}

CSS (not recommended) (in CSS liquid file)

.jdgm-preview-badge[data-template='index'] { 
  display: none !important;
 }

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.