Reviews and questions

Product reviews, customer photos and questions with answers.

2 components · 9 variants

Switch category

product-reviews

Product reviews

Reviews as their own sections. A full overview with filters, search and shop replies, a customer photo wall, highlights by topic, the form to write one and a review row for home pages.

Overview
Photo wall
Highlights
Write a review
Review row

Props and details

Overview

Summary with star bars, recommendation ring and fit scale, then chips, search and sorting over the list. Search words light up in the text, photos open in a lightbox, the shop answers below a review and "Show more" loads the next ones.

Open in Studio

Installv1.0.1

aiw add @ai-website/product-reviews

Brings along utils, kit, button, icon, reveal, motion, section, dialog, rating, select, product-image

Usage

<ProductReviews variant="overview" summary={{ average, count, distribution, recommend, fit, fitLabels }} reviews={reviews} />

Source

Photo wall

Customer photos as a wall with one large tile. Tiles rise in turn, the large one drifts while scrolling, hover shows name and stars. Each photo opens a lightbox with its review, arrows, keys and a thumbnail strip.

Open in Studio

Installv1.0.1

aiw add @ai-website/product-reviews

Brings along utils, kit, button, icon, reveal, motion, section, dialog, rating, select, product-image

Usage

<ProductReviews variant="photo-wall" summary={{ average, count, photos }} reviews={reviewsWithPhotos} />

Source

Highlights

Scores per aspect fill while scrolling, a short summary sits on top and topic chips filter the quotes. The topic words light up in every quote that is shown.

Open in Studio

Installv1.0.1

aiw add @ai-website/product-reviews

Brings along utils, kit, button, icon, reveal, motion, section, dialog, rating, select, product-image

Usage

<ProductReviews variant="highlights" summary={{ average, count, aspects, text }} topics={[{ id, label, count, words }]} reviews={reviews} />

Source

Write a review

Stars that pop, a counter ring that fills toward enough words, a sliding fit choice, photo tiles and a recommend switch. The preview beside it writes along, a missing field shakes and the thank-you draws its check.

Open in Studio

Installv1.0.1

aiw add @ai-website/product-reviews

Brings along utils, kit, button, icon, reveal, motion, section, dialog, rating, select, product-image

Usage

<ProductReviews variant="write-review" product={{ name, variant, image }} summary={{ fitLabels }} onSubmit={(draft) => …} />

Source

Review row

Review cards with the reviewed product at the bottom, for home and category pages. The row scrolls by arrows, keys, drag or swipe, cards rise in turn and lift on hover.

Open in Studio

Installv1.0.1

aiw add @ai-website/product-reviews

Brings along utils, kit, button, icon, reveal, motion, section, dialog, rating, select, product-image

Usage

<ProductReviews variant="carousel" summary={{ average, count }} reviews={[{ …, product: { name, href, image } }]} action={{ label, href }} />

Source

product-qa

Product questions

Questions and answers on a product page. A searchable list with shop and buyer answers, the most asked as an accordion, the question form with similar questions and questions sorted into topics.

Questions and answers
Most asked
Ask a question
By topic

Props and details

Questions and answers

Search over questions and answers with the search words lit up. Every question has a "same question" vote, the shop answer sits on a tinted surface, more answers open with a soft height and "Helpful" counts along.

Open in Studio

Installv1.0.1

aiw add @ai-website/product-qa

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<ProductQa variant="list" questions={[{ id, question, author, date, votes, answers: [{ author, role, date, body, helpful }] }]} />

Source

Most asked

The five most asked questions as an accordion beside a heading. Rows rise one after another, the plus turns into a minus, the answer opens with a soft height and names who answered.

Open in Studio

Installv1.0.1

aiw add @ai-website/product-qa

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<ProductQa variant="compact" questions={questions} action={{ label, href }} />

Source

Ask a question

The question form. While typing, questions that were already answered appear with the matching words lit up and open in place. Missing text or email is marked and focused, sending ends in a confirmation that repeats the question.

Open in Studio

Installv1.0.1

aiw add @ai-website/product-qa

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<ProductQa variant="ask" product={{ name, image }} questions={questions} answerTime="within one business day" onAsk={(question, email) => …} />

Source

By topic

Questions sorted into topics with counts. On desktop a topic rail beside the cards, on phones a row of chips that scrolls. Picking a topic lets the cards run in again.

Open in Studio

Installv1.0.1

aiw add @ai-website/product-qa

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<ProductQa variant="by-topic" topics={[{ id, label }]} questions={[{ …, topic }]} />

Source

Similar components

More from E-Commerce, the same area of the kit.

Often combined with

Sections that usually sit next to Reviews and questions on a page.

Overview

Photo wall

Highlights

Write a review

Review row

Questions and answers

Most asked

Ask a question

By topic

Similar components, Often combined with

Similar components

Often combined with