Help Center
How can we help? 👋
All Categories
Integrations
Shopify

Shopify

Shopify Integration

Installing Sitejabber App

  1. You can find the Sitejabber app here
  1. Click “Add app” button
  1. Install
  1. 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

  1. Customize the Instant Feedback Form
  1. When customization is complete click the “Save & Publish” button
  1. From your admin panel, navigate to Settings > Checkout (myshopify.com/admin/settings/checkout)
  1. Look for the “Order processing” section
  1. Paste the snippet below in the “Order Status Page” text area
  1. 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 Product Widgets

App Installation

  1. Go to Account Settings in your Sitejabber dashboard
  1. Go to Shopify Widget Installation
  1. Click App Scripts and toggle on when taken to Shopify dashboard
  1. Return to Sitejabber dashboard, click “Product Template”, and toggle on in Shopify dashboard
  1. Return to Sitejabber dashboard
      • Click Product Rating Widget here
      • Select “Add block” when taken to Shopify
      • Select “Product Rating Widget”
      • Save changes
      • Select “Add block” again
      • Select “Product Review Widget”
      • Place widget under “Product Description” section
      • Save changes

Manual Installation

  1. From your Shopify admin panel, navigate to Sales Channels > Online Store > Themes
  1. On your current theme, click on the “Actions” drop down menu and select “Edit code”
  1. Underneath the Templates folder, click on the file titled “product-template.liquid”
  1. 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>
Did this answer your question?
😞
😐
🤩
Contact Us