Re: Change color on Star rating Product Grid

Andr1989 · ‎12-22-2023

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.

Dan-From-Ryviu · ‎12-22-2023

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.

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;
}

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎12-22-2023

Could you share your page URL to check?

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Andr1989 · ‎12-22-2023

Have send you a privat massage 🙂

Dan-From-Ryviu · ‎12-22-2023

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.

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;
}

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Andr1989 · ‎12-22-2023

Thanks alot that work!

Dan-From-Ryviu · ‎12-22-2023

You are very welcome

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

MrInappropriate · ‎04-10-2024

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!!!

Dan-From-Ryviu · ‎04-10-2024

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

{%- if template.name == 'collection' or template.name == 'search' -%}
<style>
.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;
}
</style>
{%- endif -%}

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

MrInappropriate · ‎04-11-2024

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!

ads · ‎10-24-2024

did you solve this?

MrInappropriate · ‎10-24-2024

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

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

ads · ‎10-24-2024

yes i am

Re: Change color on Star rating Product Grid

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

Community Blog Articles