This article is for Shopify merchants that use a custom page builder app, e.g. "Buildify Drag & Drop Page Builder (https://apps.shopify.com/buildify) to build the product pages. For how to add Judge.me Widgets to fully-customized HTML pages, please see here.


Note: These steps are just guidelines and most likely they will need to be adapted from case to case.


If you need further support, please contact support@judge.me 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


Steps to add Judge.me widgets to Shopify's custom pages

1) Add a placeholder div where you want the badge or widget or other widget to be, each with a unique ID.

For example, for the preview badge use: 

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

And for the review widget use: 

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

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

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.

Note:
The product handle is the last part of the product URL. For example, for www.yourshop.com/products/red-widget the product handle is red-widget. 
If a product URL has params, those params are not part of the handle. So for www.yourshop.com/products/red-widget?variant=1 the handle is still red-widget.

4) Finally, a small script would need to be added to the page.buildify-template.liquid file 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>


Note: 

These steps are just guidelines and most likely they will need to be adapted from case to case.