Judge.me integrates with many page builders so you can add our widgets easily on these pages. If you're using Shogun page builder, this will be done by inserting an HTML placeholder and adding relevant code.
Follow these steps to install Judge.me widgets in Shogun:
Step 1: Add the placeholders in Shogun
Drag and drop an HTML element to the desired location for displaying Judge.me widgets.
Double-click the HTML element to open the HTML text box.
Add div placeholders for the widgets you want, each with a unique ID
For the Star Ratings, you can use:
<div id="judgeme_badge_placeholder"></div>
For the Review Widget:
<div id="judgeme_widget_placeholder"></div>
For the review carousel:
<div id="judgeme_carousel_placeholder"></div>
Step 2: Add Judge.me widget code in Shopify theme file
In your Shopify admin, go to Online Store > Themes > Actions > Edit code.
Find your layout/theme.liquid file.
If installing in theme.liquid doesn't work, try theme.shogun.liquid or any template with "shogun" in the name. Please note that these templates will get overwritten whenever there are changes made in the Shogun app.
To install on a product page
Add the following widget codes inside a div with style="display:none" in the theme.liquid file just above </body>:
<div style="display: none"> {% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', jm_style: '', concierge_install: false, product: product %} {% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: false, product: product %} {% render 'judgeme_widgets', widget_type: 'judgeme_featured_carousel', concierge_install: false %}</div>
To install on a non-product page
You'll need to manually assign a product to the Star Ratings and Review Widget by adding their product_handle to the code.
Here's how to find the product_handle in Shopify:
<div style="display: none"> {% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', jm_style: '', concierge_install: false, product: all_products['product_handle'] %} {% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: false, product: all_products['product_handle'] %} {% render 'judgeme_widgets', widget_type: 'judgeme_featured_carousel', concierge_install: false %}</div>
In this case, only one product can be assigned to the widget, since the product variable won't dynamically change like on product pages.
That also means that, this method can't be used to install the Star Ratings and Review Widget on a Shogun collection page.
Step 3: Add a script to load the widgets into the placeholder
Insert the following scripts below the closing </div> tag from Step 2. These scripts will move the widgets from the div with display="none" to the placeholders in Step 1.
For the Star Ratings
<script> document.addEventListener( 'DOMContentLoaded', function() { document .querySelector('#judgeme_badge_placeholder') .appendChild(document.querySelector('.jdgm-preview-badge')); }, false );</script>For the Review Widget
<script> document.addEventListener( 'DOMContentLoaded', function() { document .querySelector('#judgeme_widget_placeholder') .appendChild(document.querySelector('#judgeme_product_reviews')); }, false );</script>
For the review carousel
<script> document.addEventListener( 'DOMContentLoaded', function() { document .querySelector('#judgeme_carousel_placeholder') .appendChild(document.querySelector('.jdgm-carousel-wrapper')); }, false );</script>
For installing all 3 widgets above, you can combine the script like this
<script> document.addEventListener( 'DOMContentLoaded', function() { document .querySelector('#judgeme_badge_placeholder') .appendChild(document.querySelector('.jdgm-preview-badge')); document .querySelector('#judgeme_widget_placeholder') .appendChild(document.querySelector('#judgeme_product_reviews')); document .querySelector('#judgeme_carousel_placeholder') .appendChild(document.querySelector('.jdgm-carousel-wrapper')); }, false );</script>Please only combine the scripts if you plan to install multiple widgets. Otherwise, the widgets cannot be loaded into the placeholder.
Please only combine the scripts if you plan to install multiple widgets. Otherwise, the widgets cannot be loaded into the placeholder.
Advanced: If you have different templates for desktop, mobile, and tablet
With Shogun, you can design different templates for desktop, mobile, and tablet. In this case, you'll need to add separate placeholders for each template.
You can use the _tablet and _mobile suffixes to make it easier to check.
For example, after adding the original placeholders in Step 1, go to your mobile template and add these placeholders:
<div id="judgeme_badge_placeholder_mobile"></div>
<div id="judgeme_widget_placeholder_mobile"></div>
<div id="judgeme_carousel_placeholder_mobile"></div>
Then, instead of the script in Step 3, add this script:
<script> var jdgmInstaller = (function() { var mobileMaxWidth = 767; var tabletMaxWidth = 991; var selectors = { review: "#judgeme_widget_placeholder", badge: "#judgeme_badge_placeholder", carousel: "#judgeme_carousel_placeholder" }; var getPlaceholders = function() { var deviceSuffix = window.innerWidth > tabletMaxWidth ? "" : (window.innerWidth > mobileMaxWidth ? "_tablet" : "_mobile"); return { review: document.querySelector(selectors.review + deviceSuffix) ?? document.querySelector(selectors.review), badge: document.querySelector(selectors.badge + deviceSuffix) ?? document.querySelector(selectors.badge), carousel: document.querySelector(selectors.carousel + deviceSuffix) ?? document.querySelector(selectors.carousel) }; }; return { install: function() { var placeholders = getPlaceholders(); placeholders.review?.appendChild(document.querySelector("#judgeme_review_widget")); placeholders.badge?.appendChild(document.querySelector("#judgeme_real_badge")); placeholders.carousel?.appendChild(document.querySelector("#judgeme_carousel_widget")); } }; })(); jdgmInstaller.install(); window.addEventListener('resize', jdgmInstaller.install); </script>
For other widgets
The principle remains the same:
Add an HTML placeholder for the widget on your Shogun page.
Place the widget code inside a div with style="display: none" in your Shopify theme.liquid file.
Add a script to move the widget from display="none" to the placeholder.
For the liquid code of each widget, refer to our manual installation guide.
If you have any questions or need assistance with installing the widgets in Shogun, feel free to chat with us or email our team at [email protected]. We're always ready to help!
If you need help adding Judge.me widgets in Shogun, contact our team at [email protected]. We're available to help 24/7!