How to Use the Product Reviews Block with Judge.me | Knowledge base for Someone You Know Themes

The Next theme includes a built-in Product Reviews block that works with Shopify's native SPR app. To use it with Judge.me instead, a small code change is required in sections/main-product.liquid.

Before making this change, ensure Judge.me has been fully installed into your theme:

In your Shopify admin, open the Judge.me app
Go to Getting Started → Widget Installation (or Settings → Theme Integration)
Select your active theme and click Reinstall or Auto-install

This step is required — without it the widget will not render.

Code Change

Open sections/main-product.liquid and locate the ratings block ({%- when 'ratings' -%}).

Find the inner <div class="l4rv"> and the <footer> below it. Replace them with the following:

<div class="l4rv" id="shopify-product-reviews" data-id="{{ product.id }}">
    {% assign has_legacy = false %}
    {% if product.metafields.judgeme.widget.size > 20 %}
        {% assign has_legacy = true %}
    {% endif %}
    <div style='clear:both'></div>
    <div id='judgeme_product_reviews' class='jdgm-widget jdgm-review-widget'
        data-product-title='{{ product.title | escape }}'
        data-id='{{ product.id }}'
        data-product-id='{{ product.id }}'
        data-widget='review'
        data-auto-install='false'
        data-shop-reviews-count='{{ shop.metafields.judgeme.shop_reviews_count | default: 0 | escape }}'
        data-entry-point='review_widget.js'
        data-entry-key='review-widget/main.js'>
        {% if has_legacy %}
            <div class='jdgm-legacy-widget-content' style='display:none;'>{{ product.metafields.judgeme.widget }}</div>
        {% endif %}
    </div>
    {% if product.metafields.judgeme.review_widget_data %}
        <script>jdgm.data ||= {}; jdgm.data.reviewWidget ||= {}; jdgm.data.reviewWidget[{{ product.id }}] = {{ product.metafields.judgeme.review_widget_data }}</script>
    {% endif %}
</div>
<footer class="sticky-in-panel">
    <p class="link-btn wide">
        <a href="javascript:void(0)" class="{% if settings.button_style == 'inv' %}inv{% endif %}" onclick="var btn = document.querySelector('#judgeme_product_reviews [data-testid=\'write-review-button\']'); if(btn) btn.click(); return false;">{{ 'product.reviews.write_a_review' | t }}</a>
    </p>
</footer>

Add CSS

Add the following to Theme Settings → Custom CSS:

#judgeme_product_reviews > .jm-stack {
    padding-top: 0;
}

/* Prevent theme button styles from affecting Judge.me elements */
#judgeme_product_reviews button::before,
#judgeme_product_reviews a::before,
.jdgm-widget button::before,
.jdgm-widget a::before,
[class*="jm-"] button::before,
[class*="jm-"] a::before,
[class*="jdgm-"] button::before {
    display: none !important;
    content: none !important;
}

/* Keep Write a Review button visible after form opens */
#product-reviews footer.sticky-in-panel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

Notes

The star rating count and average displayed in the drawer tab use product.metafields.reviews.rating — Judge.me writes to this namespace automatically, so no additional setup is needed
The Write a Review button in the drawer footer triggers Judge.me's own form by programmatically clicking its internal button — this is intentional and more reliable than class-based triggers
If reviews stop showing after a theme update, re-run the Judge.me widget reinstall step above.