Replacing Shopify Product Review(SPR) app with Main Review Widget

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 Pages
  3. Replace Star Rating Badge In Product Pages
  4. Replace Badge In Collection Pages

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

*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}}"
data-product-type="{{product.type}}"> 
{{ product.metafields.stamped.reviews }} 
</div>

Step 3: Replace Star Rating Badge In Product Pages

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 }}" data-product-type="{{product.type}}" data-product-title="{{product.title}}"  style="display: inline-block;">{{ product.metafields.stamped.badge }}</span>

Step 4: Replace Star Rating 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 }}" data-product-type="{{product.type}}" data-product-title="{{product.title}}"  style="display:block;">{{ product.metafields.stamped.badge }}</span>

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.