Skip to main content

How to add star rating to product card?

Introduction​

Before the restriction of Asset API on 3rd party apps on updating theme code, we could automatically add the snippet to your theme code and the star should show on your store like this:

However, we can no longer now. Since Shopify want 3rd party apps to leave no code behind after every installation, and also raise the standard for the Shopify apps. Our access of storefront apps has been restricted, and we can no longer use Shopify Asset API to update automatically for you.

Therefore, you will need to manually add our snippet to your theme. Here is the snippet you need to add: 

<div
  class="AirReviews-Widget AirReviews-Widget--Stars"
  style="margin-top:0.7rem"
  data-review-avg="{{ card_product.metafields.air_reviews_product.review_avg }}"
  data-review-count="{{ card_product.metafields.air_reviews_product.review_count }}"
></div>

Option 1: Use theme default star rating​

For every product grid that is up-to-date with Shopify standard, it should have the compatible option to display the rating from a review app:

If you choose this Shopify friendly option, the star rating design would not be so nice-looking, but it will follow your theme design accordingly. By default, it would not show on product with no reviews.

Option 2: Add our snippet to your theme code.​

Shopify now recommends that merchants should add the custom liquid block themselves for the sake of transparency, so merchants are aware of the theme changes. During the scope of this tutorial, we will use the Dawn theme.

Find the product card liquid file and insert snippet​

As in Dawn theme, you can find the best position is before the theme rating show position. If you cannot find a way to do it, you can reach out to our support.

Here is the snippet. Please keep in mind that this snippet will work perfectly in case of Dawn theme since product liquid object in this theme is card_product, in some other theme, it may differ like: product_card, product. So please change it accordingly to your scenario.

<div
  class="AirReviews-Widget AirReviews-Widget--Stars"
  style="margin-top:0.7rem"
  data-review-avg="{{ card_product.metafields.air_reviews_product.review_avg }}"
  data-review-count="{{ card_product.metafields.air_reviews_product.review_count }}"
></div>

Then, you hit save and you should be able to see it on your store