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.

Using the style attribute (Advanced)

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

{% include '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:

{% include '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 pixel.

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

{% include '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)

{% include '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 (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;
}
  • Hide the preview badge with 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;
    }