css - Shopify Dawn + Product Reviews App - Remove Star rating on product page, if no reviews

Solution:

I'm pretty sure this is not possible because the attributes are just not there. The only way to get the rating from attributes is by using thearia-label of a child component. This leaves you with a JS-based solution, as the CSS:has() selector still doesn't have good browser support.

document.querySelectorAll('.spr-starrating .spr-stars span').forEach((el) => {
  if (el.getAttribute('aria-label') === '0 out of 5 stars') el.parentElement.parentElement.style.display = 'none' 
})
Copy code

For a CSS-based solution, you could use

.spr-starrating:has(span[aria-label="0 out of 5 stars"]) {
  display: none;
}
Copy code

But this won't work in every browser, especially Firefox. See Caniuse (https://caniuse.com/css-has) for more information. Using both approaches at the same time would be suitable then.

Keep in mind that thearia-label might also be different if your shop is in a language other than English and you'd need to change the snippets appropriately.

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.