How can I alter the star rating color in the product grid?

Store Design
1

Hi guys,

i want to change the color on the star rating in the product grid but i really cant fint out where to do it.

Star rating.png
Star rating.png438×165 9.72 KB

2

Could you share your page URL to check?

3

Have send you a privat massage :slightly_smiling_face:

4

You can change it from Online store > Themes > Customize > Collections > Default collection > Product grid > Color scheme, click Edit > change color in Text. But it will change the color of the product title.

Screenshot 2023-12-22 at 14.18.56.png
Screenshot 2023-12-22 at 14.18.56.png1671×893 167 KB

Screenshot 2023-12-22 at 14.19.25.png
Screenshot 2023-12-22 at 14.19.25.png1314×785 103 KB

If you want to change color of star only then you can add this CSS code below in Custom CSS of Product grid, change #3b61ef in code with your color code

.rating-star:before {
    content: "\2605\2605\2605\2605\2605";
    background: linear-gradient(90deg,#3b61ef var(--percent),rgba(var(--color-foreground),.15) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Screenshot 2023-12-22 at 14.23.26.png
Screenshot 2023-12-22 at 14.23.26.png1669×919 187 KB

5

Thanks alot that work!

6

You are very welcome

7

Hello - thank you so much, it’s exactly what I need. Although it works in the design view (I see the stars change colour), when I try and save, I get a red message at the bottom saying “Online store publisher session can’t be published”. Do you know why this might be?

Thank you!!!

8

So please add code to theme.liquid file, after and check again

{%- if template.name == 'collection' or template.name == 'search' -%}

{%- endif -%}
9

Thank you so much but that doesn’t work; the stars are still the same colour. I’ve tried to rename and upload my theme.liquid file but it won’t let me!

I really do appreciate your help with this, there is no way that I’d be able to work it out on my own!

10

did you solve this?

11

Yeah I just sent Judge.me a message and they fixed it :slightly_smiling_face:

I’m not sure how. Are you using Judge.me too?

12

yes i am

13

Amazing, thanks, it looks like it will work and then shopify won’t let me publish it. Something is wrong. I’m using “New Refresh.”

14

Plesae use this code and add it to your theme.liquid file after tag instead of add code to Custom CSS

{%- if template.name == 'collection' or template.name == 'search' -%}

{%- endif -%}
15

Didn’t work. :disappointed_face:

16

Please share your store link so I can check

17

Thanks Dan!

www.gentlemoose.ca

18

Servus Männer,

my worke around… put it in your base.css on the bottom :slightly_smiling_face:

.rating-star:before {
content: “★★★★★” !important;
background: linear-gradient(
90deg,
#FFD700 calc(var(–rating, 0) * 20% + var(–rating-decimal, 0) * 10%),
rgba(0, 0, 0, 0.15) calc(var(–rating, 0) * 20% + var(–rating-decimal, 0) * 10%)
) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
display: inline-block !important;
font-size: inherit !important;
}
.rating-star::before {
font-size: 1.5rem !important;
}