How To Add Multiple Product Reviews On One Page In Shopify

Home / Digital / How To Add Multiple Product Reviews On One Page In Shopify

If you’re looking to add multiple product reviews on one page within Shopify, then read on below!

This solution was originally found on Freak Design, but I’ve added some extra parts to it.

I was looking for a solution for a client earlier this year, and used the following coding and suggestions to get the page looking great!

Shopify Reviews on One Page

Please note, this only works with the Shopify Product Reviews app *. It is a great, simple, free way to get that social proof built into your site. The only downside to this solution (and one I can find a resolution for) is to add a link to the product page from each review. Not a big issue, but it would be my preference.


The first step is to create a new collection within Shopify called Reviews. You then need to add all the products you want to show on the reviews page into this collection.

Double check the URL for the collection ends in /collections/reviews.


Go into the admin section of your Shopify site, then go to Themes > Edit Code.

Under templates, click Add a new template, and call it page.reviews.liquid.

Shopify Reviews on One Page Template

At this point you’ll have to check your theme code to see what divs or other bits of code you’ll need for a standard page code. In any case, add the following code (you can always amend once you’ve tested it):

<div class="container-indent"> <div class="container"> {{ page.content }} {% include 'get-reviews' %} </div> </div>

This now creates a new template for your site and theme, which we’ll use shortly.


As you’ll see in the code in step 2, there is a snippet being pulled called ‘get-reviews’, so next, we need to create a new snippet!

Go back to Themes > Edit code, and then under Snippets click Add new snippet, and call it get.reviews.liquid.

Shopify Multiple Reviews - Add Snippet

{%- assign collectionHandle = 'reviews' -%} <div id="multipleReviews"></div> {%- comment -%} Now add some styles to the page.You could move the styles into your stylesheet if you don't want them here... {%- endcomment -%} <style> #multipleReviews { background: #f7f7f7; padding: 0 1em; margin-top: 30px; } @media only screen and (min-width: 750px){ .product-review { width: 50%; } } .product-review { display: inline-block; vertical-align: top; margin: 4vh 0; padding-right: 10px; } .product-review-stars { display: inline-block; margin-top: 10px; margin-bottom: 10px; } span.product-review-title { font-weight: 400; display: block; font-family: "Montserrat", sans-serif; color: #242e2f; font-size: 1.3em; text-transform: uppercase; line-height: 1.04; padding-bottom: 10px; } .product-review-reviewer { font-size: 80%; font-style: italic; display: block; } .product-review-stars .spr-icon:before { font-family: 'wokiee_icons'; font-size: 16px; line-height: 22px; content: "\ea2d"; color: #ffb503; } .product-review-stars .spr-icon-star-empty:before { font-family: 'wokiee_icons'; font-size: 16px; line-height: 22px; content: "\ea2d"; color: #ddd; } </style> <script> (function(){ window.reviewApp = window.reviewApp || { debug:false, reviews:[], reviewUrl:'https://productreviews.shopifycdn.com/proxy/v4/reviews/', reviewStore:{{ shop.permanent_domain | json }}, /* or hard code the myshopify url - eg: freakdesign.myshopify.com */ }; window.reviewApp.translations = { 'missing_id':'Product ID array not defined', 'script_exists':'The script has already been loaded on the page' }; window.reviewApp.productIdList = [ {%- for reviewProduct in collections[collectionHandle].products limit:10 -%} {{- reviewProduct.id -}} {%- unless forloop.last -%},{%- endunless -%} {%- endfor -%} ]; reviewApp.errLog = function(t){ if(!reviewApp.debug){ return } console.warn(reviewApp.translations[t]) }; var getBadges = function(a){ if(typeof a === 'undefined'){ errLog('missing_id');return } if(!!document.getElementById('reviewBadges')){ errLog('script_exists');return } window.badgesLoaded = function(a){ console.log(a); }; var idString = []; for (var i = a.length - 1; i >= 0; i--) { idString.push('&product_ids[]='+a[i]); }; var script = document.createElement("script"); script.id = "reviewBadges"; script.async = true; script.src = [window.reviewApp.reviewUrl,'badges?callback=badgesLoaded&shop=',window.reviewApp.reviewStore,idString.join('')].join(''); document.body.appendChild(script); }; window.reviewLoaded = function(a){ window.reviewApp.reviews.push(a); if(window.reviewApp.productIdList.length){ reviewApp.getReviews(window.reviewApp.productIdList); return; }; for (var i = window.reviewApp.reviews.length - 1; i >= 0; i--) { var tmpDiv = document.createElement('div'); tmpDiv.innerHTML = window.reviewApp.reviews[i].reviews; var reviewText = tmpDiv.querySelectorAll('.spr-review-content'); var reviewer = tmpDiv.querySelectorAll('.spr-review-header-byline'); var title = tmpDiv.querySelectorAll('.spr-review-header-title'); var rating = tmpDiv.querySelectorAll('.spr-starratings'); console.log(window.reviewApp.reviews[i].reviews,reviewText.length); for (var _i = reviewText.length - 1; _i >= 0; _i--) { var divHtml = ''; divHtml+= [ '<div class="product-review"><span class="product-review-title">', title[_i].innerText, '</span><span class="product-review-text">', reviewText[_i].innerText, '</span><span class="product-review-stars">', rating[_i].innerHTML, '</span><span class="product-review-reviewer">', reviewer[_i].innerText, '</span></div>' ].join(''); document.getElementById('multipleReviews').insertAdjacentHTML('beforeend',divHtml); }; }; }; window.reviewApp.getReviews = function(a){ if(typeof a === 'undefined'){ errLog('missing_id');return } var productId = a.shift(); var script = document.createElement("script"); if(document.getElementById('singleReviewData')){ document.getElementById('singleReviewData').remove(); /* cleanup (optional) */ } script.id = 'singleReviewData'; script.async = true; script.src = [window.reviewApp.reviewUrl,'product?callback=reviewLoaded&shop=',window.reviewApp.reviewStore,'&product_id=',productId].join(''); document.body.appendChild(script); }; reviewApp.getReviews(window.reviewApp.productIdList); })(); </script>

There’s a lot of code to unravel here, so if you want to see what it should look like (for ease of future editing), click HERE.


With all the bits of code now in place, it’s now time to create the page that will show all your Shopify product reviews.

Go to Online Store > Pages, and create a new page called Reviews.

Shopify Multiple reviews - page creation

Add in whatever content you want to show up at the top of the page (I added a title and one line of text), and then in the Template box, select ‘page.reviews’ (which is the template you created in Step 2).

Ensure the page is visible, click Publish and go should now be live!

If you want to amend the colours or the fonts or other CSS for the reviews section on the page, you can do this within the code you copied in Step 3 above.


Hope it works for you!

* As such, if Shopify decides to change the urls or how the data is pulled this code will not work and will need amending.

Find out more about customisation of Shopify reviews here > https://help.shopify.com/en/manual/products/product-reviews/advanced-customization


  • Luke
    15th June 2021, 8:35 pm  Reply

    Hi there,
    The article is exactly what I need but it is not showing any reviews for me.

    I have changed the server URL but still not go.
    Has Prodcut Reviews app changed codes since you posted this?

    Any help you can provide, It’d be greatly appreciated.

  • Luke
    16th June 2021, 12:28 am  Reply

    Hi there,
    Like to update on the email sent earlier.
    I got the page working!

    But it only lists 15 products and no way to move to see more pages.
    Is this by design?
    How can I get them flow on to more pages?

    Can I display them in date order (most recent first)?

    I’d also like to add corresponding product name (with link).

    Thanks a lot!

    • Simon Heyes
      16th June 2021, 11:54 am

      Hey Luke, glad you got it working! So it should show the number of products you have in the reviews collection. If the collection only has 15 products, you’ll only see 15 reviews. Unfortunately I don’t think there is any control over how to display them in date order, and the Product Reviews app doesn’t have any documentation on pulling through the product URL, which is very annoying! It can probably be done with a bit more advanced coding, but that is beyond my capability, sorry!

  • 2nd September 2021, 12:09 am  Reply

    This article is exactly what I’ve been looking for, and it’s succeeded in showing some reviews, however it’s only showing 5 on the page when I have more on the app.
    Do you have any advice on this?


    • Simon Heyes
      10th November 2021, 12:11 pm

      Hi John, the page seems to be empty based on the link you sent, so not sure if you’ve turned it off? If it is showing reviews, then that’s a good start. I’d double check this part: “The first step is to create a new collection within Shopify called Reviews. You then need to add all the products you want to show on the reviews page into this collection.”

  • JM
    30th October 2021, 4:21 pm  Reply


    Do you have an alternative solution? I don’t want to create a specific collection, it would be negative for the seo. Thanks

    • Simon Heyes
      10th November 2021, 12:16 pm

      Hi Jean-Marie, thanks for the comment. I currently use the solution for a couple of clients, and there is no negative impact on SEO. For example, the ‘Review’s collection isn’t linked to from anywhere on the site, and you can always add the URL into your robots.txt file.
      As far as I know there is no simple alternative, sorry! 🙂

  • mark
    28th June 2022, 5:57 pm  Reply

    Hey There – this is great, however I am having a hard time getting it to work? I have put in the code as described and followed the steps but I do not see any reviews? My collection contains all my products which have many reviews.

    • mark
      28th June 2022, 6:13 pm

      Hi there – I actually got it working as I was hiding the collection from my online store. By enabling it I can see my reviews however within my collections screen I can see “Reviews” which doesnt really jive with my site. Any way to hide this from the online store but still populate the reviews page?

      Many thanks!

Leave a Comment