How to display Product Reviews in my shop?

Product reviews that you collect via the eTrusted review platform can, of course, also be displayed in your store or on your website. For your customers, product reviews only develop their true value when they can be read. To display product reviews and star ratings, you have various options, which we explain in this article.

Product Review Sticker

With the Product Review Sticker you can display the individual Product Reviews that your customers have given on the product detail page. In this way, your customers can investigate your products even more intensively and make the right purchase decision for themselves.

This is how the Product Review Sticker looks with the default settings:

20160502_product-reviews_shop_en.png

The basis for the Product Review Sticker is the following code, which you embed in the place on your product detail page where you want your customers to be able to read reviews:

<div id="productreviewsticker"></div>
<script type="text/javascript">
  _tsProductReviewsConfig = {
        tsid: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
        sku: ['ART-123'],
        variant: 'productreviews',
        /* optional */
        borderColor: '#0DBEDC',
        backgroundColor: '#ffffff',
       locale: 'en_GB',
        starColor: '#FFDC0F',
        commentBorderColor: '#dad9d5',
        commentHideArrow: 'false',
        starSize: '15px',
        ratingSummary: 'false',
        maxHeight: '1200px',
        hideEmptySticker: 'false',
        filter: 'true',
        element: '#productreviewsticker',
        introtext: 'What our customers say:'
  };
  var scripts = document.getElementsByTagName('SCRIPT'),
  me = scripts[scripts.length - 1];
  var _ts = document.createElement('SCRIPT');
  _ts.type = 'text/javascript';
  _ts.async = true;
  _ts.charset = 'utf-8';
  _ts.src ='//widgets.trustedshops.com/reviews/tsSticker/tsProductSticker.js';
  me.parentNode.insertBefore(_ts, me);
  _tsProductReviewsConfig.script = _ts;
</script>

Within the code you can make some configurations to customise the Product Review Sticker to the conditions of your shop. For this purpose, we will now explain the individual parameters and their configuration options.

  • tsid: Enter the Trusted Shops ID of your online shop in this parameter.
  • sku: This is where you should enter the SKU of the product. Here, you should use the variable used in your shop system if you include the code in the template of your product detail page. This ensures that the SKU is dynamically filled and thus the appropriate Product Review Sticker is displayed on each product detail page. It is also possible to collectively display ratings for a product that is available in different variations such as colour or size. Open the corresponding product detail page and enter the different SKUs for the respective item in the code as follows ['produkt1sku','produkt2sku','produkt3sku']
  • variant: This parameter is fixed and should not be changed.

Filling out these three parameters is essential for the Product Review Sticker to fulfil its purpose. The following parameters, however, serve to integrate the sticker into your shop as smoothly as possible and to adapt it to your needs. Filling out these fields is therefore strongly recommended, but optional for the functionality of the feature.

  • borderColor: The Product Review Sticker as a unit has a border. This is set to turquoise by default. If you want a different colour, please replace the existing value in the code with the hexadecimal value of your desired colour.
  • backgroundColor: This parameter allows you to define the background colour of the sticker that will be visible between each comment. It is set to white by default. If you would like a different colour, you will need to enter the hexadecimal value of the desired colour as value here as well.
  • locale: This parameter determines the language of the content not generated by your customers and the date format. The default setting is the English language and the standard format in the United Kingdom. The value for locale needs to have the following format language_COUNTRY. The designations follow the ISO-639 and ISO-3166 codes. An example: The appropriate value for Germany would therefore be de_DE.
  • starColor: This parameter determines what colour the stars in the comments should be. By default, they are yellow, but you can change the colour here as well by entering a different hexadecimal value.
  • commentBorderColor: Each comment has a border. This parameter allows you to adjust the colour of this border. By default, the comment borders are grey, but by entering a different hexadecimal value, you can adjust this colour as well.
  • commentHideArrow: By default, each comment within the sticker is displayed like a speech bubble. If you prefer to display the comments inside a simple box instead, set the value for this parameter to true.
  • starSize: This parameter defines the size of the displayed star ratings. The default setting is 15 px, but this value is easy to adjust if you want a different size.
  • ratingSummary: When this parameter is activated, the overall score and the stars for the product are displayed again below the product name within the sticker. This function is deactivated by default. Enter true as value for this parameter if you want to activate it.
  • maxHeight: This parameter allows you to flexibly adjust the height of the Product Review Sticker. The default setting is 1,200 px. Simply enter your desired height as the value for this parameter to adjust the height. Please note the following: This parameter has no influence on the number of displayed ratings. If the number of ratings is not compatible with the desired height of the sticker, a scroll option is set up.
  • hideEmptySticker: This parameter allows you to hide the Product Review Sticker as long as there is no rating for the respective product. If you want to hide the sticker, set the value for this parameter to true.
  • filter: This parameter is used to integrate a feature into the sticker that allows your customers to filter the displayed ratings by the number of stars awarded. In this way, for example, your customers can have only five-star ratings displayed. This filter option is activated by default. If you want to deactivate it, please enter false as the value for this parameter.
  • element: This parameter connects the JavaScript code to the DIV element defined in the first line of code. You can of course specify the ID of the DIV element yourself. If you want to change the ID, just remember to adjust the ID in both the DIV element and the 'element' parameter. The # cannot be left out of the parameter.
  • introtext: With this parameter you can integrate a short introductory text below the product name within the Product Review Sticker. The default setting is "What our customers say:". If you want a different text or no text here, simply change or delete the text.

Now copy both the DIV element and the prepared JavaScript code and paste both directly at the position in the template file of your product detail pages where the Product Review Sticker should be displayed, so that it is visible on every single product detail page.

Product Review Stars

You can display the stars for the overall rating on the product detail page independently of the Product Review Sticker. Placed in a prominent position, the star ratings give your customers an immediate impression of the rating of the product.

website_product-reviews_stars_en-GB.png

If you want to integrate the Product Review stars into your shop, the following JavaScript code is your starting point.

<div id="reviewstars"></div>
<script type="text/javascript" src="//widgets.trustedshops.com/reviews/tsSticker/tsProductStickerSummary.js"></script>
<script>
var summaryBadge = new productStickerSummary();
summaryBadge.showSummary(
{
'tsId': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
'sku': ['9990004'],
'element': '#reviewstars',
'starColor' : '#FFDC0F',
'starSize' : '14px',
'fontSize' : '12px',
'showRating' : 'true',
'scrollToReviews' : 'false',
'enablePlaceholder' : 'false'
}
);
</script>

As with the Product Review Sticker, three of the parameters are essential and must be filled in.

  • tsId: Please enter the Trusted Shops ID for your shop as a value for this parameter.
  • sku: Alongside the Product Review Sticker, the SKU of the product needs to be entered in this parameter. Here, you should use the variable used in your shop system if you include the code in the template of your product detail page. This ensures that the SKUs are dynamically filled and thus the appropriate Product Review stars are displayed on each product detail page. It is also possible to collectively display star ratings for a product that is available in different variations such as colour or size. Open the corresponding product detail page and enter the different SKUs for the respective item in the code as follows ['produkt1sku','produkt2sku','produkt3sku']
  • element: This parameter connects the JavaScript code to the DIV element defined in the first line of code. You can of course specify the ID of the DIV element yourself. If you want to change the ID, just remember to adjust the ID in both the DIV element and the 'element' parameter. The # cannot be left out of the parameter.

In addition to these three essential parameters, the JavaScript code offers some more optional configuration options to customise the Product Review stars to your shop.

  • starColor: With this parameter you can define the colour of the star ratings. The default setting is yellow. If you want to change this colour, simply replace the hexadecimal value in the code with the value for the colour you want.
  • starSize: This parameter determines the size of the star ratings. The default setting is 14 px, but you can also change this to your desired size.
  • fontSize: This parameter determines the font size of the numerical data behind the star ratings, which provide information about the number of ratings given and the overall score. By default, the font size is set to 12 px, but this value can be changed as well.
  • showRating: You can use this parameter to deactivate the display of the overall score behind the star ratings. By default, the display is activated. If you want to deactivate it, you need to enter false as the value for this parameter.
  • scrollToReviews: This parameter allows you to set an anchor link to the Product Review Sticker. Customers who click on the stars when this parameter is activated are automatically directed to the Product Review Sticker on the same page. This function is deactivated by default. If you want to activate it, you will need to change the value of the parameter to true.
  • enablePlaceholder: You can use this parameter to display greyed out stars as placeholders in your shop if no reviews for the product have been received yet. This function is disabled by default. To activated this, you will need to change the value of the parameter to true.

Once you have prepared the JavaScript code according to your needs, you can place the Product Review stars on your product detail pages. Copy the prepared code including the DIV element in the first line of code and go to the template file of your product detail pages. Paste the code in the place where you want the Product Review stars to appear. We recommend that you insert the star ratings below the product title.

You have now successfully integrated the Product Review stars into your product detail page.

You can find more articles on product reviews here:
- How to use Product Reviews?
- How to add product reviews to my Trustbadge integration?
- What do the Product Review questionnaires look like?


Was this article helpful?

0 out of 0 found this helpful