Solved

Change Product Review star color in Product Grid, Featured Collection

lowowl
Tourist
9 0 1

lowowl_0-1655439524896.png

lowowl_1-1655439539972.png

 

I have already managed to edit the color of product rating stars in the main product page, but unable to change the color in Collections. The theme I'm using is Crave (i believe is Online Store 2.0).

 

Can anyone help me change the color to yellow in Collection?

Accepted Solution (1)
suyash1
Shopify Partner
9124 1135 1481

This is an accepted solution.

@lowowl - this code, it has 2 end brackets "}", remove one of them and everything will work fine.

 

.rating-star::before {
  content: '★★★★★';
  background: linear-gradient(
    90deg,
    var(--color-icon) var(--percent),
    rgba(var(--color-foreground), 0.15) var(--percent)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgb(255, 164, 28);}
}

 

 

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session

View solution in original post

Replies 22 (22)

suyash1
Shopify Partner
9124 1135 1481

@lowowl - can you please share this page link?

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session

Denishamakwana
Shopify Partner
1408 173 231

Hi,

Please share your store URL and if your store is password protected then also provide password too.

Thank you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
suyash1
Shopify Partner
9124 1135 1481

@lowowl - please add this css to the very end of your component-rating.css file and check, should look like screenshot below

.rating-star:before {
    -webkit-text-fill-color: rgb(255, 164, 28);}

 

suyash1_0-1655444669343.png

 

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
lowowl
Tourist
9 0 1

Awesome, that worked. But now there's a 5.0/5.0 text that popped up. How can i remove this? 

lowowl_0-1655445071727.png

 

suyash1
Shopify Partner
9124 1135 1481

@lowowl - not able to see that text 5.0/5.0

 

did you remove it?

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
lowowl
Tourist
9 0 1

Can you refresh now, was trying a different code.

suyash1
Shopify Partner
9124 1135 1481

@lowowl - try this css, same file as before

p.rating-text.caption {display: none;}
To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
lowowl
Tourist
9 0 1

Works! 

 

But now the rating count is dropped one line 

lowowl_0-1655445939270.png

 

suyash1
Shopify Partner
9124 1135 1481

@lowowl - please try this

p.rating-count.caption {display: inline-block;}
To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
lowowl
Tourist
9 0 1

Implemented, problem persists

suyash1
Shopify Partner
9124 1135 1481

@lowowl - where did you add it? can not see it in code file

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
lowowl
Tourist
9 0 1
.rating {
  display: inline-block;
  margin: 0;
}

.product .rating-star {
  --letter-spacing: 0.8;
  --font-size: 1.7;
}

.card-wrapper .rating-star {
  --letter-spacing: 0.7;
  --font-size: 1.4;
}

.rating-star {
  --percent: calc(
    (
        var(--rating) / var(--rating-max) + var(--rating-decimal) *
          var(--font-size) /
          (var(--rating-max) * (var(--letter-spacing) + var(--font-size)))
      ) * 100%
  );
  letter-spacing: calc(var(--letter-spacing) * 1rem);
  font-size: calc(var(--font-size) * 1rem);
  line-height: 1;
  display: inline-block;
  font-family: Times;
  margin: 0;
} 

.rating-star::before {
  content: '★★★★★';
  background: linear-gradient(
    90deg,
    var(--color-icon) var(--percent),
    rgba(var(--color-foreground), 0.15) var(--percent)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgb(255, 164, 28);}
}
.rating-count.caption {display: inline-block;}   
}
.rating-text {
  display: none;
}

.rating-text.caption {display: none;}
}
@media (forced-colors: active) {
  .rating {
    display: none;
  }

  .rating-text {
    display: block;
  }
}

 

Here's the entire file

suyash1
Shopify Partner
9124 1135 1481

This is an accepted solution.

@lowowl - this code, it has 2 end brackets "}", remove one of them and everything will work fine.

 

.rating-star::before {
  content: '★★★★★';
  background: linear-gradient(
    90deg,
    var(--color-icon) var(--percent),
    rgba(var(--color-foreground), 0.15) var(--percent)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgb(255, 164, 28);}
}

 

 

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
lowowl
Tourist
9 0 1

Hi, would like to ask for help again. I want to remove the stars if there are 0 reviews available for the product. What can I do? 

lowowl_0-1655710655094.png

 

suyash1
Shopify Partner
9124 1135 1481

@lowowl - there is no unique class or id to this image, if we add any css to hide it, then it will hide existing reviews too

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
Andrew220
New Member
4 0 0

Hello! I used your code and all the star ratings show up on my Featured Product collection. However, all of them are 5-star ratings, even for the products that have 4,3,2 star ratings. How can I fix that?

Thanks!

vibrantbodymind
Tourist
6 0 2

Worked like magic on my website: vibrantbodymind.co.uk - also love the muted golden color. Thank you!

kabirsk0125
Shopify Partner
1 0 0

need some help, how to show 0.0 rating blank stars? if no rating..

vitalsuppsco
Visitor
1 0 0

thanks love you. 

Denishamakwana
Shopify Partner
1408 173 231

Please add below css code in bottom of assets/component-rating.css file

.rating-star::before {
           background: #FFA41C;
}
 
Thank you.
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme