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.

Here are the codes to replace.

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>

2) To replace the reviews widget in product page (usually in product.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>

3) To replace the badge 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>

4) To replace badge in collection pages (usually in product-grid-item.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