Customer Review Star 3

1{% assign userRating = product.metafields.custom.rating | default: 4.5 %}
2{% assign userRatingRounded = userRating | times: 2 | round | divided_by: 2.0 %}
3
4<div class="rating-container">
5  <span class="star-group">
6    {% for starIndex in (1..5) %}
7      {% assign starFloat = starIndex | times: 1.0 %}
8      {% assign halfPoint = userRatingRounded | plus: 0.5 %}
9      {% if starFloat <= userRatingRounded %}
10        <span class="icon-star full">★</span>
11      {% elsif starFloat == halfPoint %}
12        <span class="icon-star half">★</span>
13      {% else %}
14        <span class="icon-star empty">★</span>
15      {% endif %}
16    {% endfor %}
17  </span>
18  <span>{{ userRatingRounded }}/5 stars</span>
19</div>
20
21<style>
22.rating-container {
23  display: flex;
24  align-items: center;
25  gap: 8px;
26  font-family: Arial, sans-serif;
27  margin-bottom: 10px;
28}
29
30.star-group {
31  display: inline-flex;
32}
33
34.icon-star {
35  font-size: 20px;
36  line-height: 1;
37}
38
39.icon-star.full {
40  color: #333;
41}
42
43.icon-star.half {
44  color: #333;
45  opacity: 0.5;
46}
47
48.icon-star.empty {
49  color: #333;
50  opacity: 0.2;
51}
52</style>