Collection Ratings puts your star rating and review count under each product card on your collection and search pages, so shoppers can compare products at a glance before they click.
Shows on: Product cards on collection pages, search results and anywhere your theme lists products
Add it from: Settings ▸ Widgets ▸ Collection Ratings ▸ Instructions
Needs: The Quoli Core Script app embed, and one line of code in your product card
Plans: Every plan
Add it to your product cards
Product cards are part of your theme's code, so Collection Ratings is a short snippet rather than a block. You add it once, and it shows on every card.
Make sure the Quoli Core Script app embed is on: theme editor ▸ App embeds.
In Quoli, open Settings ▸ Widgets ▸ Collection Ratings ▸ Instructions and click Copy code.
In your theme's code, open the product card snippet (often
card-product.liquid) and paste the code under the product title. On a theme that offers a Custom Liquid block in its product card, paste it there instead.Save, and check a collection page.
<quoli-collection-rating product-id="{{ product.id }}"></quoli-collection-rating>The code reads each card's product by itself, so the same line works on every card. On a new store, the setup guide on Home lists it under Recommended: Add star ratings to collection pages. Mark it done once your cards show stars.
What shows
Products with reviews show their stars and review count, in the same stars and colors as Product Star Ratings.
Products with no reviews yet show nothing, so your grid never fills with empty stars.
The rating isn't clickable: a click on the card still opens the product, as your theme does.
Colors come from Settings ▸ Brand in Quoli. The text follows your product card's own font, a little smaller than the card's title.
Layouts
The same four layouts as Product Star Ratings. Add a data-settings line to pick one. Left to right: Stars and review count (the default), Stars with average and count, Stars only, and Compact.
Stars and review count. Add to the code: Nothing. It's the default.
Stars with average and count. Add to the code:
data-settings='{"display":{"layout":"average-and-count"}}'.Stars only. Add to the code:
data-settings='{"display":{"layout":"stars-only"}}'.Compact. Add to the code:
data-settings='{"display":{"layout":"inline-numeric"}}'.
For centered cards, add "layout":{"alignment":"center"} to the same settings, like this:
<quoli-collection-rating product-id="{{ product.id }}"
data-settings='{"display":{"layout":"stars-only"},"layout":{"alignment":"center"}}'
></quoli-collection-rating>
💡 Tip: On busy grids, Stars only keeps cards clean, while the count does the persuading on your product page through Product Star Ratings.