Replacing Shopify Product Review(SPR) app with Widget 2.0

This is an installation guide for users who have Shopify Product Review(SPR) app installed in their theme currently. If you do not have it in your theme, please use this guide instead.

NOTE: For users who have just installed Stamped.io from the app store, step 1 & 2 should have been automatically set-up by the app. Please check your product pages to see if the product reviews widget is present, and skip them if that is the case.


In This Guide

  1. Install Script And CSS Before The /body Tag
  2. Replace Main Review Widget In Product Page
  3. Replace The Badge In Product Page With Widget 2.0 Badge
  4. Replace Badge In Collection Pages

Step 1: Install Script And CSS Before The </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: Replace Main Review Widget In Product Page 

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

Find:

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

Replace with:

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

Step 3: Replace The badge In Product Page With Widget 2.0 Badge

Find: 

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

Replace with:

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

Step 4: Replace Badge In Collection Pages

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

Find: 

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

Replace with:

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

Still need help? Contact Us Contact Us