How to display product rating (with stars) on the product page

Modified on Fri, 01 Apr 2022 at 05:45 PM

To start with, let's assume that metafield we're going to display is already created. If you don't know how to create a metafield yet, you may want to check out this article from our help portal. Also, if don't know how to edit theme files yet, there's another great tutorial for you.

For this tutorial, we've created a product rating metafield with the following attributes:

1) type - rating;

2) namespace - additional_info;

3) key - subtitle;

4) value - the product rating itself.

Great. Now that the metafield is created, we need to add the code. Let's create a theme snippet for our custom code and name it "display-product-rating":

The most important part of our journey -- adding the custom code into the snippet. We're going to use some sophisticated Liquid code. In addition to this, we're going to use the HTML/CSS code from an awesome tutorial on W3Schools. Copy the code from below, paste it into the "display-product-rating" snippet and save the changes.

The code:

{% assign reviews = product.metafields.additional_info.rating.value %}
{% if reviews %}
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <style> 
   .checked {
     color: orange;
 }
 </style>
 {% assign rating = reviews.rating | round %}
 {% assign max = reviews.scale_max | round %}
 {% for iteration in (1..max) %}
  {% if iteration <= rating %}
   <span class="fa fa-star checked"></span>
  {% else %}
   <span class="fa fa-star"></span>
  {% endif %}
 {% endfor %}
{% endif %}

Please note that only whole numbers can be used to represent the product rating. For instance, the rating of 3.3 and the maximum rating of 5.9 would be rounded to 3 and 5 respectively.

Congratulations, you made it to the finale! All we need to do to make the magic happen is to connect the custom snippet with the product page template with the following Liquid code:

{% render "display-product-rating" %}

Go to the product page template file and place the code in the perfect spot. In our case, it would be right under the product tittle: