Product Star Ratings puts your rating right under the product title, where shoppers look first. One glance tells them the product is loved, and one click takes them to the reviews. If you add just one widget, add this one.
Shows on | Product pages, under the title |
Add it from | Settings ▸ Widgets ▸ Product Star Ratings ▸ Add to theme |
Needs | The Quoli Core Script app embed |
Plans | Every plan |
➀ The star rating. Your average in stars and the review count. It's there the moment the page loads, so nothing jumps around.
Add it under your product title
In Quoli, open Settings ▸ Widgets and find Product Star Ratings.
Click Add to theme. Your theme editor opens on the product template with the block added to your product information.
Drag it right under the product title and click Save.
On a new store, the setup guide on Home has the same button: Display stars below product titles ▸ Add star ratings.
💡 Keep the app embed on. The Quoli Core Script loads your review form and brand colors for the stars.
Layouts
Pick one under Layout in the block.
The text takes your theme's own font size and color, so the rating sits naturally under any title, on phones too. Star color and font come from Settings ▸ Brand in Quoli.
What a click does
Choose under On click.
1. Go to the reviews on the page
The default. The page glides down to your reviews: the PDP Reviews Widget, the Grid Reviews Widget or the All Reviews Page, whichever comes first.
2. Show the rating breakdown
A card opens under the stars with your average, a bar for each star and See all reviews. Click a bar to see only that star's reviews. Escape or a click outside closes it.
3. Nothing
The stars just show your rating.
Products with no reviews yet
Settings | Shoppers see |
Show a Write a review button on (default) | A button with your empty state text. It opens the review form, so new products start collecting reviews on day one. |
Show a Write a review button off | Five empty stars and your empty state text. |
Show when product has no reviews off | Nothing, until the first review arrives. |
Block settings
Setting | What it does | Default |
Layout | Stars and review count, Stars with average and count, Stars only, or Compact. | Stars and review count |
Show when product has no reviews | Off hides the rating until the first review. | On |
Show a Write a review button | On a product with no reviews: a button that opens the review form. Off: empty stars and your text. | On |
Empty state text | The text on a product with no reviews. | Write a review |
Alignment | Left, center or right. | Left |
Star size | 10 to 36 px. | 18 px |
Gap between stars and text | 2 to 24 px. | 8 px |
Bottom spacing | Space under the rating, 0 to 80 px. | 12 px |
On click | Go to the reviews on the page, show the rating breakdown, or nothing. | Go to the reviews on the page |
Top padding, Bottom padding | Space above and below the block, 0 to 40 px. | 0 px each |
Stars in Google search
With the Quoli Core Script on, every product page with reviews tells search engines its rating, so your stars can show under the product in Google results. Settings ▸ General ▸ Ratings in search results shows how many products are synced. It updates as new reviews come in.
Add it with code
On a theme without app blocks, paste the rating in yourself. The code is in Settings ▸ Widgets ▸ Product Star Ratings ▸ Instructions, with a Copy code button.
<quoli-star-rating
product-id="{{ product.id }}"
merchant-id="{{ shop.permanent_domain }}"
api-base="/apps/quoli"
></quoli-star-rating>Paste it into a Custom Liquid block under your product title, or into the product template's code.
Keep the Quoli Core Script app embed on.
Pasted code uses the default settings. For stars on collection and search pages, use Collection Ratings.
💡 Tip: Keep On click on Go to the reviews on the page. Shoppers who click the stars want proof, so take them straight to it.