filled stars in rating section

[arkos]

I am having a problem I built this star rating section to display on ingredient pages and dynamically update that ingredients rating. Everything seems to be working except the star.filled class is not being applied. here is the section code. any help would be greatly appreciated.

star-rating.liquid - Custom section to display a star rating based on meta object data.
{% endcomment %}

{% if metaobject and metaobject.ingredient_rating %}
{% assign rating_value = metaobject.ingredient_rating.value %}
{% else %}
{% assign rating_value = 0 %}
{% endif %}

<!-- HTML and Liquid Markup -->
<div class="star-rating-container">
<!-- Star rating block -->
<div class="star-rating" data-rating="{{ rating_value }}">
{% for i in (1..5) %}
<span class="star {% if i <= rating_value %} star-filled {% endif %}">&#9733;</span>
{% endfor %}
</div>

<!-- Number rating block -->
<div class="rating-number">
{{ rating_value }}/5
</div>
</div>

<!-- Optional CSS Styling directly in the file -->
<style>
/* Container for star rating and number */
.star-rating-container {
display: flex; /* Flexbox to align stars and number horizontally */
align-items: center; /* Vertically centers the stars and number */
justify-content: center; /* Centers the entire block horizontally */
gap: 10px; /* Adds space between stars and the number */
}

/* Styling for the stars */
.star-rating {
display: flex; /* Flexbox for inline stars */
font-size: 4rem; /* Adjust size as needed */
}

/* Individual star styling */
.star {
display: inline-block;
margin-right: 5px; /* Space between each star */
}

/* Styling for filled stars */
.star-filled {
color: #f5c518;!important; /* Gold or your preferred color for filled stars */
}

/* Number rating styling */
.rating-number {
font-size: 2rem; /* Adjust size as needed */
font-weight: bold;
color: #333; /* Adjust to match your theme */
}

</style>

link to live page: https://thesmellypanda.com/pages/ingredient/cinnamon-essential-oil-spiced-brilliance-for-skin

[BSS-TekLabs]

It looks like the issue might be due to an extra semicolon in your CSS for the .star-filled class, which prevents the color property from being applied correctly. Here's a corrected version of your code:

[BSS-TekLabs]

{% comment %}
star-rating.liquid - Custom section to display a star rating based on meta object data.
{% endcomment %}

{% if metaobject and metaobject.ingredient_rating %}
  {% assign rating_value = metaobject.ingredient_rating.value %}
{% else %}
  {% assign rating_value = 0 %}
{% endif %}

<!-- HTML and Liquid Markup -->
<div class="star-rating-container">
  <!-- Star rating block -->
  <div class="star-rating" data-rating="{{ rating_value }}">
    {% for i in (1..5) %}
      <span class="star {% if i <= rating_value %} star-filled {% endif %}">&#9733;</span>
    {% endfor %}
  </div>

  <!-- Number rating block -->
  <div class="rating-number">
    {{ rating_value }}/5
  </div>
</div>

<!-- Optional CSS Styling directly in the file -->
<style>
/* Container for star rating and number */
.star-rating-container {
  display: flex; /* Flexbox to align stars and number horizontally */
  align-items: center; /* Vertically centers the stars and number */
  justify-content: center; /* Centers the entire block horizontally */
  gap: 10px; /* Adds space between stars and the number */
}

/* Styling for the stars */
.star-rating {
  display: flex; /* Flexbox for inline stars */
  font-size: 4rem; /* Adjust size as needed */
}

/* Individual star styling */
.star {
  display: inline-block;
  margin-right: 5px; /* Space between each star */
}

/* Styling for filled stars */
.star-filled {
  color: #f5c518 !important; /* Gold or your preferred color for filled stars */
}

/* Number rating styling */
.rating-number {
  font-size: 2rem; /* Adjust size as needed */
  font-weight: bold;
  color: #333; /* Adjust to match your theme */
}

</style>

[BSS-TekLabs]

Please check this update code for you @arkos 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[arkos]

With this updated code the number of stars is not filling.