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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- 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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- 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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- 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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- 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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- 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

gentlemoose · ‎02-11-2025

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."

Dan-From-Ryviu · ‎02-11-2025

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

{%- 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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

gentlemoose · ‎02-11-2025

Didn't work. 😞

Dan-From-Ryviu · ‎02-11-2025

Please share your store link so I can check

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

gentlemoose · ‎02-12-2025

Thanks Dan!

www.gentlemoose.ca

MarcWörner · ‎06-13-2025

Servus Männer,

my worke around... put it in your base.css on the bottom 🙂

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

Re: Change color on Star rating Product Grid

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

Community Blog Articles