Solved

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

Andr1989
Excursionist
17 0 2

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

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7995 1560 1584

This is an accepted solution.

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.pngScreenshot 2023-12-22 at 14.19.25.png

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

 
 
 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 8 (8)

Dan-From-Ryviu
Shopify Partner
7995 1560 1584

Could you share your page URL to check?

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Andr1989
Excursionist
17 0 2

Have send you a privat massage 🙂 

Dan-From-Ryviu
Shopify Partner
7995 1560 1584

This is an accepted solution.

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.pngScreenshot 2023-12-22 at 14.19.25.png

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

 
 
 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Andr1989
Excursionist
17 0 2

Thanks alot that work!

Dan-From-Ryviu
Shopify Partner
7995 1560 1584

You are very welcome

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

MrInappropriate
Excursionist
14 1 0

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
Shopify Partner
7995 1560 1584

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 to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

MrInappropriate
Excursionist
14 1 0

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!