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 (1–5) to your CMS for star ratings.
- Upload filled and empty star icons to assets.
- Place 5 star images in a Div Block on your CMS template.
- Use Conditional Visibility to show filled stars when the rating is ≥ the star number, and empty stars otherwise.
- Optionally, use a custom Embed element with JavaScript for dynamic rendering.
Yes, you can display star ratings for accommodations in your Webflow CMS and represent them visually with star images on the frontend.
1. Add a Star Rating Field to Your CMS Collection
- Go to your CMS Collection (e.g., "Golf Packages" or "Accommodations").
- Add a Number field (name it something like “Star Rating”).
- Set a minimum of 1 and a maximum of 5.
2. Upload Star Images
- Upload two versions of a star icon to your project assets:
- Filled Star (e.g., for a selected/starred rating)
- Empty Star (e.g., for unselected/rest of 5 total stars)
3. Design the Star Rating Visuals on the Page
- In your CMS Collection Page or Collection List:
- Add a Div Block to serve as the star container.
- Insert 5 Image elements inside it (one for each potential star).
- Each image will either show a filled or empty star based on the CMS rating.
4. Use Conditional Visibility for Each Star
- Select each star image (1 through 5), and apply Conditional Visibility like:
- Image 1 (Star 1): Show if “Star Rating is greater than or equal to 1”
- Image 2 (Star 2): Show if “Star Rating is greater than or equal to 2”
- Repeat up to Image 5
- For filled stars: Use visibility conditions where the rating is ≥ the number.
- For empty stars: Use conditions where the rating is less than the number, and swap to the empty icon.
5. Optional: Use Dynamic Embeds (Advanced)
- If you want to dynamically render stars using a custom script or SVGs, you can utilize the Embed element with inline logic using the number field.
- However, Webflow’s native CMS does not allow loops or inline logic directly, so for advanced cases you may need custom JavaScript hosted via the Embed element.
Summary
Add a Number field to your CMS for star ratings, use Conditional Visibility to show up to five filled or empty star images based on the rating, and position them visually in your design to reflect the accommodation quality.
