Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
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);}
}
Hi,
Please share your store URL and if your store is password protected then also provide password too.
Thank you.
Awesome, that worked. But now there's a 5.0/5.0 text that popped up. How can i remove this?
Can you refresh now, was trying a different code.
Works!
But now the rating count is dropped one line
Implemented, problem persists
.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
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);}
}
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?
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!
Worked like magic on my website: vibrantbodymind.co.uk - also love the muted golden color. Thank you!
need some help, how to show 0.0 rating blank stars? if no rating..
thanks love you.
Please add below css code in bottom of assets/component-rating.css file
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024