Our Elements Product Review widget offers extensive customisation opportunities. To get up and running you only need the code from the Product Reviews tab. As well as showcasing your Reviews, the widget automatically includes Product Review Data on the page as Rich Results Markup, this is Search Engine Friendly markup from Schema.org to get you Product Review Stars in Organic Search results.

Requirements

Available on all REVIEWS.io plans

Navigation

Log into your Reviews.io Dashboard
Select Integrations
Select Shopify

Instructions

If you copy the widget code from the Shopify page this already include the Shopify parameters and some additional Schema markup in the code. If you need to add extra data to the Rich Results markup, you can do so by adding an object to the Product Review settings.

STEP 1

Copy Required Code Snippets

You can customise your widget code on this screen in your dashboard by selecting the appropriate tab.

STEP 2

Edit Shopify Theme

In Shopify, navigate to Online Store > Themes > Edit Code

STEP 3

Add Widget Code to Store

Navigate to the sections/product-template.liquid file and paste the Product Review Widget code, which you copied in step 1, wherever you want the widget to be displayed.

Product Rating Snippet

STEP 1

Add Resources to Theme

A rating snippet shows the star rating for a product and is best displayed on category pages and at the top of a product page. To install, add the following code at the bottom of your theme.liquid file before the closing <body> tag

REMEMBER TO ADD THE SCRIPT FROM YOUR DASH OR ADD WITHIN 'ADD_STORE' BELOW

<script src="https://widget.reviews.io/product/dist.js"></script>
<script src="https://widget.reviews.io/rating-snippet/dist.js"></script>
<link rel="stylesheet" href="https://widget.reviews.io/rating-snippet/dist.css" />
<script>
ratingSnippet("ruk_rating_snippet",{
store: "ADD_STORE",
color: "#10D577",
linebreak: true,
text: "Reviews"
});
</script>

STEP 2

Add Star Rating to Products

Now add the following code wherever you want the rating for a product to be displayed, this code is prepared for shopify so that it pulls in the current product's sku.

<div class="ruk_rating_snippet" data-sku="{{ product.handle }};{{ product.variants | map: 'sku' | join: ';' }};{{ product.variants | map: 'id' | join: ';' }}"></div>