Main Reviews Widget - Installation & Setup

For Shopify users without Shopify Product Review(SPR) app installed in the theme, it can be more challenging to install the codes as every theme has a different set of files and codes involved. If you have SPR installed currently in your theme, please use this guide instead.

Please note that these instructions will be a general guideline and the examples of code placement may not reflect exactly in your theme. You can also customize the position of the codes to fit your website should you wish to.

If you require assistance with installation, we do provide the service for users on paid plans, simply send us an email at hello@stamped.io.

NOTE: Step 2 & 3 should be done when Stamped.io is installed, please check your store's product pages if the widget is in place. Skip them if that is the case.


In This Guide

  1. Install Script And CSS Before The /body Tag
  2. Install Main Review Widget In Product Page
  3. Install Star Rating Badge In Product Page
  4. Install Star Rating Badge In Collection Page
  5. Update/Change Theme

Step 1: Install Script In Theme.liquid 

Place the code below in before the closing </body> tag

<script async type="text/javascript" data-api-key="" id="stamped-script-widget" src="https://cdn-stamped-io.azureedge.net/files/widget.min.js"></script>

Step 2: Install Main Review Widget In Product Page

*Possible files with the code: product.liquid, product-template.liquid, product-meta.liquid

<div id="stamped-main-widget"   
data-widget-style="standard" 
data-product-id="{{ product.id }}"   
data-name="{{ product.title | escape }}"   
data-url="{{ shop.url }}{{ product.url }}"   
data-image-url="{{ product.featured_image | product_img_url: "large" |replace: '?', '%3F' | replace: '&','%26'}}" 
data-description="{{ product.description | escape }}"   
data-product-sku="{{product.handle}}"
data-product-type="{{product.type}}">   
{{ product.metafields.stamped.reviews }}   
</div>

The code should be placed before the "related.products" tag, along the lines of:

##Insert code here##
{% include 'related-products' %}

Step 3: Install Star Rating Badge In Product Page

 The star rating badge code is usually installed in the same file as where the main widget codes is located

<span class="stamped-product-reviews-badge stamped-main-badge" data-id="{{ product.id }}" data-product-sku="{{ product.handle }}" data-product-type="{{product.type}}" data-product-title="{{product.title}}" style="display: inline-block;">{{ product.metafields.stamped.badge }}</span>

The codes should go under "product.title" tag, something like:

<h1>{{product.title}}</h1>
##Insert code here##

Step 4: Install Star Rating Badge In Collection Page

*Possible files with the code:product-grid-item.liquid, product-loop.liquid, product-item.liquid, product-thumbnail.liquid, product-info.liquid

<span class=" stamped-product-reviews-badge" data-product-sku="{{ product.handle }}" data-id="{{ product.id }}" data-product-type="{{product.type}}" data-product-title="{{product.title}}"  style="display:block;">{{ product.metafields.stamped.badge }}</span>

The codes should go under "product.title" tag as well:

<div class="h4 grid-view-item__title">{{ product.title }}</div>
##Insert code here##
{% if section.settings.show_vendor %}
<div class="grid-view-item__vendor">{{ product.vendor }}</div>
{% endif %}
<div class="grid-view-item__meta">
{% include 'product-price' %}
</div>

Update/Change Theme

Any change/update of the theme may remove Stamped.io's widget codes, they can be reinstalled in the live theme by:

  1. Heading over to Settings => Widgets => Main Widget => Install: https://go.stamped.io/v3/#/settings/widgets/main/
  2. Click on the "Apply Main widget" button.

If you have any questions or require any assistance with the widget installation:

Simply reach out to us at hello@stamped.io or by sending us a message at the bottom right of this page, and our support team will be here to help.