The Grid Reviews Widget shows a product's reviews as a wall of cards, photos first, under the same rating summary as the PDP Reviews Widget. It suits products where customer photos sell, like beauty, fashion and home. A click on any card opens the full review.
Shows on: Product pages
Add it from: Settings ⸠Widgets ⸠Grid Reviews Widget ⸠Add to theme
Needs: The Quoli Core Script app embed
Plans: Every plan. The QI summary needs Growth and up.
Add it to your product page
In Quoli, open Settings ⸠Widgets and find Grid Reviews Widget.
Click Add to theme. Your theme editor opens on the product template with the widget added as a new section.
Drag the section into place and click Save.
Use the Grid instead of the PDP Reviews Widget, not beside it: both are a product's full reviews section. The setup guide counts either one for Publish reviews on product pages.
What shoppers see
The header
The top of the Grid is the same as the PDP Reviews Widget: the Reviews tab and the Questions tab, your score and rating bars, the featured attribute, the recommendation line, What shoppers say, search, filters and sort. The PDP Reviews Widget article walks through every part. The Grid has no customer photos row: its cards already lead with the photos.
The cards
â The first photo or video. Shown at its own shape, with +N when the review has more. Videos carry a play mark.
â Name and rating. The reviewer's name with a check when they're a verified buyer, then the stars and the date. Name and date formats follow Settings ⸠General.
â Title and review. Long reviews are cut short on the card. The popup shows the rest.
Cards keep their column when more reviews load, so nothing jumps under the shopper's eye. The Grid doesn't show reviewer photos or locations on its cards.
The review popup
A click on a card opens the review in a popup with every photo and video, the reviewer's answers, your reply, and Useful and Share.
Columns and phones
Pick 2, 3 or 4 columns under Columns. That many show on wide screens, up to 3 on tablets, and 2 on phones.
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.
Header
Show Reviews / Questions tabs. The two tabs. Off shows reviews only. Default: On.
Reviews tab label, Questions tab label. The tab names. Default: Reviews, Questions.
Show rating distribution. The rating bars. Default: On.
Show attribute scale. Your featured rating-scale question. Default: On.
Show recommendation percentage. The "would recommend" line. Default: On.
Show 'Write a review' button. The button under the score. Default: On.
Write button label. Its text. Default: Write a review.
Show 'Ask a question' button. The button in the Questions tab. Default: On.
Ask button label. Its text. Default: Ask a question.
Show AI summary and sentiments. The What shoppers say card and its full summary. Default: On.
Empty state title. The heading on a product with no reviews yet. Default: Be the first to review this product.
Layout
Columns. 2, 3 or 4 on wide screens. Phones show two. Default: 4.
Reviews to show. How many cards show first. Up to 50 load at once, even when the slider is higher. Default: 20.
Pagination. Load more button, Numbered pages, or Infinite scroll: more cards as shoppers scroll. Default: Load more button.
Reviews per load more. How many more load each time, 3 to 50. Not used with numbered pages. Default: 10.
Load more label. The button's text. Default: Show more reviews.
Reviews
Show. Text and media reviews, or Reviews with photo or video. Default: Text and media reviews.
Sort. The order cards open in: Most recent, Most useful, Highest rated, Lowest rated or Oldest. Default: Most recent.
Show search, Show filters, Show sorting. The search box, the Filters button and the sort menu. Default: On.
Cards
Show reviewer name. The name on each card. Default: On.
Show verified badge. The check beside verified buyers. Default: On.
Show star rating. The stars on each card. Default: On.
Show review date. The date on each card. Default: On.
Show Useful button, Show Share button. Useful and Share in the review popup. Default: On.
Spacing
Top padding, Bottom padding. Space above and below the widget, 0 to 40 px. Default: 20 px each.
Add it with code
On a theme without app blocks, paste the widget in yourself. The code is in Settings ⸠Widgets ⸠Grid Reviews Widget ⸠Instructions, with a Copy code button.
<quoli-grid-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-grid-reviews>Paste it into a Custom Liquid block on your product template, or into the template's code where the reviews should go.
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: Set Show to Reviews with photo or video for a pure photo wall, and keep the PDP's text reviews for shoppers who search or filter.