Can I display star ratings for accommodations in my Webflow CMS-based golf packages and have them reflected with star images on the frontend page?
TL;DR
- Add a Number field for star rating in the CMS collection with values from 1–5.
- On the front-end, place five star icons and use Conditional Visibility to display filled or empty stars based on the CMS rating value.
Yes, you can display star ratings for accommodations using Webflow CMS and show them as visual star images on your front-end pages.
1. Add a Star Rating Field in the CMS
- Go to CMS Collections, open your golf packages collection.
- Add a new Number field called something like "Star Rating".
- Set constraints (e.g., minimum: 1, maximum: 5, step: 1) to ensure consistency.
2. Use a Dynamic List to Bind Rating Data
- On your front-end template (e.g., package detail page), use a Collection List or the page bound to the golf package CMS item.
- Bind an element to your Star Rating field to dynamically reflect the rating.
3. Add Star Icons for Visual Representation
- In your layout, add five inline star icons using either images or font icons (e.g., SVGs or emojis).
- For each star, use Conditional Visibility to compare it with the CMS value:
- First star: Show if Star Rating is greater than or equal to 1.
- Second star: Show if ≥ 2.
- Continue until the fifth star.
4. Optional: Filled vs. Empty Stars
- Use two sets of stars (e.g., filled and outlined) for a clearer UI.
- For filled stars: Show if current index ≤ rating.
- For outlined stars: Show if current index > rating.
Summary
To visually display accommodation star ratings in Webflow CMS packages, add a Number field for the rating, then use five star icons with Conditional Visibility rules to show the correct number of stars dynamically from the CMS.