Setup Widget 2.0 without Shopify Product Review(SPR) app

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 might 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 1 & 2 should be done when Stamped.io was installed, please check your product pages and see if the widget is in place. Skip them if that is the case.


1) Install Script and CSS before the </body> tag (usually under theme.liquid):

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

2) Install reviews widget in product page (usually in product.liquid/product-template.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}}">   
{{ product.metafields.stamped.reviews }}   
</div>

The code should go below "product.description" tag, along the lines of:

<div class="product-single__description rte" itemprop="description">
  {{ product.description }}
</div>

3) Install star rating badge in product page (usually same file as step 2):

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

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

{% if product.compare_at_price_max > product.price %}
<span id="PriceA11y" class=‘visually-hidden’>{{ 'products.product.regular_price' | t }}</span>
<s class="product-single__price--compare"id="ComparePrice">
{{ current_variant.compare_at_price | money }}
</s>
{% endif %}

4) Install star rating badge in collection page (usually in product-grid-item.liquid):

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

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

<div class="h4 grid-view-item__title">{{ product.title }}</div>
{% 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>

Still need help? Contact Us Contact Us