Include 5 Stars in Ratings Menu Widget

Hi all,

I’m using the rating menu widget, which shows the following output by default:

4 stars & Up
3 stars & Up
2 stars & Up
1 star & Up

Now I would also like to show the refinement “5 stars”. Is that possible? If so, where can I find that in the documentation?

If you need more info, let me know. Thanks a lot! :slight_smile:


It is possible using the max option, by setting it to 6 you will get:

5 stars & Up
4 stars & Up
3 stars & Up
2 stars & Up
1 star & Up

But since “5 stars & Up” is incorrect (5 being the max value) you may want to customize the widget to display a more correct label.

Here’s an example with a custom rating menu widget:

1 Like

Hi @yannick.croissant,

Awesome, that worked – thank you!


Hi @yannick.croissant,

Now the rating menu works, but in the current refinements widget 6 is also getting listed when I choose 5 as rating. Is there a way to remove the 6 refinement from the current refinements widget?

Thank you!

I’m not sure what you mean by “widget 6”. If you use 5 star rating, the attribute should only have integer between 0 and 5. Do you have records with higher value?

Thank you for looking at this, @julienbourdeau!

Here’s my use case. I have values ranging from 0 to 3 (0, 1, 2 or 3). Now I’d like to have a rating menu widget, which shows the following options:

– 3 stars (shows only items with value of 3)
– 2 stars & up (shows only items with value 2 or 3)
– 1 star & up (shows only items with value 1, 2 or 3)

Items with value 0 are never shown, if any of the rating menu items are active. To get the highest value 3 showing up in my rating menu, I set the max to 4. This works fine.

Now my problem is the current refinement widget, which shows the following:

3 stars (active in rating menu): 3 & 4
2 stars & Up (active in rating menu): 2, 3 & 4
and so on…

4 doesn’t exist as a value in the index.

Hi @aarongerig, is it possible to provide a codesandbox? You can find starter templates here.

Hi @cindy.cullen,

Thanks for the suggestion. Here’s a sandbox, which behaves exactly like my app.

I have a rating menu with 3 categories. But in the current refinement widgets it always shows number 4 additionally, event though that doesn’t exist in my case. Let me know if you need to know more.

Hi @aarongerig
Thanks for proving the codesandbox. I think you can easily address your issue with wirting a custom transformItems for your current refinements widget:

I’ve modified you code sample to reflect what i have in mind:

Let me know if this helped.

1 Like

@Youcef works perfectly, thank you!