A developer is troubleshooting a custom Shopify star rating section that displays ingredient ratings from metaobject data. The core issue: the star-filled class isn’t being applied to stars, preventing them from displaying as filled.
Initial Problem:
Star rating section built to dynamically update based on ingredient ratings
Everything functions except the filled star styling
Code includes Liquid templating with conditional logic to apply star-filled class when i <= rating_value
Attempted Solution:
A responder (BSS-TekLabs) identified a potential CSS syntax error—an extra semicolon in the .star-filled class that may prevent the color property from applying correctly
Provided corrected code version
Current Status:
After implementing the suggested fix, a new issue emerged: stars are no longer filling at all
Screenshots were shared showing the visual problem
The discussion remains unresolved with the developer awaiting further assistance
Note: Some text in the original posts appears corrupted or reversed, making portions difficult to parse accurately.
Summarized with AI on November 5.
AI used: claude-sonnet-4-5-20250929.
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 %}
/* 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 */
}
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:
