Star ratings on Shopify

This article will show you how to show star ratings on the Shopify product page and Shop page.

It would be great if you have star ratings on your Shopify product page and shop page. Because they can help you build trust in your products and drive more sales to your shop. To have this feature on your Shopify product and shop page, please make sure you have installed Ryviu app in your store.

I. Show star ratings on Shopify product page

You can show star ratings on your Shopify product page by adding the snippet code.

Here’re details guideline on how to include the snippet code to display star rating on the product page:

STEP 1:

Go to your Online store -> Themes -> Select the Theme that you want to add code

STEP 2:

Then click Action -> Edit Code.

STEP 3:

Find product-template.liquid or product-meta.liquid file, and then find the following code snippet:

{{ product.title }}

STEP 4:

Copy the code below and paste it under the code above

<!-- RYVIU APP :: WIDGET-TOTAL -->
<div class="review-widget">
    <ryviu-widget-total reviews_data="{{product.metafields.ryviu.product_reviews_info  | escape  }}" product_id="{{product.id}}" handle="{{product.handle}}"></ryviu-widget-total>
</div>
<!-- / RYVIU APP -->

After the steps above, we will have some lines of codes like this:

Remember to Save what you have done.

Here is how it looks in the front end.

You can take a look at this video to see the detailed process.

II. Show star ratings on Shopify Shop page

Here is the detailed guideline on how to add the code snippet to display star ratings on the collection page:

• Similar to the process above, navigate to your Online store -> Theme -> Select the Theme that you want to add the code -> Action -> Edit Code.

• Open product-card-grid.liquid or product-card.liquid or product-grid-item.liquid or product-thumbnail.liquid or product-info.liquid file (each theme has a different name's file) in Snippets, then find the code as follow:

{{ product.title }}

• Copy the code below and paste under the code above

<!-- RYVIU APP :: COLLECTION-WIDGET-TOTAL -->
<div class="ryviu-collection">
	<ryviu-widget-total collection=1 reviews_data="{{product.metafields.ryviu.product_reviews_info  | escape  }}" product_id="{{product.id}}" handle="{{product.handle}}"></ryviu-widget-total>
</div>
<!-- RYVIU APP -->

Here is how it looks on the front end:

Please take a look at this video to get more details.

If you have any questions, please feel free to contact us via live chat.