Implementation of star rating in collection pages – Shopify

How to add a small code (Liquid) to show a product specific rating on your collection pages for each product based on the reviews collected, number of stars and number of reviews.

What will be the result?

The code will check if the product has any reviews and if it does it will show the number of stars and the amount of reviews associated with the product.

Matching the colors to match the current brand colors.

The included code is an example, you can change it in any way you see fit.
For example, you can change the star icon to any icon of your choosing and any color of your choosing.
Since all the data is saved as Metafields, you get full control in regards of the design.

Where should I embed the star ratings?

The most recommended location would be the file which displays the products inside the collections, in most cases it would be:
sections/card-product.liquid

In other cases it can be product-card-grid.liquid or in a named folder for example: snippets/

The exact location is dependent on the template that your are using, but the most common place for adding the code is below the name of the product or the price.
This way its visible and easy to understand the association for the customer between the product and the ratings for it.

The code itself

Copy and paste it to the desired location to display the star ratings:

<!-- Flashy Reviews -->
{% if product.metafields.flashy.avg_rating and product.metafields.flashy.reviews_count %}
{% assign avg = product.metafields.flashy.avg_rating | round: 1 %}
{% assign full_stars = avg | floor %}

{% assign has_half_star = 0 %}
{% if avg > full_stars %}
  {% assign has_half_star = 1 %}
{% endif %}

{% assign empty_stars = 5 | minus: full_stars | minus: has_half_star %}

<div class="product-rating" style="display: flex; align-items: center; gap: 4px;">
  <div class="stars" style="color: #f5a623; font-size: 14px;">
    {% for i in (1..full_stars) %}
      ★
    {% endfor %}

    {% if has_half_star == 1 %}
      <span style="position: relative; display: inline-block; width: 0.8em;">
        <span style="color: #f5a623;">★</span>
        <span style="position: absolute; top: 0; left: 50%; color: #e0e0e0; overflow: hidden; width: 50%;">★</span>
      </span>
    {% endif %}

    {% for i in (1..empty_stars) %}
      <span style="color: #e0e0e0;">★</span>
    {% endfor %}
  </div>
  <span class="review-count" style="font-size: 12px; color: #666;">
    ({{ product.metafields.flashy.reviews_count }})
  </span>
</div>
{% endif %}
<!-- End Flashy Reviews -->

For any help

If you are unsure of where to paste the code, it is recommended that you get help of a developer.