creative designer

The Shopify Product Reviews app is a great app and understandably popular option with merchants yet it doesn't show average reviews across a collection. With some vodka in hand and laptop within reach, let's look at some Liquid code that does it.

The whole idea behind this post came from this thread started on the ecommerce forums. The question was asked if it was possible to show reviews similar to this: "Collection Rating: 4.5 out of 5 based on 85 reviews.". It perked my interest since I know that the Shopify Reviews App currently stores some data about the reviews within a product metafield. Certainly not everything but perhaps just enough to make this possible.

If you don't know much about metafields you should take a peek at the docs page for some bedtime reading. They are awesome.

There's a couple of ways this code could be written, and collection size is going to play a part in what you pick. Pagination settings (being amount of products shown per page) will also factor in.

Jump directly to the code if the embedded options don't show below.

Collection sizes with 50 or less products

Yes! You keep your collections nice and small. For this we could just knock out a snippet for you to place in the template.

There's a quick note on how to use at the start of the code, but I'll add some more info on that soon if you're stuck...

Collection sizes with 51 or more products (but less than 1001)

Ok, big is cool too. Smaller collections would have been easier but you can still make something work here. You're going to need to use JavaScript to add the review data to the page. I don't actually show you that part in the code below, but at least get you a JSON formatted string to work with.

When I note in the previous title that it should be less than 1001, that's not quite true. It's just that the code I am added here doesn't have the JavaScript needed to to join all the pages together. If someone if actually in need of this, ping me in the comments (or I am sure with some gusto you'll quickly figure it out).

Perhaps when I get another chance I'll backtrack over the code and show some tips for how to use the JSON. 

The disclaimer

Before you start adding this code to everything in sight take note:

  • Adding this to the collections (the template that shows each collection) page isn't a good idea. It loops through a lot of products so you might get a memory error.
  • The entire code chunks above are making some assumptions about metafields in place on a product. If the app developer decides to change the metafield contents it's quite likely this code will fail. We can try to account for that in our code to avoid explosions, but be prepared that it might just stop working one day. 

"Got an example link of the code in action"

No. I'll edit one of my stores eventually but if I look at those now I'll spend the rest of the night trying to make a new design. 

"Have you tested the code for bugs?"

Sort of. Certainly not a test that would call the code "production ready" but there was no fires, explosions or swearing as a result of running it.

Like to work with me?

Let's talk