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