Skip to main content

💬 PDP Reviews Widget

The full reviews section for your product page: every part, every filter, every block setting and the code for themes without app blocks.

The PDP Reviews Widget is the full reviews section on your product page. Shoppers see your rating, real photos and videos and every review, and they can filter, search, ask a question or write a review without leaving the page. It's where most buying decisions happen.

Shows on

Product pages

Add it from

Settings ▸ Widgets ▸ PDP Reviews Widget ▸ Add to theme

Needs

The Quoli Core Script app embed

Plans

Every plan. The QI summary needs Growth and up, or Starter yearly.

The PDP Reviews Widget on a product page


Add it to your product page

  1. In Quoli, open Settings ▸ Widgets and find PDP Reviews Widget.

  2. Click Add to theme. Your theme editor opens on the product template with the widget added as a new section.

  3. Drag the section into place, usually right under the product details, and click Save.

On a new store, the setup guide on Home has the same button: Publish reviews on product pages ▸ Add reviews widget.

💡 Keep the app embed on. The widget needs the Quoli Core Script (theme editor ▸ App embeds) for the review popup, the review and question forms, and your brand colors and fonts.


What shoppers see

The summary

The summary of the PDP Reviews Widget with its parts numbered

➀ Tabs. Reviews and Questions, each with its count. They show when the widget has both.

➁ Score. Your average rating, its stars and Based on N reviews.

➂ How reviews work. The (i) explains where reviews come from, what Verified buyer means and how the rating is worked out.

➃ Write a review. Opens the review form right on the page.

➄ Rating bars. How many reviews each star has. Tap a bar to see only those reviews.

➅ Featured attribute. Where reviewers land on your featured question, here Effectiveness. You choose it in Reviews ▸ Attributes.

➆ Recommendation. The share of reviewers who would recommend the product: from your recommendation question, or the share of 4 and 5 star reviews when you don't ask one.

➇ What shoppers say. QI's summary of every review, with the topics shoppers mention most. Click it for the full summary.

Every piece of the score card is covered in the rating summary article.

Photos and the toolbar

The photos row and the toolbar with their parts numbered

➀ Customer photos and videos. Media from all of the product's reviews. Each tile opens its review.

➁ Search. Finds words in reviews as shoppers type.

➂ Filters. Narrow the list by rating, photos or videos, and your reviewers' answers.

➃ Sort. Most recent, Most useful, Highest rated, Lowest rated or Oldest.

Review cards

A review card with its parts numbered

➀ Photo or initials. The reviewer's photo when they signed in with Google or Apple to write the review, their initials otherwise.

➁ Name and Verified buyer. The name follows Settings ▸ General ▸ Customer name. Verified buyer shows only on reviews matched to a real order.

➂ Location. From the reviewer's order. Settings ▸ General ▸ Reviewer location shows city and country, country only, or nothing.

➃ About the reviewer. Their answers to your questions about them, like skin type or age group.

➄ Rating and date. The date follows Settings ▸ General ▸ Review date.

➅ Title and review. Long reviews fold behind Read more.

➆ Product answers. Their answers about the product, including whether they recommend it.

➇ Photos and videos. Up to two thumbnails, with +N for the rest (four on phones).

➈ Your reply. Public replies show here. Private replies never reach your store.

➉ Useful and Share. Shoppers mark a review Useful once. Share opens the phone's share sheet, or copies a link straight to the review.

A click anywhere else on the card opens the review in a popup. For what controls each part, see the review card breakdown.


Filter, sort and search

Filter by star

Tap a rating bar to see only that star. Tap it again to see every review.

Tapping the 4 star bar filters the reviews

Filters

The filters panel, open

➀ Filters. Opens the panel. With filters on, it shows how many.

➁ The panel. Rating with each star's count, Media (with photos, with videos), and a group for each choice question in Reviews ▸ Attributes, up to four.

Choosing filters in the panel

Active filters

Active filters above the reviews

➀ What's on. How many reviews match, each filter with an × to remove it, and Clear all.

Sort

The sort menu, open

Reviews open on your Default sort, set in the block. Shoppers can switch to any other order.

Share a filtered view

The star and photo filters, search and sort live in the page address. A shopper can bookmark or share "5 stars with photos", and it opens exactly that way. Answer filters aren't kept.

Filters, sorting and search covers every filter, sort order and the three ways more reviews load.


The review popup

A click on any review or photo opens it in a popup, with the photos and videos large and the full review beside them. Next and previous step through the review's media, then on to the next review. Arrow keys and swipes work too.

Opening a review and stepping through it

The review popup

Close it with ×, Escape or a click outside. On phones it fills the screen.


What shoppers say

QI reads every review of the product and sums it up in two lines, with the topics shoppers mention most. A click opens the full summary: the sentiment split and every top mention with its count.

The full review summary

The summary shows on Growth and up, and Starter yearly, once a product has enough reviews to summarize. Turn it off with Show AI summary and sentiments in the block.


Questions

The Questions tab lists the product's answered questions, with search, sort and an Ask a question button. Each answer carries your store's name and a Store tag. A question shows once you've answered it in Quoli.

The Questions tab

For reviews only, set Surfaces shown to Reviews only.


On phones

The summary stacks, cards show up to four thumbnails, filters open as a sheet from the bottom and the review popup fills the screen.

The PDP Reviews Widget on a phone
The filters sheet on a phone

Link straight to your reviews

Add these to any product link, in an email, a menu or a post.

Add to the link

Opens

#quoli-reviews

The product's reviews

#quoli-questions

The Questions tab

#quoli-review- and the review's id

That review, in the popup. Share builds this link for you.

https://yourstore.com/products/hydra-glow-moisturizer#quoli-reviews


Block settings

Select the widget in your theme editor to change these. Colors and fonts come from Settings ▸ Brand in Quoli, so every widget matches.

Layout

Setting

What it does

Default

Surfaces shown

Reviews only, Questions only, or Reviews and questions as two tabs.

Reviews and questions

Reviews tab label, Questions tab label

The tab names, when both tabs show.

Reviews, Questions

Default sort

The order reviews open in.

Most recent

Pagination

A Load more button, numbered pages, or more reviews as shoppers scroll.

Load more button

Reviews on first page

How many reviews show first, 3 to 50.

10

Reviews per load more

How many more load each time, 3 to 50. Not used with numbered pages.

10

Load more label

The button's text.

Show more reviews

Summary

Setting

What it does

Default

Show AI summary and sentiments

The What shoppers say card and its full summary.

On

Show attribute breakdown

The featured attribute bar.

On

Show 'Write a review' button

The button under the score.

On

Write button label

Its text.

Write a review

Show 'Ask a question' button

The button in the Questions tab.

On

Ask button label

Its text.

Ask a question

Show media slider

The customer photos and videos row.

On

Slider content

Photos and videos, photos only, or videos only.

Photos and videos

Empty state title

The heading on a product with no reviews yet.

Be the first to review this product

Search and filters

Setting

What it does

Default

Show search

The Search reviews box.

On

Show filters

The Filters button and panel. The rating bars still filter when it's off.

On

Show sorting

The sort menu. When it's off, reviews keep your default sort.

On

Review cards

Setting

What it does

Default

Show reviewer avatar

The photo or initials beside each name.

On

Show verified badge

Verified buyer on reviews matched to an order.

On

Show attributes on each review

The reviewer's answers on their card.

On

Show store replies

Your public replies.

On

Show Useful button

Useful, with its count.

On

Show Share button

Share on each review.

On

Spacing

Setting

What it does

Default

Top padding, Bottom padding

Space above and below the widget, 0 to 40 px.

20 px each


Settings in Quoli that shape it

Where

What it changes

Settings ▸ General

Review date, customer name, reviewer location and the widget language

Settings ▸ Brand

Star color, brand and button colors, fonts and the verified badge color

Reviews ▸ Attributes

The filters, the featured attribute, the recommendation line and the answers on each card

Reviews ▸ Groups

Grouped products share one set of reviews

Which reviews go live


Before the first review

A product with no reviews shows five empty stars, your empty state title and a Write a review button, with Ask a question beside it when questions are on. When filters match nothing, shoppers see "No reviews match these filters" and a Clear filters button.


Add it with code

On a theme without app blocks, paste the widget in yourself. The code is in Settings ▸ Widgets ▸ PDP Reviews Widget ▸ Instructions, with a Copy code button.

<quoli-pdp-reviews
  product-id="{{ product.id }}"
  merchant-id="{{ shop.permanent_domain }}"
  api-base="/apps/quoli"
  data-product-name="{{ product.title | escape }}"
  data-product-handle="{{ product.handle | escape }}"
></quoli-pdp-reviews>
  1. Paste it into a Custom Liquid block on your product template, or into the template's code where the reviews should go.

  2. Keep the Quoli Core Script app embed on. It loads the widget.

Pasted code uses the default settings above. To change them, use the app block instead.


💡 Tip: Lead with your strongest proof. Set Default sort to Most useful and the reviews shoppers found most helpful come first. Compare a week of each in Analytics ▸ Widget engagement.

Did this answer your question?