fbpx

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(3)

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

Leave a Comment