Customizing the Star Rating Widget via Code

Out-of-the-box, Loox will inject the code for the Star Rating widget on your store pages. These include the product page, collections pages, and homepage featured product (if you have one). The Star Rating widget will display the average rating (rounded up) and the number of reviews for the relevant product.

There are several ways to customize the Star Rating widget to fit your brand's tone and store's design. You can do this within the Loox admin or through editing the code within your liquid files.

In this article, we'll display the different ways to customize the Loox Star Rating widget on your store.

Customizing your store's Rating icons

To edit the Star Rating widget displayed on your store, go to the General Appearance setting within your Loox "Branding" settings section,

The changes are automatically applied to all of your Loox Reviews, Rating, and Carousel widgets, as well as to your Upsell page’s Star Rating widget. 

To change the color of the Rating icons:

• Inside the  Loox App “Branding” settings section, go to “General Appearance”.

• Next to “Rating Icon”, click on the Dropdown menu button,  and select a  rating icon:

  

  

• Once you have selected your rating icon, you can change its color by using the color selector tool next to the dropdown menu or by inserting your the color’s hex code:

  

  

Changing the Color of the Text Next to the Star Rating widget

By default, Loox will display the number of reviewers in the same color you set the Rating Icons to be. However, you can use styling rules in your store's code to only change the color of the text.

To change the color of the Star Rating widget's text, follow the steps below:

• Go to your Shopify Themes menu.
• Click the "Actions" menu and then select "Edit code".
• Open the template or section you use for product pages (usually it's called product.liquid or product-template.liquid, but some themes work differently)
• Find the code below:

<a href="#looxReviews"><div class="loox-rating" data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}"></div></a>

• Above the widget's code mentioned above, paste the following code:

<style> .loox-rating span {color:black;} </style>

• Change the "black" to the color/color code you wish, and this should change the color of the font of the Star Rating widget.

Custom Text Next to the Rating Icons

Out-of-the-box, Loox will display the number of reviewers in parenthesis next to the Rating Icons, like so:

Through customizing the liquid code for the Loox Star Rating widget, you can change the text to include more information.

To customize the text that appears next to your Rating Icons, follow these instructions:

1. Go to your Shopify Themes menu
2. Click the "Actions" menu and then select "Edit code"
3. Open the liquid that you've added the Star Rating widget to: Product pages - usually product.liquid or product-template.liquid Collection pages - usually under snippets: product-grid-item.liquid / product-loop.liquid / product-info.liquid  Cart page - usually cart.liquid or cart-template.liquid
4. Find the code below:

<a href="#looxReviews">
<div class="loox-rating" data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}"></div>
</a>

• By adding a new attribute named data-pattern, you'll be able to customize the text that appears next to the icons (see examples below). In addition to static text, you can also add dynamic values by using the following parameters:
  1. [count] - displays the number of reviews the product has

  2. [rating] - displays the average rating of the product

     Here are a few examples you can use to customize the text that appears by the Rating Icons:

     To add the word "Review(s)" to the Star Rating widget, replace the existing code with this one: <a href="#looxReviews"><div class="loox-rating" data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}"   data-pattern="[count] Review(s)"></div></a>

     

• To display the average rating the product has, replace the existing code with this one: <a href="#looxReviews"><div class="loox-rating" data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}"   data-pattern="[rating]/5"></div></a>

  

  
  

• To display both, replace the existing code with this one:<a href="#looxReviews"><div class="loox-rating" data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}" data-pattern="[rating]/5, [count] Review(s)"></div></a>

  

  
  
• You may edit the text within the data-pattern attribute to include anything you'd like, such as brackets or additional words (in English or any other language).