How to add star rating into the Product and Collection Page?

Troubleshooting Oct 20, 2020 2 min read Leave a comment

Table of Contents

It would be great if you have star ratings on your Shopify Product Page and Collection Page to earn customers’ trust and improve sales. If you still not know how to add star ratings from Ali Reviews to your store, this post will guide you through.

1. Add star rating to your Product page

Go to your Online store > Theme > Find the Theme that you’re using > Action > Edit Code.

Search for product.liquid file (or product-template.liquid in some cases)

How To Find product.liquid file (or product-template.liquid in some cases)

Then, find the following code in line (A):

{{ product.title }}

How To Find product.title In product.liquid File

Copy this code snippet (B):

<div product-id="{{ product.id }}" class="alr-display-review-badge"></div>

Insert the code snippet (B) under the above code line (A):

Place To Add Code In product.liquid File To Show Rating Star In The Product Page

And that’s it!

Please note that: product.liquid or product-template.liquid can be named differently due to a variety of themes.

If you can’t make the star rating appear on your Product page, please contact our specialist via in-app live chat or email at support@fireapps.io

2. Add star rating to your Collection page

If you have ratings to the Product page already, be continued to add/integrate it into the liquid element on the Collection page for better results.

To show the rating star in the Collection page, you need to add the code snippet into the product-grid-item.liquid or product-card-grid.liquid file, located in your default theme. Here’s details that guide you how to display reviews on it:

Go to the product-grid-item.liquid or product-card-grid-liquid file. Then, find the following code line (A):

{{ product.title }}

Copy this code snippet (B):

<div product-id="{{ product.id }}" class="arv-collection arv-collection--{{ product.id }}"></div>

Insert the code snippet (B) under the code line (A).

If you can not find product-grid-item.liquid or product-card-grid.liquid, let’s try on product.card.liquid OR product.item.liquid OR product.info.liquid

That’s it! You’re done.

If you have any troubles editing the liquid code, please contact us via live chat or email at support@fireapps.io and we’ll be happy to assist!