top of page
Product Reviews

Product Reviews

Build trust with customer ratings and reviews of your products.

Intermediate.png

Advanced

10K

Published:

January 1, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example, a site member can rate, review, and recommend products in a Wix Store. The Product page for each item displays the average rating and the recommendation percentage, as well as the details of each review.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

The Collection We Added: review-stats

The review-stats collection has the following fields:

  • rating: The total stars the product received

  • count: The number of times the product was rated

  • recommended: The number of times the product was recommended

  • ID: The ID of the product (hidden by default)


The Collection We Added: reviews

The reviews collection has fields for the review information and a field that references the item in the Products collection.


Adding Ratings and Reviews


Members add their review in a lightbox. The lightbox has input fields for the member’s details, a written review, a photo upload button, and radio buttons for their rating. There are also radio buttons that let them recommend the product.

 

When a member posts their review, the details are saved to the reviews collection, the review statistics for the product are added in the review-stats collection, and the lightbox closes.


Displaying Ratings and Reviews


The Product page displays the number of reviews, the average rating, the recommendation percentage, and the details of each rating. There is also a Write a Review button that opens the lightbox.

 

We added the necessary elements to display the average star rating for the product, the number of reviews it received, and the percentage of members who recommended the product. These elements retrieve the data from the review-stats collection.

 

Each review retrieves details from the reviews collection and displays them in a repeater. We also display how long ago the review was submitted.


Next Steps


  1. Open this example in the Editor to work with the template.

  2. Publish the site and refresh your browser so the Stores collections appear in the Database.

  3. Learn how to work with examples in Velo.

APIs We Used

Non-code example.

Non-code example.

Related Articles

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Product Configurator

Product Configurator

Let customers create one-of-a-kind products.

Intermediate.png

Advanced

Related Items

Related Items

Recommend products based on price, brand and more.

Intermediate.png

Intermediate

Low in Stock Notification

Low in Stock Notification

Display a notification when a store product is low in stock

Intermediate.png

Beginner

Anchor 2
bottom of page