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

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)

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

{{ product.title }}

• 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):

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!

Related Articles:

• How to add Review Box to the Product Page and Homepage?
• What can you do when reviews still are not working?
• How to create a staff account, and/or why does support team need it?
• Integrating your Ali Reviews to Google Shopping Ads