Rating from widget vendor judge.me

Follow the steps below:

1. First, copy the product card template.
2. Click the link here to copy the template code.
3. Click on the section marked with a red arrow.

4. Paste the code you copied into the designated area.

5. Locate the current rating widget (Sledge)

   In your code, find the section that renders the Sledge rating widget—the one highlighted with a red arrow in the screenshot

6. Replace it with Judge.me’s rating widget

   Use the Judge.me snippet below to replace the Sledge widget you just located

<div>
  <span class="jdgm-preview-badge" data-id="${ id }"></span>
  ${ product.metafields["judgeme.badge"] ? product.metafields["judgeme.badge"] : '' }
</div>

7. Overwrite the highlighted block

   Make sure you paste the Judge.me code exactly where the red‑highlighted Sledge code was.

Before Change code:

After Change code:

8. Save your changes.

9. Refresh your storefront. Open your storefront and refresh the page three times. Any products that already have reviews will now display the Judge.me rating widget on their product cards.

Before:

After