The Shopify Product Review app is a great (and free) way to get that social proof and trust built into your products. One thing it doesn't do well is to collate the reviews onto a single page - let's explore some Liquid and JavaScript code that does just that.

The Idea

The Shopify Product Review app uses JavaScript to pull the review data from the server. We can use the same url but instead do it multiple times to get a range of reviews from different products. Once we've got that data it's just a case of showing them however we like on the page. 

In a general sense:

• Get a list of product ids
• Loop over them
• Get the reviews for each ID
• Save the response
• Repeat until done
• Format the data how we want
• Add to page.

Examples

There's a standalone page on the experiments site that shows this code in action. I've also added the same code to the collection that the reviews are coming from.

You can extend this idea so that any would pull reviews from the current products being shown. It adds noise to the page, but could be handy in some circumstances.

The Code

The code has been added to the Shopify Code Snippets repo but if you're wanting to save yourself a click it's also embedded below.

grabbing the liquid snippet...

Good ways to extend this could would be to filter out the crappy reviews and only leave the 4 and 5 star versions. That won't be hard to do since the review stars are in the html - just count them up.

Quick Warning

If you are thinking of using this code be aware that this relies heavily on the Shopify Product Review app. If Shopify decides to change the urls or how the data is returned this code will not work. I've also not put any effort into error trapping so for production use you'll want to make yours far more robust.