Using a Shopify page builder like Buildify, Shogun, or Zipify? Please check this guide to learn how to add the Judge.me widgets to your custom pages.


*Note: 

  • These steps are just guidelines and most likely they will need to be adapted from case to case.
  • If you want to add the widgets to fully-customized HTML pages, please check this helpdesk article.


If you need further support, please contact our support with the following information: 

  • Which product and page you want to change 
  • Staff account with theme + pages access 
  • Name of the page builder app generating the page


Four steps to add Judge.me widgets to Shopify's custom pages


Step 1: Add a placeholder div where you want to place the Preview Badge, Review Widget, or other widgets, each with a unique ID.

For example, for the Preview Badge, please use: 

<div id='judgeme_badge_placeholder'></div>

For the Review Widget, please use:

<div id='judgeme_widget_placeholder'></div>

Step 2: Find the liquid file generating this page. Most likely this one will contain your builder name, such as templates/page.buildify-template.liquid


Step 3: In the page.buildify-template.liquid file, create a div with the style of display = 'none' so that it is hidden and inside place the code from the widgets that will get installed.

<div style="display:none">

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

 <div id='judgeme_product_reviews' class='jdgm-widget jdgm-review-widget' data-product-title='{{ product.title | escape }}' data-id='{{ product.id }}'>{{ product.metafields.judgeme.widget }}</div>

</div>

If the page where the widgets are getting installed is not a product page, then you'll need to manually assign a certain product to the widget. 

Take into consideration that in this case, only one product can be assigned to the widget, since the product variable won't dynamically change like on product pages.

To do this you'd need to make use of this liquid snippet:

 {% assign product = all_products["product_handle"] %}

You'll need to replace product_handle for the desired product handle. Learn how to find the product handle in Shopify.

Step 4: Finally, a small script would need to be added to the page.buildify-template.liquid file. What this script does is to move the widget originally placed on the div with the display = 'none' style to the placeholder div placed on the page builder app.

<script>

document.addEventListener('DOMContentLoaded', function(){

document.querySelector('#judgeme_badge_placeholder').appendChild(document.querySelector('#judgeme_real_badge'));
document.querySelector('#judgeme_widget_placeholder').appendChild(document.querySelector('#judgeme_product_reviews'));

}, false);

</script>


Another element that can be added is the Reviews carousel, using the same placeholder method.


So the HTML placeholder div looks like this: 

<div id='judgeme_carousel_placeholder'></div>


Then, the script needs to be placed on the associated file.

<script>

window.addEventListener('DOMContentLoaded', (event) => {

document.querySelector('#judgeme_carousel_placeholder').appendChild(document.querySelector('.jdgm-carousel-wrapper'));

});

</script>