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.

STEP 1 – ADD A NEW COLLECTION CALLED ‘REVIEWS’

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.

STEP 2 – CREATE A NEW LIQUID TEMPLATE FOR YOUR REVIEW PAGE

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.

STEP 3 – CREATE A NEW SNIPPET FOR YOUR REVIEWS

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.

STEP 4 – CREATE YOUR REVIEWS PAGE

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.

THE END

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

Comments(25)

  • 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.
    https://thatsnovel.co.uk/2021/04/22/multiple-product-reviews-shopify/

    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

    Hi,
    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?
    https://belbren.com/pages/reviews

    Thanks!

    • 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

    Hello,

    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! 🙂

  • 2nd January 2022, 3:29 am  Reply

    Thanks for this instructional – I can’t seem to get the stars showing up on my all reveiws page – instead it just comes up with small squares – Could you advise on that?

    Website is lashifye.com – password to get in is iraini while we are doing setup – Reviews can be found on the top.

  • 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!
      Mark

  • Matrix
    31st August 2022, 11:03 am  Reply

    Its work! But why its not work with pagination?

    • Simon Heyes
      31st August 2022, 12:08 pm

      It should work….is pagination set up within your theme?

  • Matrix
    31st August 2022, 12:41 pm  Reply

    i can set limit 100 but here it is show only 50 product ID plz let me how how to increse limit

  • 31st August 2022, 12:42 pm  Reply

    Its not working with the Pagination. Even in the collection I shown all the 300 products but still it pics only 50 products for reviews. How to make that work please suggest.

  • Matrix
    31st August 2022, 12:44 pm  Reply

    Plz check Below URL
    Screesnhot:: https://prnt.sc/JDoUF5CUQe4s

    • Matrix
      31st August 2022, 12:50 pm

      In the Revview Collection I have 400 Products but Unfortunately its display in the scripts Only 50 Product IDs.

  • Matrix
    1st September 2022, 5:21 am  Reply

    Hi SIMON HEYES

    I am still waiting your good response.

    Thanks

  • 15th September 2022, 7:27 pm  Reply

    It was not working for me and then i noticed there is a mistake on the code for the template. This is what Simon says we should copy:
    {{ page.content }} {% include ‘get-reviews’ %}

    This is the correct code:
    {{ page.content }} {% include ‘get.reviews’ %}

    • Simon Heyes
      15th September 2022, 11:13 pm

      Hey Miza, I spotted that too…the get reviews snippet should be ‘get-reviews.liquid’, not ‘get.reviews.liquid’…I’ve now updated the blog post 🙂 Thanks!

  • 9th February 2023, 2:32 pm  Reply

    can you send me a code for Product Reviews application? i want to show all reviews from this application.

  • Robin
    22nd March 2023, 1:35 pm  Reply

    Hi, is there a way to pull all reviews (not by collection) but just from the shopify’s review app in descending order

    • Simon Heyes
      22nd March 2023, 4:57 pm

      Hey Robin, this does what you need I think….just not sure how to reverse the order. It gives you all Shopify reviews on one page. You have a ‘collect all’ collection in order to show them, but all reviews are included.

  • 3rd April 2023, 10:08 pm  Reply

    Hello! This worked so well! I just can’t get the stars to actually be stars. They are just outlined squares. How do I get the right font for those stars?

    • 3rd April 2023, 10:30 pm

      Replying to this: I changed the code to as follows. I replaced the \ea2d to the basic unicode star. I kept only the line-height to make the stars bigger.

      .product-review-stars .spr-icon:before {
      line-height: 30px;
      content: “★”;
      color: #ffb503;
      }

      .product-review-stars .spr-icon-star-empty:before {
      line-height: 30px;
      content: “★”;
      color: #ddd;
      }

    • Bouchra
      15th November 2023, 8:36 pm

      Thank you for this, so helpful!

Leave a Comment