How to truncate Shopify Reviews

Shopify Reviews app is one of great free Shopify’s Apps, that supports your customes to make responses and share opinions about your products. It √≠ also great for improving SEO for your site because review content print inside your site, not like other app: Yotpo product review.
But sometimes you got really enthusiastic customers and their reviews are too long for being shown on your site, you will wonder how to hide it and show only the part that other customers want to read. Here is one of very simple ways you could do:
open file product.liquid (or other file) and find the line got the Shopify’s Review code you included:

{{ product.metafields.spr.reviews }}

paste my script code below that line:

<script>// <![CDATA[
setTimeout(function(){
$('.spr-review-content-body').css({"white-space":"nowrap","overflow":"hidden","text-overflow":"ellipsis"});
$('.spr-review-content-body').mouseover(function(){$(this).css("white-space","")});
$('.spr-review-content-body').mouseout(function(){$(this).css("white-space","nowrap")});
},3000);
// ]]></script>

After you included my code, you will see that the customer’s review will be auto truncated and shown full content while you hover the mouse over that text.

Leave a Reply

Your email address will not be published. Required fields are marked *