Setup Main Review Widget

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.


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

Step 1: Install Script And CSS Before The </body> Tag 

Place the code below in 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>

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}}">   
{{ 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>

Step 3: Install Star Rating Badge In Product Page

 Usually in the same file as where the main widget codes is installed

<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 %}

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 }}" 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>
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.