@lowowl - please add this css to the very end of your component-rating.css file and check, should look like screenshot below
.rating-star:before {
-webkit-text-fill-color: rgb(255, 164, 28);}
Topic summary
Goal: change product review star color on collection/featured product grids (Shopify Crave, OS 2.0) to yellow.
What worked:
- Adding CSS in assets/component-rating.css for .rating-star::before with -webkit-text-fill-color: rgb(255,164,28) changed stars to yellow on collection pages.
- To remove the “5.0/5.0” text, hide p.rating-text.caption via CSS (display: none).
Layout fix:
- The rating count dropped to a new line; keeping p.rating-count.caption as display: inline-block helped, but the key fix was correcting syntax errors in component-rating.css (removing an extra closing brace in .rating-star::before and fixing “inline- block” spacing). After cleanup, alignment worked.
Alternatives/notes:
- Another suggestion set background: #FFA41C on .rating-star::before. Code snippets were central to the solution; screenshots showed before/after visuals.
Open questions (unresolved):
- Hiding stars when there are 0 reviews is not feasible with CSS alone (no unique selector; would also hide valid reviews).
- A user reported all items showing 5 stars after applying code; no fix posted.
- Request to show blank stars for 0.0 rating remains unanswered.
Status: initial color-change issue resolved; follow-up feature requests remain open.
1 Like