Customizing the Preview Badge | Judge.me

Customizing the Preview Badge

The preview badge shows the aggregated rating of your product reviews as a star rating. We recommend putting it below the product titles on your collection page and product page.

There are multiple ways to modify the look and feel of your preview badges.

Judge.me app settings

In the app settings, you can show if the badge will show for products that don't have reviews yet (by default: don't show).

Go to: Settings > Other Widgets > Preview Badge (direct link: https://judge.me/settings?jump_to=Preview+Badge)

Awesome users can additionally change:

  • Badge Star Color

  • Badge Texts (formatting/showing of the word 'reviews')

  • Badge Layout (badge alignment)

Go to: Settings > Other Widgets > Preview Badge - Settings

Using the style attribute (Advanced)

Additionally, you can change the appearance of badges for individual liquid files 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 Preview Badge is

<div class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}'>{{ product.metafields.judgeme.badge }}

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:

<div style='margin-top:5px' class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}'>{{ product.metafields.judgeme.badge }}</div>

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

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

<div style='font-size:120%' class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}'>{{ product.metafields.judgeme.badge }}</div>

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)

<div style='text-align:left' class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}'>{{ product.metafields.judgeme.badge }}</div>

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 (Advanced)

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;
}