Remove Star Rating Caption on Collection Page

Store Design

Topic summary

Main issue: Hide the product star rating caption/count on collection and other non-product pages on mobile (Focal theme, Olivelle.com), while keeping product page ratings.

Context and attempt:

  • The merchant hid the caption on desktop using CSS targeting .rating__caption.
  • On mobile, the hide did not apply, likely due to a missing closing brace in the added CSS.

Solution provided:

  • Edit Assets > theme.css and add a proper rule: ensure a closing ‘}’ precedes a complete selector for [dir=“ltr”] .rating__caption with display: none.
  • The helper noted the original CSS block lacked ‘}’, which prevented the rule from applying consistently across views.

Outcome:

  • Merchant confirmed the fix worked. The caption is now removed as desired.

Notes:

  • Screenshots were shared to illustrate the correct desktop appearance.
  • No additional theme settings or JavaScript changes were required.

Status: Resolved. No further action items raised.

Summarized with AI on February 5. AI used: gpt-5.
1

Hi there. My website is Olivelle.com and I am using the Focal Theme. I am looking to remove the product star rating count everywhere other than on the product page itself on mobile. I was able to remove the count to display like this on desktop by adding the code:

[dir=“ltr”] .rating__caption {

display: none;

Here are photos of how it looks on desktop which is what I want displayed on mobile too. Any help is appreciate, thanks!!

Screenshot1.jpg
Screenshot1.jpg956×460 32.8 KB

Screenshot2.jpg
Screenshot2.jpg1251×429 31.3 KB

2

Hi @Rikkipilewski ,

Go to Assets > theme.css and paste this at the bottom of the file:

}
[dir="ltr"] .rating__caption {
    display: none;
  }

Because your css file is missing ‘}’ when adding code for desktop so when you add code it will work only at desktop, you just need to add all the code I send it will work fine

3

This is great, thank you so much!

1 Like