top of page
Highest-Rated Products

Highest-Rated Products

Showcase your highest-rated products in their own gallery.

Intermediate.png

Advanced

1K

Published:

January 1, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example, the Home page showcases the four highest-rated products in the store.​

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

The Collection We Added: productRating

The productRating collection has the following fields:

  • Product Id: The ID of the product, imported from the Products collection

  • Rating: The average rating of the product


Displaying the Highest-Rated Products


The Home page contains a repeater that displays the highest-rated products. When the page loads, we query the productRating collection for the four products with the highest rating. Using the Product Id field, we then query the Products collection for those products and display their details in the repeater. When a visitor hovers over one of the products, an Add to Cart button is displayed so the visitor can add that item directly to their cart.


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.

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!

Wishlist

Wishlist

Let customers add items to their wishlist and save to purchase later.

Intermediate.png

Advanced

Product Reviews

Product Reviews

Build trust with customer ratings and reviews of your products.

Intermediate.png

Advanced

Upsell Products

Upsell Products

Promote products based on items in your cart

Intermediate.png

Intermediate

Anchor 2
bottom of page