Change colour of product rating

Change colour of product rating

ads
Excursionist
27 0 12

i want to change the color on the star rating in the product grid to the color shown on the product page.

Screenshot 2024-10-24 at 16.57.36.pngScreenshot 2024-10-24 at 17.03.00.png

Replies 3 (3)

kevinkarma55
Shopify Partner
84 9 11
//Please when you post a requestion have the following so that fellow community members //can help you better:
//Preview Link: link that we can see your issue 
//Theme name: name of the theme e.g.: Down
//Can code: Yes / No / Kindof


By that can you share your preview link and theme name?

Please remember to Like & Mark Solution to the post if it helped you.
Thanks !
If you'd like to support me, you can Buy Me a Coffee
Need help with anything related to Frontend?
Checkout kevinkarma.me

Entaice
Trailblazer
149 10 42

To change the color of the star rating in the product grid to match the product page color, you can add some custom CSS. Go to your Shopify admin, then navigate to ""Online Store"" > ""Themes."" Click on ""Customize"" for your current theme.

Next, look for ""Theme settings"" or ""Edit code."" If you see ""Edit code,"" click on it, and then find the appropriate CSS file, usually called `theme.scss.liquid` or `styles.css.liquid`.

Add this snippet at the bottom:

```css
.product-grid .star-rating {
color: #yourColorCode; / Replace #yourColorCode with the desired hex color /
}
```

Make sure to replace `#yourColorCode` with the hex code of the color you want to use. Save the changes, and it should reflect on your product grid.

You can increase your revenue by 5% by replacing Shopify's default sorts. Test for free. **Show me how**

LizHoang
Shopify Partner
152 17 33

Hi @ads, thanks for your question. 

 

To change the color of the Star Rating on the product page, you can add the following code to your Custom CSS section. Please go to Online Store > Theme > Customize > Product page > Product Information > Custom CSS. 

 

.rating-star:before {
  content: "\2605\2605\2605\2605\2605";
  background: linear-gradient(
    90deg,
    #colorcode

 var(--percent),
    rgba(var(--color-foreground), 0.15) var(--percent)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

 

LizHoang_0-1729825964659.png

 

I hope that would be helpful. 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!