Displaying the star rating snippet
You can display the Review Star Rating Snippets under the product titles on both your homepage as well as the product page in just a few steps:
1. In the Product Reviews settings page, scroll down to the Snippets section.
2. Enable each Snippet:
- Display stars under the product name (for product page)
- On homepage and collection pages
3. Customize the way the Snippets look.
You can customize the look & feel of your Review Snippets by using the correct tags: {{ stars }}, {{ averageRating }}, {{ totalReviews }}, {{ reviewsTranslation }} as well as the margins, alignment and font size.
You may experience certain web browsers that do not correctly render the whitespaces in your snippet string. Unfortunately, this is the default behavior for most browsers - further details about whitespace behavior in HTML can be found here: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace.
But do not falter! There is a way to force the spaces inside the snippet string using the non-breaking space entity . More details here: https://www.w3schools.com/html/html_entities.asp
Example: {{ stars }} - {{ averageRating }} - ({{ totalReviews }} {{ reviewsTranslation }})
4. Once you're done, save the changes using the Save button in the top bar.
The Review Star Rating Snippets should show up automatically under the titles of each product on your homepage, collection, and product pages. If they don't, you might be using a custom theme. Please contact us so we can customize the placement for you asap.
