Installing Sitejabber App

You can find the Sitejabber app here

Click “Add app” button

Install

Confirm the installation and you’ll be directed to the Sitejabber website to finish the installation.

Specify whether you would like to collect reviews from previous customers. This is an easy way to get a head start on your review collection

You will be able to change your review collection settings at any time inside the Sitejabber dashboard:

Installing Instant Feedback Manually (DEPRICATED 2025)

Customize the Instant Feedback Form

When customization is complete click the “Save & Publish” button

From your admin panel, navigate to Settings > Checkout (myshopify.com/admin/settings/checkout)

Look for the “Order processing” section

Paste the snippet below in the “Order Status Page” text area

Click on the “Save” button

Without Product Information

Below is an example only:

{% if order %}
<div class="stjr-instant-feedback"></div>

<script>document.querySelector("body").addEventListener("STJR.instantFeedbackWidgetLoaded",function(){STJR.setConfig({language:'en',user:{first_name:'{{ order.customer.first_name | replace: "'", "\\'" }}',last_name:'{{ order.customer.last_name | replace: "'", "\\'" }}',email:'{{ order.customer.email }}',phone:'{{ order.customer.phone }}'},order_date:{{ order.created_at | date: "%Y-%m-%d %H:%M:%S" | json }},order_id:'{{ order.order_number }}'})});</script>

<script>(function(d,s,id,c){var js,rC=[],uRC=[],r=0;Array.from(document.querySelectorAll('[class*="stjr-"]')).forEach(r=>{rC=[...rC,...Array.from(r.classList).filter((cl)=>{return /^stjr-/.test(cl);})]});uRC=[...new Set(rC)];t=d.getElementsByTagName(s)[0];js=d.createElement(s);js.id=id;js.src='https://www.sitejabber.com/js/v2/{CLIENT-ID}/widgets.js'+(uRC.length ? '?widget-classes=' + uRC.join("|") : '?widget-classes=stjr-base')+'';js.onload=js.onreadystatechange=function(){if(!r&&(!this.readyState||this.readyState[0]=='c')){r=1;c();}};t.parentNode.insertBefore(js,t);}(document,'script','sj-widget',function(){}));</script>
{% endif %}

Please replace {CLIENT-ID} with the Client ID in your dashboard here.

With Product Information

Below is an example only:

{% if order %}
<div class="stjr-instant-feedback"></div>

<script>document.querySelector("body").addEventListener("STJR.instantFeedbackWidgetLoaded",function(){STJR.setConfig({language:'en',user:{first_name:'{{ order.customer.first_name | replace: "'", "\\'" }}',last_name:'{{ order.customer.last_name | replace: "'", "\\'" }}',email:'{{ order.customer.email }}',phone:'{{ order.customer.phone }}'},products: [{% for item in order.line_items %}{brand:'{{ item.product.vendor | replace: "'", "\\'" }}',categories:'{% for collection in item.product.collections %}{{ collection.title | replace: "'", "\\'" }},{% endfor %}',currency:'{{ order.total_price | money_with_currency | slice: -3, 3 }}',images:'{% if item.image %}{{ item.image || img_url }}{% endif %}',price:'{{ item.original_price | money_without_currency }}',product_link:'{{ shop.secure_url }}{{ item.url }}',sku:'{{ item.sku | default: item.variant_id }}',item_group:'{{ item.product_id }}',title:'{{ item.title | replace: "'", "\\'" }}',},{% endfor %}],order_date:{{ order.created_at | date: "%Y-%m-%d %H:%M:%S" | json }},order_id:'{{ order.order_number }}'})});</script>

<script>(function(d,s,id,c){var js,rC=[],uRC=[],r=0;Array.from(document.querySelectorAll('[class*="stjr-"]')).forEach(r=>{rC=[...rC,...Array.from(r.classList).filter((cl)=>{return /^stjr-/.test(cl);})]});uRC=[...new Set(rC)];t=d.getElementsByTagName(s)[0];js=d.createElement(s);js.id=id;js.src='https://www.sitejabber.com/js/v2/{CLIENT-ID}/widgets.js'+(uRC.length ? '?widget-classes=' + uRC.join("|") : '?widget-classes=stjr-base')+'';js.onload=js.onreadystatechange=function(){if(!r&&(!this.readyState||this.readyState[0]=='c')){r=1;c();}};t.parentNode.insertBefore(js,t);}(document,'script','sj-widget',function(){}));</script>
{% endif %}

Please replace {CLIENT-ID} with the Client ID in your dashboard here.

Installing Instant Feedback (New App Version)

1) Go to Themes>>Customize

2) Use “Home page” dropdown menu and select “Checkout and new customer accounts”

3) Use “Checkout” dropdown menu to select “Thank you”

4) Click “Apps” icon

5) Select Instant Feedback block

6) Save

7) Repeat steps 1-6 to also install on the “Order Status” page:

Installing Product Widgets

App Installation

Go to Account Settings in your Sitejabber dashboard

Go to Shopify widget activation

Click App Scripts and toggle on when taken to Shopify dashboard

You’ll be taken to Shopify dashboard and toggle the Sitejabber App Script “on”

Return to Sitejabber dashboard, click “Product Template”, and toggle on in Shopify dashboard

Return to Sitejabber dashboard

Click Product Rating Widget here

Hover in the space after “Price” and click the + “Add block” that appears

Select “Product Rating Widget” from “Apps” tab

Save changes

Hover in the space after “Product Description” section and click the + Add block that appears

Select “Product Review Widget” from the Apps tab

Save changes

Manual Installation

From your Shopify admin panel, navigate to Sales Channels > Online Store > Themes

On your current theme, click on the “Actions” drop down menu and select “Edit code”

Underneath the Templates folder, click on the file titled “product-template.liquid”

Save changes when code has been entered

Product JSON

Product JSON is typically already present on Shopify themes. However, if product JSON is not included on your theme, please add the code below to “product-template.liquid”

<script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
</script>

Script Loader

Add the code snippet below to your site, specifically in your product template (product-theme.liquid) or footer template (footer.liquid). This code will then allow the script loader to populate the widgets you have installed on your page.

It is recommended that you place the script tag in the footer area of your site, as this can improve page load times and help your website to perform better on tools like Google’s PageSpeed Insights. It is also important to only include one instance of the script loader to avoid performance issues.

<script>(function(d,s,id,c){var js,rC=[],uRC=[],r=0;Array.from(document.querySelectorAll('[class*="stjr-"]')).forEach(r=>{rC=[...rC,...Array.from(r.classList).filter((cl)=>{return /^stjr-/.test(cl);})]});uRC=[...new Set(rC)];t=d.getElementsByTagName(s)[0];js=d.createElement(s);js.id=id;js.src='https://www.sitejabber.com/js/v2/{CLIENT-ID}/widgets.js'+(uRC.length ? '?widget-classes=' + uRC.join("|") : '?widget-classes=stjr-base')+'';js.onload=js.onreadystatechange=function(){if(!r&&(!this.readyState||this.readyState[0]=='c')){r=1;c();}};t.parentNode.insertBefore(js,t);}(document,'script','sj-widget',function(){}));</script>

Please replace {CLIENT-ID} with the Client ID in your dashboard here.

Product Rating Widget

The Product Rating widget code snippet below should be placed under the price or title at “product-template.liquid”

<div class="stjr-product-rating" data-product-id="{{ product.selected_or_first_available_variant.sku|default:product.selected_or_first_available_variant.id|string }}" data-group="item_group" data-group-value="{{product.id}}"></div>

Product Review Widget

The Product Review widget code snippet below should be placed under the product description at “product-template.liquid”

<div class="stjr-product-review-page" data-product-id="{{ product.selected_or_first_available_variant.sku|default:product.selected_or_first_available_variant.id|string }}" data-group="item_group" data-group-value="{{product.id}}"></div>